ECMAScript new features 1

Article description: This article is the notes and experience of the front-end training camp of Regao. If there are any improprieties, I hope you can point out and teach, thank you

One, ECMAScript overview

ECMAScript is also a scripting language, generally abbreviated as ES, which is usually regarded as the standardized specification of JavaScript. In fact, JavaScript is an extended language of ECMAScript. Only the most basic syntax is provided in ECMAScript. JavaScript implements the ECMAScript language standard and expands on this basis:

In the web environment:

In the Node environment:

The JavaScript language itself refers to ECMAScript. Since 2015, ES has maintained an iteration of one version per year.

Two, ES2015 overview

ES2015 is also called ES6. ECMAScript standard specification: http://www.ecma-international.org/ecma-262/6.0/ Compared with ES5.1, the changes are relatively large

Solve some problems or shortcomings with the original grammar
Enhance the original grammar
New objects, new methods, new functions
Brand new data types and data structures

Three, ES2015 let and block-level scope

Global scope
Function scope
Block-level scope: The scope wrapped by {} becomes a block

yarn add nodemon -dev This command installs nodemon, yarn nodemon file name This command is automatically executed after the file is modified and saved

if(true){
    var foo = 'zce'
}
console.log(foo)// zec 这种情况当代码复杂时是不利的
//=======================================
if(true){
    let foo = 'zce'
}
console.log(foo) //foo is not defined
// let let声明后其作用域在大括号内，外部无法访问

Circulation situation:

for(var i = 0; i< 3; i++){
    for(var i = 0; i< 3; i++){
        console.log(i)
    }
    console.log('内层结束 i=' +i)// 内层结束 i = 3
}

// 0 1 2
//外层声明了i过后，内层再次声明这个变量，都是使用var声明，并不是一个块级作用域内的成员，而是全局成员，内层所声明的i会覆盖掉外层声明的i，等内层循环完之后，内层的i为3，对于外层仍然是3，所以不会继续循环了

//===============================================================
for(let i = 0; i< 3; i++){
    for(let i = 0; i< 3; i++){
        console.log(i)
    }
    console.log('内层结束 i=' +i)
}
// i为内部的块级作用域的局部成员,内层循环的let 把i关进了一个盒子当中，并不影响外部成员，即便把外部的let改为var也是可以的

var elements = [{},{},{}]
for(var i = 0;i<elements.length;i++){
    elements[i].onclick = function(){
        console.log(i)
    }
}
elements[0].onclick()// 这里的i无论是几，结果都是3
//打印的i始终是全局作用域的i，循环完成之后i被累加到了3，最后结果都是3
//====================================
//建立闭包机制避免上述问题
var elements = [{},{},{}]
for(var i = 0;i<elements.length;i++){
    elements[i].onclick = (function(i){
        return function(){
            console.log(i)
        }
    })(i)
}//闭包利用函数作用域去摆脱全局作用域产生的影响
elements[0].onclick()
//闭包机制较为复杂， 将var改为let就解决了

for(let i=0;i<3;i++){
    let i = 'foo'
    console.log(i)//foo foo foo
    //两个i不在同一个作用域当中
}
//拆解如下：
let i = 0;

if(i<3){
    let i = 'foo'// i为if语句内部的独立的局部作用域，外部循环的计数器是外部循环产生的作用域，所以是互不影响的
    console.log(i)
}

i++

if(i<3){
    let i = 'foo'
    console.log(i)
}

i++

if(i<3){
    let i = 'foo'
    console.log(i)
}

i++

// ============================
console.log(foo)//undefined 说明打印的时候，此时的foo已经声明了，只是还没有赋值而已，这种现象叫做变量声明的提升
var foo = 'zec'
//================
console.log(foo)//Cannot access 'foo' before initialization(引用异常的错误)
let foo = 'zec'

For other details, please read Chapter 3 Section 3 in "JavaScript Advanced Programming Fourth Edition".

Four, ES2015const

const declares a read-only constant or constant, which has more read-only features than let, and it is not allowed to be modified after declaration

const name = 'zec'
name = 'jack' //Assignment to constant variable，不能改变name

Declaration and assignment cannot be placed in two statements

const name
name = 'zec'//声明和赋值不能放到两个语句当中

When defining an object, the heap memory address pointed to cannot be modified

