Directorio de artículos
Introducción
ECMAScript 6.0 (en lo sucesivo, ES6) es el estándar de próxima generación del lenguaje JavaScript, lanzado oficialmente en junio de 2015. Su objetivo es hacer que el lenguaje JavaScript se pueda utilizar para escribir aplicaciones complejas a gran escala y convertirse en un lenguaje de desarrollo de nivel empresarial.
Hoy explicaremos las nuevas características de sintaxis introducidas en ES6.
La relación entre ECMAScript y JavaScript
En noviembre de 1996, Netscape, el creador de JavaScript, decidió enviar JavaScript a ECMA, la Organización Internacional de Normalización.
En 1997, ECMA emitió el documento estándar 262 ECMAScript 1.0.
La relación entre ECMAScript y JavaScript es que el primero es la especificación del segundo y el segundo es una implementación del primero.
Veamos el historial de versiones de ECMAScript:
Desde el lanzamiento de ES2015, es decir, ES6 en 2015, ECMAScript se ha lanzado a ES2020 a una tasa de lanzamiento de una versión por año.
En artículos posteriores explicaremos las nuevas características de estas nuevas versiones de ECMAScript.
dejar y const
ES6 introdujo let y const para resolver los diversos problemas de variables var antes.
Antes de ES6, el alcance de las variables en JS tenía dos tipos: alcance global y alcance de función.
El alcance global es bien entendido.Cuando comenzamos a escribir JavaScript en la consola del navegador o en el terminal interactivo Node.js, ingresamos al llamado alcance global.
Se puede acceder a las variables del ámbito global en cualquier otro ámbito.
El alcance de la función es la variable definida dentro de la función, a la que se puede acceder dentro de la función.
Hay algunos problemas con estos dos ámbitos:
- Promoción variable
El comando var tendrá el fenómeno de "promoción de variables", es decir, la variable se puede usar antes de la declaración y el valor no está definido.
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
- Cobertura variable
Cuando usamos variables globales en el alcance de la función, si se define una variable con el mismo nombre en el alcance de la función, sin importar dónde esté definida, la variable global se sobrescribirá. Como sigue:
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = "hello world";
} }
f(); // undefined
- Divulgación variable
La divulgación de variables significa que solo queríamos usar las variables en un alcance pequeño, pero el resultado se filtró fuera del alcance, como se muestra a continuación:
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5
~~
为了解决上面两个问题，ES6引入了let和const。
这两个都是块级作用域。不同的是const定义的变量初始化之后就不能变化了。
什么是块级作用域呢？类似于 if、switch 条件选择或者 for、while 这样的循环体即是所谓的块级作用域,或者更简单一点使用大括号括起来的就叫做块级作用域。
块级作用域的最大好处就是不会产生作用域提升，如下所示：
~~~js
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
Cesión de desestructuración
¿Qué es la asignación de desestructuración?
ES6 le permite extraer valores de matrices y objetos y asignar valores a variables de acuerdo con un patrón determinado, que se denomina desestructuración.
Como sigue:
let [a, b, c] = [1, 2, 3];
let [ , , third] = ["foo", "bar", "baz"];
let [x, , y] = [1, 2, 3];
let [head, ...tail] = [1, 2, 3, 4];
let [x, y] = [1, 2, 3];
La asignación de desestructuración también puede establecer valores predeterminados. Veamos los siguientes ejemplos:
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a'];
// x='a', y='b'
let [x, y = 'b'] = ['a', undefined];
// x='a', y='b’
let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null
Si el valor predeterminado de desestructuración es una función, entonces se puede activar la asignación diferida:
function f() {
console.log('aaa');
}
let [x = f()] = [1];
En el ejemplo anterior, la función f no se ejecutará.
Además de las variables de estructura, también puede estructurar objetos:
let {
bar, foo } = {
foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let {
baz } = {
foo: "aaa", bar: "bbb" };
baz // undefined
var {
foo: baz } = {
foo: 'aaa', bar: 'bbb' };
baz // "aaa"
let obj = {
first: 'hello', last: 'world' };
let {
first: f, last: l } = obj;
f // 'hello'
l // 'world'
La desestructuración también admite estructuras anidadas:
let obj = {
p: [ 'Hello', {
y: 'World' } ] };
let {
p: [x, {
y }] } = obj;
x // "Hello"
y // "World"
La asignación de estructura tiene dos funciones muy importantes.
El primero es intercambiar variables:
let x = 1;
let y = 2;
[x, y] = [y, x];
Ya no podemos usar variables intermedias e interactuar directamente con los valores de las dos variables.
El segundo rol es devolver múltiples valores de la función:
// 返回一个数组
function example() {
return [1, 2, 3]; }
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1, bar: 2 }; }
let {
foo, bar } = example();
//提取JSON数据
let jsonData = {
id: 42, status: "OK", data: [867, 5309] };
let {
id, status, data: number } = jsonData;
Expansión de matriz
El método Array.from en ES6 se utiliza para convertir los siguientes dos tipos de objetos en matrices reales:
- Objeto similar a una matriz
- Objetos iterables (incluidas las nuevas estructuras de datos Set y Map de ES6).
¿Qué es un objeto similar a una matriz?
Los denominados objetos tipo matriz tienen solo una característica esencial, es decir, deben tener un atributo de longitud. Por lo tanto, cualquier objeto con una propiedad de longitud se puede convertir en una matriz mediante el método Array.from.
Las siguientes variables son variables en forma de matriz:
let arrayLike = {
'0': 'a', '1': 'b', '2': 'c', length: 3 };
¿Cómo convertir este objeto similar a una matriz en una matriz?
// ES5的写法
var arr1 = [].slice.call(arrayLike);
// ['a', 'b', 'c']
// ES6的写法 let arr2 = Array.from(arrayLike);
// ['a', 'b', 'c']
Veamos los escenarios de uso habituales:
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p); });
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
¿Qué es un objeto transitable?
Siempre que sea una estructura de datos implementada con la interfaz Iterator, se denomina objeto atravesable.
Veamos el siguiente ejemplo:
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
Al mismo tiempo, también se introduce el operador de propagación (...). A través del operador de propagación, también se puede convertir fácilmente en un objeto de matriz:
function foo() {
var args = [...arguments]; } // arguments对象
[...document.querySelectorAll('div')] // NodeList对象
El método Array.from también puede recibir un segundo parámetro para operar en los elementos de la matriz:
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
El método Array.of puede crear fácilmente una nueva matriz:
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Extensión de función
ES6, puede admitir el valor predeterminado de la función:
function log(x, y = 'World') {
console.log(x, y); }
function Point(x = 0, y = 0) {
this.x = x; this.y = y; }
El valor predeterminado de la función se puede combinar con el valor predeterminado de la asignación de desestructuración:
function foo({
x, y = 5}) {
console.log(x, y); }
foo({
}) // undefined, 5
foo({
x: 1}) // 1, 5
foo({
x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined
A continuación, veamos un ejemplo complejo:
// 写法一
function m1({
x = 0, y = 0} = {
})
{
return [x, y]; }
// 写法二
function m2({
x, y} = {
x: 0, y: 0 })
{
return [x, y]; }
Echemos un vistazo, ¿cuál es la diferencia entre los dos métodos de escritura anteriores?
Cuando la función no tiene parámetros:
m1() // [0, 0]
m2() // [0, 0]
Cuando tanto x como y tienen valores:
m1({
x: 3, y: 8}) // [3, 8]
m2({
x: 3, y: 8}) // [3, 8]
Cuando x tiene un valor, y no tiene valor:
m1({
x: 3}) // [3, 0]
m2({
x: 3}) // [3, undefined]
Cuando tanto x como y no tienen valor:
m1({
}) // [0, 0];
m2({
}) // [undefined, undefined]
m1({
z: 3}) // [0, 0]
m2({
z: 3}) // [undefined, undefined]
¿Ves la diferencia? La asignación de desestructuración de m1 tiene un valor predeterminado de 0 para x e y. La asignación de desestructuración de m2 no tiene un valor predeterminado para x e y.
Autor: programa flydean esas cosas
Enlace a este artículo: http://www.flydean.com/ecmascript-6-startup/
Fuente de este artículo: blog de flydean
Bienvenido a prestar atención a mi cuenta oficial: la interpretación más popular de "programas", los productos secos más profundos, los tutoriales más concisos y muchos consejos que no conoces ¡te esperan para descubrir!