es6의 상식 요약

자주 사용하는 es6 지식 포인트

es6이라면 javascript에 대해 이야기해보겠습니다. es6도 ES2015

1. 1995년: JavaScript가 탄생했고 초기 이름은 LiveScript였습니다.

2. 1997: ECMAScript 표준이 제정되었습니다.

3. 1999년: ES3가 등장하면서 동시에 IE5가 대세를 이루었습니다.

4. 2000–2005: AJAX라고도 알려진 XMLHttpRequest는 Outlook Web Access(2000), Oddpost(2002), Gmail(2004) 및 Google Maps(2005)에서 널리 사용됩니다.

5. 2009년: foreach, Object.keys, Object.create 및 JSON과 같은 표준(현재 우리 대부분이 사용하고 있는) ES5가 출시되었습니다.

6. 2015: ES6/ECMAScript2015가 나타납니다. 2015년에 ECMAScript 사양 초안 개발을 담당하는 위원회인 TC39는 새로운 표준을 정의하는 시스템을 2016년에 한 번으로 변경하기로 결정했습니다. ES7/ECMAScript2016이 등장했습니다.

7. 2017: ES8/ECMAScript2017이 나타납니다.

8. es6의 경우 호환성이 중요합니다. 확인해 보시기 바랍니다. 두 링크가 여전히 매우 좋습니다.

http://kangax.github.io/compat-table/es2016plus/

Babel. ES6 코드를 ES5 코드로 변환하여 기존 환경에서 실행할 수 있도록 하는 ES6 트랜스코더로 널리 사용됩니다. Babel

var로 정의된 변수는 수정될 수 있습니다. 초기화하지 않으면 undefine이 출력되고 오류가 보고되지 않습니다.

var는 로컬 범위와 함수 범위

의 두 가지 유형으로 나뉩니다. ! ! !

let은 블록 수준 범위입니다. let을 사용하여 함수를 정의한 후에는 함수 외부에 영향을 미치지 않습니다.

let은 블록 수준 범위이며 var와 달리 사전 함수가 없으며 반복적으로 선언할 수 없습니다.

const! ! ! !

const로 정의된 변수는 수정할 수 없으며 초기화해야 합니다.

const는 상수이고 변경할 수 없으며 일반적으로 대문자이며 블록 수준 범위이기도 합니다. . .

템플릿 문자열은 포함된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄 문자열과 문자열 보간 기능을 사용할 수 있습니다. ES2015 사양의 이전 버전에서는 "템플릿 문자열"이라고 불렀습니다.

`` 아포스트로피

1. 바인드 변수

2. 문자열은 여러 줄을 지원합니다

3. ... 스프레드 연산자

4. 향상된 객체 리터럴

Object 리터럴의 정의 방법은 다음과 같습니다. 함수의 많은 매개변수가 일대일 대응으로 출력되어야 하는 상황을 쉽게 처리합니다. 그의 솔루션은 객체를 함수에 전달하는 것입니다. 이 객체는 문자 그대로 정의되며 해당 속성이 적용됩니다. 그리고 값을 사용할 수 있습니다. 함수는 실행을 위해 호출해야 하는 코드 조각일 뿐이기 때문에 이들의 관계는 한 눈에 명확합니다. 축약되고 함수 키워드는 생략 가능

객체 속성을 작성하여 자동으로 계산할 수 있습니다.

1. 속성 ——port——

2. 구조 분해 할당
3. 구조 분해 할당은 의 요소를 할당할 수 있습니다. 배열 또는 객체의 속성을 다른 변수로 정의합니다. 변수의 정의 구문은 배열 리터럴 또는 객체 리터럴의 정의 구문과 매우 유사합니다. 이 구문은 기존 속성보다 매우 간결하고 더 직관적입니다. 실제로, 접근 방법을 설명하기 위해 변수를 사용하는 것은 적절하지 않습니다. 왜냐하면 어떤 깊이의 중첩 배열도 구조 해제할 수 있기 때문입니다.

   var [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo);// 1console.log(bar);// 2console.log(baz);// 3

   로그인 후 복사
4. 구조 해제된 배열의 특정 요소를 건너뛰려면 해당 비트를 비워 둘 수 있습니다.

   var [,,third] = ["foo", "bar", "baz"];console.log(third);// "baz"

   로그인 후 복사

배열 병합

C 확장 기능의 모든 것
2. 화살표 함수

   //箭头函数 =>let jian = () => {console.log("Hello")}jian();//没有参数()=>{console.log("你好")};//有参数(name)=>{console.log(name);};//可以省略()let d = name=>{console.log(name);}d('jiang');//两个参数(name,age)=>{console.log(name,age);};//省略后的let c (a,b)=>a+b;(a,b)=>{console.log(a+b);console.log(c);

   로그인 후 복사

3. 함수 매개변수

함수 매개변수는 세 가지 유형으로 나누어집니다.
기본 매개변수

남아있습니다 매개변수 지정

1. Symbol
   Symbol 는 ES6의 새로운 값 유형 데이터로, 절대 반복되지 않는 값을 나타냅니다.

2. let m = 1;let l = 1;console.log(m==l);//打印出truelet mm = Symbol();let ll = Symbol();console.log(mm==ll);//打印出flase

   로그인 후 복사
   참고로 new 연산자는 Symbol 앞에 사용할 수 없습니다.
3. 객체 기호 속성을 얻으려면 다음을 사용해야 합니다. Object.getOwnPropertySymbols(o)

Set 및 WeakSet

// Setsvar s = new Set();s.add("hello").add("goodbye").add("hello");s.size === 2;s.has("hello") === true;// Weak Setsvar ws = new WeakSet();ws.add({ data: 42 });

类似于 WeakMap，WeakSet 对象可以让你在一个集合中保存对象的弱引用，在 WeakSet 中的对象只允许出现一次：

var ws = new WeakSet();var obj = {};var foo = {};ws.add(window);ws.add(obj);ws.has(window); // truews.has(foo);    // false, foo 没有添加成功ws.delete(window); // 从结合中删除 window 对象ws.has(window);    // false, window 对象已经被删除

Map和WeakMap

Map和WeakMap是ES6新增的数据结构 事实上每个对象都可以看作是一个 Map。 它们本质与对象一样，都是键值对的集合，但是他们与Object对象主要的不同是，键可以是各种类型的数值，而Object对象的键只能是字符串类型或者Symbol类型值 。Map和WeakMap是更为完善的Hash结构。

// Mapsvar m = new Map();m.set("hello", 42);m.set(s, 34);m.get(s) == 34;// Weak Mapsvar wm = new WeakMap();wm.set(s, { extra: 42 });wm.size === undefined

WeakMap数据结构 WeakMap结构与Map结构基本类似。 区别是它只接受对象作为键名，不接受其他类型的值作为键名。键名是对象的弱引用，当对象被回收后，WeakMap自动移除对应的键值对，WeakMap结构有助于防止内存泄漏。

var wm = new WeakMap(); var obj = new Object(); wm.set(obj,'对象1'); obj=null; wm.get(obj);    //undefined wm.has(obj);    //false