ES6 (ECMAScript 6.0)
ECMAScript 6.0 (en lo sucesivo, ES6) es el estándar de próxima generación para el lenguaje JavaScript, que se lanzó oficialmente en junio de 2015. Su objetivo es hacer que el lenguaje JavaScript se pueda usar para escribir aplicaciones complejas a gran escala y convertirse en un lenguaje de desarrollo de nivel empresarial.
Relación entre ECMAScript y JavaScript
Para aclarar este tema, necesitamos repasar la historia. En noviembre de 1996, Netscape, el creador de JavaScript, decidió enviar JavaScript a la organización de estandarización ECMA, con la esperanza de que el lenguaje se convirtiera en un estándar internacional. Al año siguiente, ECMA lanzó la primera edición del Documento Estándar 262 (ECMA-262), que especificaba el estándar para el lenguaje de secuencias de comandos del navegador, y llamó a este lenguaje ECMAScript, que era la versión 1.0.
Por lo tanto, la relación entre ECMAScript y JavaScript es que el primero es una especificación del segundo y el segundo es una implementación del primero (otros dialectos de ECMAScript incluyen Jscript y ActionScript)
gramática básica
vamos a declarar variable
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
const declara constantes (variables de solo lectura)
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration
tarea de desestructuración
La desestructuración de la asignación es una extensión del operador de asignación.
Es una especie de comparación de patrones contra matrices u objetos, y luego asigna valores a las variables.
El código es conciso y fácil de leer, y la semántica es más clara; también facilita la adquisición de campos de datos en objetos complejos.
//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
//2、对象解构
let user = {
name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let {
name, age } = user//注意：结构的变量必须是user中的属性
console.log(name, age)
cadena de plantilla
La cadena de plantilla es equivalente a la versión mejorada de la cadena, con acentos graves `, además de usarse como una cadena normal, también se puede usar para definir una cadena de varias líneas, y también puede agregar variables y expresiones a la cuerda.
// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${
name},I am ${
age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${
f()}`
console.log(string2); // Game start,have fun!
Declaración de objetos abreviados
const age = 12
const name = "Amy"
// 传统
const person1 = {
age: age, name: name}
console.log(person1)
// ES6
const person2 = {
age, name}
console.log(person2) //{age: 12, name: "Amy"}
Definir método abreviado
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"
Operador de propagación de objetos
El operador de propagación (...) se utiliza para extraer todas las propiedades transitables del objeto de parámetro y copiarlas en el objeto actual.
// 1、拷贝对象
let person1 = {
name: "Amy", age: 15}
let someone = {
...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = {
age: 15}
let name = {
name: "Amy"}
let person2 = {
...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}
Funciones de flecha (las funciones de flecha se utilizan principalmente para la definición de funciones anónimas)
Las funciones de flecha proporcionan una forma más concisa de escribir funciones. La sintaxis básica es:
parámetros => cuerpo de la función
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b