자바 스크립트의 4 개의 새로운 구문 6

JS의 ES6 버전은 주요 브라우저에서 널리 지원되었으며 많은 프론트 엔드 프레임 워크도 ES6을 사용했으며 Babel은 호환성에 사용될 수 있으므로 ES6은 응용 프로그램 단계에 들어갔다.

ES6에 익숙하지 않은 경우 ES6을 빠르게 이해하는 데 도움이되는 4 가지 간단한 기본 사용법이 있습니다.

1. Let and Const를 사용하여 변수를 선언합니다

기존 ES5 코드에는 가변 선언에는 두 가지 주요 문제가 있습니다.

(1) 블록 범위에 대한 지원 부족

(2) 상수는 선언 될 수 없습니다

ES6에서는이 두 가지 문제가 해결되어 두 가지 새로운 키워드를 추가했습니다 : Let and Const

블록 스코프에 LET를 사용하십시오

 var a = 1; if (true) {var b = 2;} console.log (a); // 1console.log (b); // 2

ES5에서 IF 블록에서 선언 된 변수 B는 블록 외부에서 액세스 할 수 있습니다.

 // es6let a = 1; if (true) {let b = 2;} console.log (a); // 1console.log (b); // referenceError : b는 정의되지 않았습니다

ES6에서는 블록 외부에서 블록에 액세스 할 수없는 경우 Let In을 사용하여 선언 된 변수 B

다음 코드는 일반적인 혼란스러운 상황입니다

 var a = []; for (var i = 0; i <5; i ++) {a.push (function () {console.log (i);});} a.foreach (function (value) {value ();});

달리기 결과는 다음과 같습니다. 5, 5, 5, 5, 5

LOOP에서 변수 i를 선언하는 데 사용하십시오

 var b = []; for (i = 0; i <5; i ++) {b.push (function () {console.log (i);});} b.foreach (function (value) {value ();});

달리기 결과는 다음과 같습니다. 0, 1, 2, 3, 4

Const를 사용하여 상수를 정의합니다

 // es5var my_constant = true; my_constant = false;

상수는 ES5에서 정의 할 수없고 값을 변경할 수 있으며 직접 보장 할 수 있습니다.

 // es6const에서 my_constant = true; my_constant = false; // uppathtyerror : 상수 변수에 대한 할당

ES6에서 선언 한 Const는 변경할 수 없습니다

2. 템플릿 문자열

줄과 변수를 접합하는 다음 방법이 더 일반적입니다.

var url = 'http : // www.' + 도메인 + '.com/' + path + '?' + QueryParams;

ES6은 간결한 사용을 제공합니다

url =`http : //www.$ {domain} .com/$ {path}? $ {queryparams}`;

3. 새로운 세트 및 맵 객체

ES5에서는 배열을 사용하여 동적 데이터를 저장합니다.

 var collection = []; collection.push (1, 2, 1); console.log (collection); // [1, 2, 1]

중복 데이터가 포함되어 있습니다. 중복 데이터를 원하지 않으면 코드를 사용하여 판단해야합니다.

 함수 addTocollection (collection, value) {if (collection.indexof (value) <0) {collection.push (value)}}

ES6은 세트 객체를 제공 하므로이 상황을 처리하는 것이 훨씬 편리합니다.

 Collection = New Set (); collection.add (1); collection.add (2); collection.add (1); console.log (collection); // set {1, 2}

세트는 또한 세트를 편리하게 통과하고 세트의 데이터를 처리 할 수 있습니다.

ES5는 일반적으로 키 값 쌍 데이터를 저장하는 데 사용됩니다.

 var collection = {}; collection.a = 'abc'; collection.b = 'xyz';

ES6에는 맵이 있으므로 사용할 수 있습니다

 Collection = New Map (); collection.set ( 'a', 'abc'); collection.set ( 'b', 'xyz');

Traversal도 매우 간단합니다

 collection.foreach (함수 (value, key) {console.log (key + ":" + value);}); console.log (collection.size);

4. 함수 매개 변수

ES6의 함수 매개 변수에 대한 두 가지 새로운 기능이 있습니다.

기본값

 함수 dosomething (someObject) {console.log (someObject);}

여기에는 런타임 오류가있을 수 있으며 매개 변수를 확인해야합니다.

 함수 dosomething (someObject) {if (someObject === undefined) {someObject = {}; } console.log (someObject);}

이 유형의 검증 코드는 매우 일반적입니다. ES6에서 매개 변수의 기본값을 설정할 수 있으며 훨씬 간단합니다.

 함수 dosomething (someObject = {}) {console.log (someObject);}

물체 파괴

우리는 종종 키 값 쌍을 포함하는 객체를 함수로 매개 변수로 전달한 다음 함수 내에서 객체의 다양한 속성을 얻습니다.

 함수 dosomething (someObject) {var one = someObject.propone; Console.log (1); var 2 = someObject.proptwo; Console.log (2); var Three = someObject.propthree; Console.log (Three);}

ES6은 매개 변수에서 객체 매개 변수를 직접 해체 할 수 있습니다.

 함수 dosomething ({propone, proptwo, propthree}) {console.log (propone); Console.log (proptwo); Console.log (Propthree);}

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.