【Notes】ECMAScript 6-11

ES6 new features

1.let keyword

The let keyword is used to declare variables. Variables declared using let have several characteristics:

• Duplicate statement not allowed
• block scope
• variable hoisting does not exist
• does not affect the scope chain
• Application scenario: It is right to use let to declare variables in the future

2. const keyword

The const keyword is used to declare constants. The const declaration has the following characteristics:

• declaration must assign an initial value

• Identifiers are generally uppercase

• Duplicate statement not allowed

• Value does not allow modification

• block scope

   注意: 对象属性修改和数组元素变化不会发出 const 错误 应用场景：声明对象类型使用 const，非对象类型声明选择 let
  

3. Variable deconstruction assignment

ES6 allows to extract values ​​from arrays and objects and assign values ​​to variables according to a certain pattern, which is called destructuring assignment.

1) Destructuring of arrays:

2) Destructuring of objects

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

4. Template strings

The template string (template string) is an enhanced version of the string, identified by backticks (`), features:

• Newline characters can appear in the string
• Variables can be output in the form of ${xxx}
  

5. Arrow functions

ES6 allows the use of [arrows] (=>) to define functions

• If this is called directly, it points to window
• Arrow function this is static, and this always points to the value of this under the scope where the function is declared
• Arrow functions cannot instantiate objects as constructors
• Shorthand for arrow function (omit parentheses, when there is only one formal parameter) (omit curly braces, when the code body has only one statement)
  
  

6. rest parameters

ES6 introduces the rest parameter, which is used to obtain the actual parameters of the function and is used instead of arguments

7.spread extension operator

...The spread operator converts an array into a comma-separated sequence of arguments

8. Application of spread operator

• Merge of arrays

• array clone
  
  

• Convert pseudo-array to real array
  
  

9.Symbol

ES6 introduces a new primitive data type Symbol, representing a unique value. It is the seventh data type of the JavaScript language and is a data type similar to strings.
Symbol Features

• The value of Symbol is unique and used to resolve naming conflicts
• The value of Symbol cannot be operated with other data
• The object properties defined by Symbol cannot be traversed using the for...in loop, but you can use Reflect.ownkeys to get all the key names of the object

10.Symbol built-in properties

11. Iterators

for...in traverses the key name

use for...of traverses the key value

how it works

• Create a pointer object pointing to the start of the current data structure
• When the next() method of the object is called for the first time, the pointer automatically points to the first member of the data structure
• Next, the next() method is called continuously, and the pointer moves backward until it points to the last member
• Each time the next() method is called, an object containing the value and down properties is returned
• Note (when you need to customize the traversal data, think of iterators)

12. Generator

The generator function is an asynchronous programming solution provided by ES6, and its syntax behavior is completely different from that of traditional functions.

13.Promise

Promise是ES6引入的异步编程的新解决方案。
语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果。

• Promise constructor: Promise(excutor) {}

• Promise.prototype.then method

• Promise.prototype.catch method
  

• Promise encapsulates AJAX operation
  
  and successfully gets data

• Call the then method The return result of the then method is a promise object, and the state of the object is determined by the execution result of the callback function

• If the result returned in the callback function is a property of non-promise type, the status is success, and the return value is the successful value of the object

14.Set

ES6 provides a new data structure Set (collection). She is similar to an array, but the values ​​of the members are unique. The collection implements the iterator interface, so you can use [extension operator] and [for...of...] to traverse, Collection properties and methods:

• size returns the number of elements in the collection
• add adds a new element and returns the current collection
• delete deletes the element and returns a boolean value
• has checks whether an element is contained in the collection and returns a boolean value
  
  
• Array deduplication
  
  
• intersection
  
  
• union
  
• difference set
  

15. class class

ES6 provides a way of writing closer to traditional languages, introducing the concept of Class (class) as a template for objects. Through the Class keyword, you can define a class. Basically, ES6's Class can be regarded as just a syntactic sugar. Most of its functions can be achieved by ES5. The new class writing method only makes the object prototype writing method clearer and more like the syntax of object-oriented programming.

16. Numerical expansion

1. Number.EPSILON is the minimum precision represented by JavaScript (the value of the EPSILON property is close to 2.2204460492503130808472633361816E-16)

2. binary and octal

3. Number.isFinite checks whether a value is finite

4. Number.isNaN checks whether a value is NaN

5. Number.parseInt, Number.parseFloat string to integer conversion

6. Number.isInteger Determines whether a number is an integer

7. Math.trunc erases the decimal part of the number

8. Math.sign judges whether a number is positive, negative or zero

17. Object method extension

1. Object.is Determines whether two values ​​are equal
2. Object.assign merge of objects
3. Object.setPrototypeOf, Object.getPrototypeOf set the prototype object

18. ES6 modularity

Modularization refers to splitting a large program file into many small files, and then combining the small files.

The advantages of modularity are as follows:

• prevent naming conflicts
• code reuse
• high maintenance

Modular specifications prior to ES6 are:

• CommonJS => NodeJS、Browserify
• AMD => requireJS
• CMD => seaJS

18.1 ES6 modular syntax

The module function mainly consists of two commands: export and import

• The export command is used to specify the external interface of the module
• The import command is used to import functionality provided by other modules

19 New features in ECMAScript 7

19.1 Array.prototype.includes

includes 方法用来检测数组中是否包含某个元素,返回布尔类型值

19.2 Exponential Operators

在ES7中引入指数运算符 【**】，用来实现幂运算，功能与Math.pow结果相同

20 ECMAScript 8 New Features

20.1 async and await¶

async 和 await 两种语法结合可以让异步代码像同步代码一样

20.2 async functions

1. The return value of the async function is a promise object
2. The result of the promise object is determined by the return value of the async function execution

20.3 await expressions

1. await must be written in an async function
2. The expression on the right side of await is generally a promise object
3. await returns the value of promise success
4. If the promise of await fails, an exception will be thrown, which needs to be captured and processed by try...catch

20.4 Object.values 和 Object.entries

1. The Object.values() method returns an array of all enumerable property values ​​for a given object
2. The Object.entries method returns an array of traversable properties [key, value] for a given object itself

20.5Object.getOwnPropertyDescriptors

This method returns a description object of all the properties of the specified object

21 ECMAScript 9 rest parameters

rest 参数与spread扩展运算符在ES6中已经引入， 不过ES6中只
针对于数组， 在ES9中为对象提供了像数组一样的rest参数和扩展运算符