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의 경우 호환성이 중요합니다. 확인해 보시기 바랍니다. 두 링크가 여전히 매우 좋습니다.

https://kangax.github.io/compat-table/es6/

---

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

es6 사용 방법

es6 코드를 es5 코드로 변환할 수 있습니다. Google Traceur는 두 가지 트랜스코더로 사용해 볼 수 있습니다

---

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

js

var에서 var, let, const의 차이점을 알아보세요! ! ! !

---

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

var는 로컬 범위와 함수 범위

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

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

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

const! ! ! !

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

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

es6 템플릿 문자열, 향상된 객체 리터럴, 구조 분해 할당

es6 템플릿 문자열

---

템플릿 문자열은 포함된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄 문자열과 문자열 보간 기능을 사용할 수 있습니다. 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"

---

es6의 스프레드 연산자, 화살표 함수, 함수 매개변수

스프레드 연산자의 여러 효과

배열 확장

배열 복사

---

배열 병합

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

---

ES6에는 2개의 새로운 데이터 구조(새 데이터 구조) 유형이 추가되었습니다. Set 및 Map

Set 및 WeakSet 데이터 구조는 ES6의 새로운 기능입니다. 배열이지만 Set 데이터 구조의 멤버는 고유합니다.

특별 참고 사항: Set에는 하나의 NaN만 추가할 수 있습니다

// 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

由于WeakMap对象不可遍历，所以没有size属性。

关键点：ES2015=ES6
最常用的ES6特性
ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。
块级作用域与函数声明问题：
函数能不能在块级作用域之中声明，是一个相当令人混淆的问题。
ES6引入了块级作用域，明确允许在块级作用域之中声明函数。

注意：ES6规定，块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。

当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this
5.ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
6.template string
我们要插入大段的html内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库

위 내용은 es6의 상식 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!