const obj = {}
obj.name = 'zec'//并没有修改指向的内存地址，只是修改了这块内存当中的数据，是被允许的

obj = {}//obj赋值新的空对象会报错，因为这种赋值改变了obj的内存指向

Best usage: Don't use var, use const as main, and cooperate with let; all use const by default. Use let to declare values that will definitely need to be modified.

V. Deconstruction of ES2015 arrays

Use destructuring to quickly get the specified members in the array

const [foo,bar,baz] = arr
console.log(foo,bar,baz)//100 200 300

Get the member corresponding to a location

const [, , baz] = arr// 获取某个位置对应的成员
console.log(baz)//300

Adding three dots before the variable name of the deconstructing position means to extract all members from the current position onwards. The use of three dots can only be used in the last position of the deconstructing member

const [foo,...rest] = arr
console.log(rest)// [200,300]

The number of members in the deconstructed position is less than the length of the deconstructed array, and it will be extracted according to the position from front to back, and the extra members will not be extracted

const [foo] = arr
console.log(foo)//100

If the member at the destructuring position is greater than the length of the array, it is the same as the subscript that does not exist in the access array, and cannot be accessed

const[foo,bar,baz,more] = arr
console.log(more)//undefined

If you set the default value for the extracted member, assign an equal sign after the variable name at the destructuring position. If the array member is not extracted, it becomes the default value

const[foo,bar,baz = 123,more = 'default value'] = arr
console.log(baz,more)// 300 default value

Six, the deconstruction of the object

Use a structure that matches the object to implement object attribute assignment

const obj = {name :'zce',age:18}
const { name } = obj 
console.log(name)//zce

The other characteristics of deconstructed objects are exactly the same as deconstructed arrays
If there are members with the same name in the current scope, there will be a conflict. In order to resolve this conflict, use the rename method

const name = 'tom'
const {name} = obj //会产生同名的冲突
console.log(name)

//为了解决这个冲突，使用重命名的方式
const name = 'tom'
const { name:objName} = obj ///会产生同名的冲突，obj的name属性必须要用name提取出来，为了解决这个冲突，使用重命名的方式:{name : objName}，objName是重命名的变量名
 console.log(objName)//zce

If you want to add the default value, just assign the equal sign directly

const name = 'tom'
const {name:objName = 'jack'} = obj
console.log(objName)//jack

Seven, ES2015 template string

Use template literals to define strings.

Add backquotes outside the string, if single quotation marks are needed inside the string, add backslashes to escape

const str = `hello es2015,this is a \`string\``
console.log(str)// hello es2015,this is a `string`

Line break in the string, while keeping the line break character /n

const str = `hello es2015,

this is a \`string\``
console.log(str)
/* 
hello es2015,

this is a \`string\`
*/

The template string supports embedding the corresponding value in the string through interpolation expressions

const name = 'tom'
const msg = `hey,${name} ----- ${1 + 2} ----${Math.random()}`//差值表达式内，还可以嵌入任何标准的JavaScript语句，语句的返回值最后会返回
console.log(msg)//hey,tom -----3 ----0.41110767462165887

Eight, tagged template string

const str = console.log`hello world`//console.log作为模板字符串标签，控制台打印了['hello world']

const name = 'tom'
const gender = true

function myTagFunc(strings){
    console.log(strings)
}
const result = myTagFunc`hey,${name} is a ${gender}` /*['hey,','is a','.'] 是模板字符串中内容分割过后的结果，在模板字符串当中可能会有嵌入的表达式，所以结果数组是按照表达式分割后静态的内容,除了这个数组以外*/

This function can also receive the return value of all expressions that appear in our template string

function myTagFunc(strings,name,gender){
    console.log(strings,name,gender)
}

const result = myTagFunc`hey,${name} is a ${gender}` //['hey,','is a','.'] tom true

function myTagFunc(strings,name,gender){
    return '123'
}

const result = myTagFunc`hey,${name} is a ${gender}` //123

function myTagFunc(strings,name,gender){
    return strings[0] +name +strings[1] +gender + strings[2]
}

const result = myTagFunc`hey,${name} is a ${gender}`// hey,tom is a true

The role of the label function is to process the template string

function myTagFunc(strings,name,gender){
    const sex = gender ?'man' : 'woman'
    return strings[0] +name +strings[1] +gender + strings[2]
}

See the next article for other remaining features