JavaScript ES6 새로운 구문과 새로운 멋진 기능 코드를 더욱 현대적이고 더 읽을 수 있습니다. 그것은 당신이 더 적은 코드를 작성하고 더 많은 것을 할 수있게합니다. ES6 은 화살표 기능,템플릿 문자열,클래스 파괴,모듈 등과 같은 많은 훌륭한 기능을 소개합니다. 한번 보자.

const 및 let

const는 변수를 선언하기위한 ES6 의 새로운 키워드입니다. const는var보다 강력합니다. 일단 사용하면 변수를 다시 할당 할 수 없습니다., 즉,객체와 함께 사용하는 경우를 제외하고는 불변의 변수입니다.선택기를 타겟팅하는 데 정말 유용합니다. 예를 들어,우리는 하나의 버튼을 이벤트를 실행하는 때,또는 당신을 선택하려면 HTML 요소에 자바스크립트,사용하는const대신var. 이것은var가’게양’이기 때문입니다. 변수를 다시 할당하고 싶지 않을 때const를 사용하는 것이 항상 바람직합니다.,

위 코드에서const를 변경하지 않고 재지정할 수 없습니다. 당신이 그것을 새로운 가치를 부여하려고하면,그것은 당신에게 오류를 반환합니다.

let할 수 있는 해임되고 새로운 값입니다. 변경 가능한 변수를 만듭니다.

let는 둘 다 차단 범위라는 점에서const와 동일합니다. 이는 변수가 해당 범위 내에서만 사용 가능하다는 것을 의미합니다.,

화살표 함수

화살표 함수는 정말 굉장하며 코드를 더 읽기 쉽고 구조화되며 현대 코드처럼 보이게합니다. 를 사용하는 대신:

이다.

As you see,화살표는 기능이 더 읽기 쉽고 깨끗합니다! 더 이상 이전 구문을 사용하지 않아도됩니다.

또한,당신은 당신이 사용할 수 있는 화살표수와 함께map,filter,andreducebuilt-in functions.,

지도 기능을 가진 화살표 보기 더 분명하고 읽을 수 있는 것보다map에 ES5. ES6 을 사용하면 더 짧고 똑똑한 코드를 작성할 수 있습니다. 동일하게 사용할 수 있습니와 함께filter및reduce.

템플릿 리터럴

템플릿 리터럴 또는 템플릿 문자열은 정말 멋진 있습니다. 문자열을 연결하기 위해 더하기(+)연산자를 사용하거나 문자열 안에 변수를 사용하고자 할 때 사용할 필요가 없습니다.,

이전 syntax:

새로운 ES6syntax:

그렇게 간단합니다! 그것은 오래된 구문과 ES6 사이의 정말 큰 차이입니다. 문자열을 가지고 놀 때 ES6 의 리터럴 문자열은 ES5 보다 더 조직적이고 잘 구조화 된 것처럼 보입니다.

기본 매개 변수

PHP 에서 작업 할 때 일반적으로 기본 매개 변수를 사용합니다. 이를 통해 매개 변수를 미리 정의할 수 있습니다.,

이 때 당신을 매개 변수에 대한 지식을 향상시킬 수 있는 정의되지 않기 때문에 오류가 매개변수에 이미 정의된 기본입니다. 그래서 실행할 때의 기능을 놓치는 매개변수,그것은 값의 기본 매개 변수를t,그리고 그것은 반환하지 않습하는 오류!

보이 예:

기능을 반환 정의되지 않기 때문에,우리는 그것에게는 두 번째 매개 변수를age.,

그러나 우리가 사용하면 기본 매개 변수에 대한 지식을 향상시킬 수 정의되지 않은,그리고 해당 값을 사용할 때 우리가 잊지를 지정 매개변수!

As you see,함수 값을 반환하더라도 우리는 두 번째 매개 변수입니다. 이제 기본 매개 변수로 오류를 미리 처리 할 수 있습니다.

배열 및 객체 파괴

파괴로 인해 배열 또는 객체의 값을 새 변수에 쉽게 할당 할 수 있습니다.,

이전 syntax:

와 ES6syntax:

와 ES5,우리는 각 각각의 변수에 값을. ES6 을 사용하면 값을 대괄호 안에 넣으면 객체의 속성을 얻을 수 있습니다.

참고:속성의 이름과 동일하지 않은 변수를 할당하면 정의되지 않은 상태로 반환됩니다. 예를 들어,이름의 숙박 시설은name그리고 우리는 할당을username가변,그것은 반환되지 않습니다.,

