Nuevas funciones de ECMAScript 1

Descripción del artículo: Este artículo son las notas y la experiencia del campo de entrenamiento frontal de Regao. Si hay alguna irregularidad, espero que pueda señalar y enseñar, gracias 

Uno, descripción general de ECMAScript

ECMAScript es también un lenguaje de scripting, generalmente abreviado como ES, que generalmente se considera como la especificación estandarizada de JavaScript.De hecho, JavaScript es un lenguaje extendido de ECMAScript. En ECMAScript solo se proporciona la sintaxis más básica. JavaScript implementa el estándar del lenguaje ECMAScript y se expande sobre esta base:

En el entorno web:

En el entorno de nodo: 

El lenguaje JavaScript en sí se refiere a ECMAScript. Desde 2015, ES ha mantenido una iteración de una versión por año.

Two, descripción general de ES2015

ES2015 también se llama ES6. Especificación estándar ECMAScript: http://www.ecma-international.org/ecma-262/6.0/   En comparación con ES5.1, los cambios son relativamente grandes

• Resolver algunos problemas o deficiencias con la gramática original.
• Mejora la gramática original
• Nuevos objetos, nuevos métodos, nuevas funciones.
• Nuevos tipos de datos y estructuras de datos

Tres, ES2015 let y alcance a nivel de bloque

• Alcance global
• Alcance de la función
• Alcance a nivel de bloque: el alcance envuelto por {} se convierte en un bloque

yarn add nodemon -dev Este comando instala nodemon, yarn nombre de archivo de nodemon Este comando se ejecuta automáticamente después de que el archivo es modificado y guardado

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

Situación de circulación:

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'

• Para obtener más detalles, lea el Capítulo 3, Sección 3 en "Programación avanzada de JavaScript Cuarta edición".

Cuatro, ES2015const

• const declara una constante o constante de solo lectura, que tiene más características de solo lectura que let, y no se permite modificarla después de la declaración

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

• La declaración y la cesión no se pueden colocar en dos declaraciones

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

• Al definir un objeto, la dirección de memoria del montón a la que se apunta no se puede modificar

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

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

Mejor uso: no use var, use const como el principal y coopere con let; todos usan const por defecto, y usan let para declarar valores que definitivamente necesitarán ser modificados.

V. Deconstrucción de matrices ES2015

• Use la desestructuración para obtener rápidamente los miembros especificados en la matriz

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

• Obtenga el miembro correspondiente a una ubicación

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

• Agregar tres puntos antes del nombre de la variable de la posición de deconstrucción significa extraer todos los miembros de la posición actual en adelante. El uso de tres puntos solo se puede utilizar en la última posición del miembro de deconstrucción

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

• El número de miembros en la posición deconstruida es menor que la longitud de la matriz deconstruida, y se extraerá de acuerdo con la posición de adelante hacia atrás, y los miembros adicionales no se extraerán

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

• Si el miembro en la posición de desestructuración es mayor que la longitud de la matriz, es el mismo que el subíndice que no existe en la matriz de acceso y no se puede acceder

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

• Si establece el valor predeterminado para el miembro extraído, asigne un signo igual después del nombre de la variable en la posición de desestructuración. Si el miembro de la matriz no se extrae, se convierte en el valor predeterminado

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

Seis, la deconstrucción del objeto

Utilice una estructura que coincida con el objeto para implementar la asignación de atributos del objeto.

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

• Las otras características de los objetos deconstruidos son exactamente las mismas que las matrices deconstruidas.

• Si hay miembros con el mismo nombre en el ámbito actual, habrá un conflicto. Para resolver este conflicto, utilice el método de cambio de nombre.

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

• Si desea agregar el valor predeterminado, simplemente asigne el signo igual directamente

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

Siete, cadena de plantilla ES2015

Utilice literales de plantilla para definir cadenas.

• Agregue comillas inversas fuera de la cadena, si se necesitan comillas simples dentro de la cadena, agregue barras invertidas para escapar

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

• Salto de línea en la cadena, manteniendo el carácter de salto de línea / n

const str = `hello es2015,

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

this is a \`string\`
*/

• La cadena de plantilla admite la incrustación del valor correspondiente en la cadena a través de expresiones de interpolación

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

 Ocho, cadena de plantilla etiquetada

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','.'] 是模板字符串中内容分割过后的结果，在模板字符串当中可能会有嵌入的表达式，所以结果数组是按照表达式分割后静态的内容,除了这个数组以外*/

Esta función también puede recibir el valor de retorno de todas las expresiones que aparecen en nuestra cadena de plantilla

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

El papel de la función de etiqueta es procesar la cadena de la plantilla

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

Consulte el siguiente artículo para conocer otras características restantes.