Regarding ES6, what are the new additions, what are the frequently used ones, and experience

ES6

1. New block-level scope namely (let, const)

Variables declared by let are only valid in the code block where the let command is located.
const declares a read-only constant. Once declared, the value of the constant cannot be changed.
And let and const do not have variable promotion, the value of let can be changed, and the variable declared by const must not change the value. This means that once the variable is declared by const, it must be initialized immediately and cannot be left for later assignment
before ES6. JavaScript has only two types Scope: global variables and local variables in functions.
const a ;//An error is reported, once the variable is declared, it should be assigned immediately! !
const b = 2;
b = 3//An error is reported, because after defining the constant, it cannot be re-assigned! !

3. Added syntax sugar for defining classes (class)
4. Added data type (symbol)
5. Added variable structure assignment (let {a} = {a:1})
Deconstruction assignment syntax is a kind of Javascript expression. By destructuring and assigning values, attributes/values ​​can be taken out of the object/array and assigned to other variables.

let [a, b] = [10, 20];
console.log(a);
//  10
console.log(b);
// 20

6. The function parameter allows to set the default value (fumction(a=1){}), the rest parameter is introduced, the arrow function (()=》{}) is
used to define the function using ES6 arrow function syntax, and the original function’s " Delete both the "function" keyword and function name, and use "=>" to connect the parameter list and the function body.
When there is only one function parameter, the parentheses can be omitted; but when there are no parameters, the parentheses cannot be omitted.
1). The arrow function this is the this of the parent scope, not the this when it is called. The this
arrow function always points to its parent scope. Any method cannot be changed, including call, apply, and bind.
The this of an ordinary function points to the object that called it.

2). Arrow functions cannot be used as constructors, and new cannot be used

3). The arrow function is called by call and apply, it will not change the this point, only the parameters will be passed in

4). Arrow functions have no prototype properties.
7. Api is added to arrays, such as IsArray, from, of methods, and entries(), keys(), and values() are added to array instances.
8. Objects and arrays are added The spread operator (...)
in the spread operator (...arr) object is used to take out all the traversable attributes in the parameter object and copy them to the current object

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

9. ES6 adds modularity (import, export)
. There is no modular concept in the previous javascript. If you want to perform modular operations, you need to introduce a third-party class library. With the development of technology, the front-end and the back-end are separated, and the front-end business becomes more and more complicated. It was not until ES6 brought modularity that javascript supported modules for the first time. ES6's modularity is divided into two modules: export and import.
In ES6, each module is a file. The variables, functions, and objects defined in the file cannot be obtained
externally . When the content of the module needs to be read externally, it must be exposed by export.
Default export (default export)
A module can only have one default export. For the default export, the name of the import can be inconsistent with the name of the export.

export default function(){
    return "默认导出一个方法"
}

You can put all the variables that need to be exported into an object, and then export through default export

let res = {a:1}
export default res 

If the variable names are the same in multiple imported files, there will be a naming conflict problem. In order to solve this problem, ES6 provides a method of renaming. You can do this when importing names:

import {myName as name} from "./test.js";

10. Added Set and Map data structures (arr.Set(), arr.map())
Set is similar to an array, but the values ​​of the members are unique and there is no duplication. Using new Set() to create a Set instance
Map is similar to an object, but the range of keys is not limited to strings. Various types of values ​​can be used as key values. Use new Map() to create Map instance
11. Natively provide Proxy constructor to generate Proxy instance (var proxy = new Proxy(target, handle);)
12. Added Generator and Iterator

Guess you like

Origin blog.csdn.net/t5_5_5_5_5_7_7/article/details/109602195