우리는 항상 변수의 이름을 속성의 이름과 동일하게 지정해야합니다. 그러나 변수의 이름을 바꾸려는 경우 콜론:를 대신 사용할 수 있습니다.

배열에 대해서는,우리는 동일한 구문을 사용으로 객체입니다. 우리는 단지 대괄호를 대괄호로 대체해야합니다.

가져오기 및 내보내기

Usingimport및 export자바스크립트에서 응용 프로그램은 더 강력합니다., 그들은 당신이 별도의 재사용 가능한 구성 요소를 만들 수있게합니다.

잘 알고 있는 경우 모든지니스 어플리케이션 개발자,당신은 그들이 사용하는import및export구성 요소를 처리하는 대부분의 시간입니다. 그래서 그들은 실제로 어떻게 작동합니까?

그것은 간단합니다! export를 사용하면 다른 JavaScript 구성 요소에서 사용할 모듈을 내보낼 수 있습니다. 우리는import를 사용하여 구성 요소에서 사용할 모듈을 가져옵니다.예를 들어 두 개의 파일이 있습니다., 첫 번째 이름은detailComponent.js이고 두 번째 이름은homeComponent.js입니다.

IndetailComponent.js우리는detail함수를 내보낼 것입니다.

그리고 만약 우리가 사용하려면 이 함수에서homeComponent.js,우리는이 사용하는import.

경우 우리가 가져오려는 하나 이상의 모듈을 우리는 그냥 넣어에서 괄.,나는 이것이 내가 할 수있는 유일한 방법이라고 생각한다.!

약속

약속은 ES6 의 새로운 기능입니다. 비동기 코드를 작성하는 방법입니다. 예를 들어 API 에서 데이터를 가져오고 싶을 때 또는 실행하는 데 시간이 걸리는 함수가있을 때 사용할 수 있습니다. 약속을 통해 문제를 쉽게 해결할 수 있으므로 첫 번째 약속을 만들어 봅시다!

콘솔을 로그하면 약속을 반환합니다. 따라서 데이터를 가져온 후에 함수를 실행하려는 경우 약속을 사용할 것입니다., 약속을 두 개의 매개변수:resolve및reject을 처리하는 예상되는 오류가 있습니다.

참고:가져 오기 함수는 약속 자체를 반환합니다!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{return fetch(url);}
getData(url).then(data=> data.json()).then(result=> console.log(result));

면 지금 로그는 당신의 콘솔을 배열을 반환할 것입니다.

나머지를 매개 변수 및 확산 연산자

나머지 부분 매개변수를 사용하여 얻을 인수의 배열을 반환하는 새로운 배열입니다.,

확산 연산자와 동일한 구문을 나머지 부분 매개변수,그러나 확산 연산자는 배열 자체뿐 아니 인수입니다. For 루프 또는 다른 방법을 사용하는 대신 Spread 매개 변수를 사용하여 배열의 값을 얻을 수 있습니다.

클래스

클래스는 객체 지향 프로그래밍(oop)의 핵심입니다. 그들은 당신의 코드를보다 안전하고 캡슐화시킵니다. 클래스를 사용하면 코드에 멋진 구조를 제공하고 방향을 유지합니다.,

클래스를 만들어 사용하는class키워드는 다음에 클래스 이름을 가진 두 개의 중괄호.

이제 우리에 액세스할 수 있는class방법과 속성을 사용하는new키워드를 사용합니다.

class myClass{ constructor(name,age){ this.name=name; this.age=age;}}const Home= new myClass("said",20);console.log(Home.name)// said

상속 다른 클래스에서,사용하는extends키워드에 의해 다음의 이름을하고 싶은 클래스를 상속합니다.,

에 대해 자세히 알아볼 수 있습니다 클래스는 여기에.

ES6 에는 다른 놀라운 기능이 있습니다.

결론

여러분들은이 기사가 유용하다는 것을 알았 으면 좋겠습니다. 그렇다면 프런트 엔드 주제에 대해 자세히 알아 보려면이 메일 목록을 구독하십시오. 시간 내 주셔서 감사합니다.

방법에 의해 나는 최근에 근무하는 강력한 소프트웨어 엔지니어의 그룹 중 하나에 대한 내 모바일 응용 프로그램입니다., 조직되었고 제품이 전달되었는 매우 빠르게,보다 훨씬 빠르게 다른 기업과 프리랜서로 일했고,난 솔직히 그들을 추천해 다른 프로젝트 거기에있다. 당신이 연락하고 싶다면 나에게 이메일을 쏴—[email protected] 나는 이것을 할 수 없다.