Summary of common knowledge points in es6

Knowledge points of es6 that are often used

When it comes to es6, let’s talk about javascript. es6 is also ES2015

1. 1995: JavaScript was born, and its Initially named LiveScript.

2. 1997: ECMAScript standard established.

3. 1999: ES3 appears, at the same time IE5 is all the rage.

4. 2000–2005: XMLHttpRequest, also known as AJAX, is widely used in Outlook Web Access (2000), Oddpost (2002), Gmail (2004) and Google Maps (2005).

5. 2009: ES5 comes out, (which is what most of us use now) standards like foreach, Object.keys, Object.create and JSON.

6. 2015: ES6/ECMAScript2015 appears. In 2015, TC39, the committee responsible for developing the draft ECMAScript specification, decided to change the system for defining new standards to once a year.

7. 2016: ES7/ECMAScript2016 appears.

8. 2017: ES8/ECMAScript2017 appears.

---

When it comes to es6, compatibility comes to mind. I recommend two links for you to check out. They are still very good

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

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

---

How to use es6

You can convert es6 code into es5 code. Babel Google traceur are two transcoders. You can try them.

Babel is a widely used ES6 transcoder that can convert ES6 The code is converted to ES5 code so that it can be executed in the existing environment. You can choose the tool you are used to using Babel

---

The difference between var, let, and const in js

var! ! ! !

Variables defined by var can be modified. If not initialized, undefined will be output and no error will be reported.

var is divided into two types: local scope and function scope

let! ! ! !

let is a block-level scope. After the function is defined using let, it has no impact on the outside of the function.

let is a block-level scope. Unlike var, let has no prefix function and cannot be repeatedly declared

const! ! ! !

Variables defined by const cannot be modified and must be initialized.

const is a constant, cannot be changed, is generally uppercase, and is also a block-level scope. . .

---

es6 template string, enhanced object literal, destructuring assignment

es6 template string

Template string is a string literal that allows embedded expressions . You can use multiline strings and string interpolation functions. They were called "template strings" in previous versions of the ES2015 specification.

1. ``Apostrophe

2. Bind variables

3. String supports multiple lines

4. ...Expand operator

---

Enhanced objects Literal

There are two ways to output object literals: traditional '.', and array mode. However, when outputting in array mode, the square brackets must be enclosed in quotation marks

Object The literal definition method can easily handle the situation where a large number of parameters of the function need to be output in one-to-one correspondence. His solution is to pass an object into the function, and this object is defined in a literal way, and the corresponding attributes and values ​​can be used. Their relationship is clear at a glance, because a function is just a piece of code that must be called to execute

1. Literal object properties can be abbreviated

2. Literal object methods can The abbreviation omits the function keyword

3. Object properties can be written as automatically calculated properties

4. Inheritance——port——

---

Destructuring assignment

Destructuring assignment can assign the elements of the array or the properties of the object to another variable. The definition syntax of the variable is very similar to that of an array literal or an object literal. This syntax is very concise and more intuitive and clearer than the traditional property access method

In fact, it is not appropriate to use variables to describe it, because you can deconstruct nested arrays of any depth:

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

You can leave the corresponding bits blank to skip certain elements in the destructured array:

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

---

es6's spread operator , arrow function, function parameters

Several functions of the expansion operator

1. Expand array

2. Copy of array

3. Merge of arrays

4. Call of expansion function

---

Arrow function

//箭头函数 =>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);

---

Function parameters

Function parameters are divided into three types

1. Default parameters

2. Extended parameters

3. Remaining parameters

---

Symbol

Symbol is a new value type added in ES6 Data represents a value that never repeats

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

Note that the new operator cannot be used before Symbol here

If you want to get the object symbol attribute, you need to use Object. .getOwnPropertySymbols(o).

---

Set and WeakSet

ES6 adds 2 new data structures (New data structures) types, Set and Map

Set and WeakSet Data structures are new to ES6.

It is very similar to an array, but the members of the Set data structure are unique.

Special note: Only one NaN can be added to Set

// 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内容到文档中时，传统的写法非常麻烦，所以之前我们通常会引用一些模板工具库

The above is the detailed content of Summary of common knowledge points in es6. For more information, please follow other related articles on the PHP Chinese website!