The relationship between ES6 and JavaScript
1. ES6 is the common name of ES2015+, so to speak, what is ES6?
ES full name is ECAMScript, it is a kind of language of JavaScript foundation construction, JavaScript is established in the ECAMScript language foundation specification to establish and use, so, the use of ECAMScript, for JavaScript is very important!
As I understand it, ECAMScript is a language-level thing that just defines the syntax of JavaScript and other languages built on top of it, whereas JavaScript language is more about platform nature.
As shown in Figure 1-1, JavaScript consists of ECAMScript, DOM and BOM. DOM and BOM are interfaces provided by Web API or interactive parts between JavaScript and browser. In essence, they manipulate document elements to display layout. And ECAMScript in JavaScript where the function of syntax, it does not have a direct relationship with the document, but its data processing will be displayed in the document through the Web API.
The following is about the update content of ES2015, ES2016 and ES2017, namely ES6, which is commonly referred to by us, to expand out and talk about what new content it has
Ii. Classification of new ES6 features
We will mainly explain the content of the four categories:
1. Solve some shortcomings of the original grammar
Block-level scope for let and const
2. Enhance the original syntax
Destruct, expand, parameter defaults, template strings
3, new objects, new methods, new functions
Promise, proxy, object assign, is
4. Completely new data types and data structures
Symbol, set, map
Iii. Use of ES6
Let and const block-level scope
In ECMAScript, there were only global and function scopes. In ES6, there is a new block-level scope, which is usually a pair of code wrapped in {}. The scope in {} is the block-level scope, so we define two let and const keywords. The old var keyword is reserved for the maintenance of the old code.
1> The let keyword forbids variable promotion, is defined before it is used, and only applies to the block-level scope it defines, often in structures such as for or if.
for ( var i = 0; i < 3; i++) { for ( var i = 0; i < 3; i++) { console.log(i); } } // 0 1 2 ----------------------------------- for ( let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) { console.log(i); }} // 0 1 2 0 1 2 0 1 2Copy the code2> In the for loop, the let effect actually makes use of the closure mechanism, and the let in the loop block and the let in the execution block are the variables defined in the two blocks, and do not affect each other.
for (let i = 0; i < 2; i++) {
let i = 'foo'
console.log(i);
} // foo foo
Copy the code3> Const adds a read-only attribute to let, that is, once a variable has been declared, it is not allowed to change its address.
const obj = {name: 'aaa'}
obj.name = 'bbb'
Copy the code4> In use, do not use var, mainly use const with let
2. Array deconstruction
Array deconstruction is obtained by position.
// const arr = [100, 200, 300] // all const [a, b, c] = arr // a = 100 b = 200 c = 300 C] = arr // c = 300 Undefined const [a,b,c,d,e] = arr // a = 100, Const [a,b,c,d = 400,e = 500] = arr // a = 100, b = 200 c = 300 d = 400 e = 500Copy the code3. Deconstruction of objects
Objects are deconstructed similar to arrays, except instead of being retrieved by positional indices, they are retrieved by property names.
const obj = {name: 'bob', age: Const {name, age} = obj console.log(name) console.log(age) const {name, age} = obj console.log(age) const {name, age} = obj console.log(age) const {name, age} = obj console.log(age) Const {name:setName = 'sale', age} = obj let name = 'reset' console.log(name) console.log(age) const {name:setName = 'sale', age} = obj let name = 'reset' console.log(age)Copy the code4. Template variables
In ES6 syntax, we have added a new syntax format for template arguments, using the dashes as double quotes. The features of this template argument are as follows:
1. Support line breaks;
2, using ${} interpolation expression, {} content is js code;
3, Before the template argument, we can add a tag function to handle the value of the template argument.
const name = 'df' const age == 18 const mrg = `I am df, ${name} is ${age} 'const fn = (STRS) => {console.log(STRS) is the array of template arguments received. Function tag (STRS,name,name1) {function tag (STRS,name,name1) { Console. log(STRS,name1,name1) // ['I am df, ', 'the age is ', ['I am df, ', 'the age is ', '' ] df 18 return strs[0] + name + strs[1] + name1 + strs[2] // } const mrg1 = tag`I am df, ${name} = ${age} 'console.log(mrg1); ${name} = ${age}' // The return value of the tag function is the value of the template argument (mggr1).Copy the code5. Default and remaining parameters
The default parameters
The default parameters were previously determined by the conditions inside the function.
function add (a ,b) {
a = a === undefined ? 0 : a
b = b === undefined ? 1 : b
retrun a + b
}
add (0) // 1
Copy the codeThe new feature to set default values for parameters in ES6 will greatly simplify our code
Function add (a = 0,b = 1) {function add (a = 0,b = 1) {function add (a = 0,b = 1) {function add (a = 0,b = 1) { Our defaults will not work properly console.log(' foo is shu', a + b) retrun a + b} add (0) // 1Copy the codeThe remaining parameters
Previously we used arguments objects to receive arguments as pseudo-arrays, including arguments when we didn’t know the number of arguments. Now, in ES6 syntax, we have… Operator, which has two effects:
1. Residual operator, used to receive operations on residual parameters from the current position.
function redece (... Arg) {console.log(arg) // Arg is a pseudo-array of real arguments passed in, and this operation can only be performed on the last argument (only once), otherwise it affects the previous arguments}Copy the code2, spread out: spread out the contents or properties of an array or object.
Const arr = ['foo', 'fn', 'functions'] console.log(arr[0], arr[1], arr[2]) // Arr) // The apply method is (parameter 1: the array used to redirect this to the function, parameter 2: the array used to insert parameters into the function) console.log(... Arr) // ES6 (spreadCopy the codeArrow function
Arrow function (argument list) => {function body}, in the case of only return values in the function body, the curly braces can be omitted.
const fn = n => n+1
const fn1 = (n = 3, m = 2) => {
return n + m
}
Copy the codeArrow function features:
1. Simplified writing format of functions to make functions look more readable and writable
2. It doesn’t have this mechanism, and it doesn’t change the direction of this, under any circumstances
Name = 1 const fn = (n,m) => {n = this.name return n + m} function (n, m) { const _this = this setTimeout( ()=> { console.log(this.name) // undefined }, 1000) }Copy the codeThe apply, call, and bind methods are used to change the execution of this.
Call: two arguments, the first is the this value, which is not set or null pointing to the global value, and the second is a parameter object; Apply immediately: two parameters, the first is this value, which is not set or null pointing to the global value, and the second is a pseudo-array of parameters. Bind: is an encapsulation of call immediately; Lazy to performCopy the codeEnhancements to object literals
Enhancements to object usage include:
1. If you want to assign a variable value to an attribute of an object, and the variable name is the same as the attribute name, you can omit the notation.
2. Methods in objects can also be omitted. If the method name and attribute name are the same, the colon is omitted, where this refers to the object calling the method
In ES2015, object attribute names can be named as []
Const name = 'df' // 1, const obj = {foo: 'foo', name = // 2, // fn: function fn () {console.log('eeeee... ')} // es2015 can use fn () {console.log('eeeee... ')}} // 3, // obj[math.random ()]:123 // obj[math.random ()]:123Copy the codeBefore I say anything, I’d like to add one missing point,
1. Add three new methods for strings, include and startWith endWith, that take a string as an input and return a Boolean value that specifies whether the string is included or not.
2. Assign method: merge source object to target object
const obj = { name: 'df' age: 12 } const objDog = { type: 'dog' } const action = { say : 'WWW '} const animal = object. assign(objDog, obj, action) // Console. log(animal) // {name: 'df',age: 12,type: 'dog',say: 'www'}Copy the codeThe specific application scenarios are as follows:
If one object (o1) references another object (O2), the assign method will be used to assign the value of O2 to O1. This method will not affect the other object.
const obj1 = function func () {
const name = 'df'
ret
}
obj1.name = 'jxl'
console,log(obj.name) // df
console.log(obj1.name) // jxl
Copy the codeI’ll see you next time. Thank you