ES6 aprendiendo dos (parámetros de descanso de funciones y operadores de extensión)

Parámetros de descanso de función y operador de propagación

En el último artículo, aprendí las variables de ES6 y las asignaciones de deconstrucción de variables. Esta vez aprendí algunos métodos de extensión de ES6.
Los parámetros de reposo de funciones y los operadores de propagación se ven similares y son fáciles de confundir, así que primero aprendámoslos juntos.

1. Formulario

En primer lugar, tanto los parámetros de descanso como las formas de operador (spread) de dispersión de matriz u objeto ...变量名.

---

2. parámetros de descanso

函数La extensión a la que pertenece el parámetro rest声明 se usa para obtener parámetros de función inciertos cuando está en una función (de hecho, también se puede usar en la asignación de deconstrucción de variables 声明).

2.1 Reemplazando el objeto de argumentos

Si solo hay un parámetro de descanso cuando se declara la función, entonces este parámetro puede reemplazar argumentsel objeto.

// arguments变量的写法
function sortNumbers() {
    
    
  return Array.from(arguments).sort();
}
const res1 = sortNumbers(2,4,3,12,1)
console.log(res1); // [ 1, 12, 2, 3, 4 ]

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
const res1 = sortNumbers(2,4,3,12,1)
console.log(res1); // [ 1, 12, 2, 3, 4 ]

La diferencia entre los parámetros de descanso y argumentslos objetos:

1. argumentsEl objeto es un objeto similar a una matriz, y el método de la matriz no se puede usar directamente. La variable que coincide con el resto del parámetro es una matriz real, es decir, el método de la matriz se puede usar directamente.
2. El atributo de longitud de la función incluye argumentsel objeto, pero no incluye el resto del parámetro

function aoo(a) {
    
     }
function boo(arguments) {
    
     }
function coo(...arg) {
    
     }
function doo(frist, ...arg) {
    
     }

console.log(aoo.length); // 1
console.log(boo.length); // 1
console.log(coo.length); // 0
console.log(doo.length); // 1

---

2.2 Resto de parámetros

Si algunos parámetros se pueden determinar cuando se declara la función, pero el resto no se puede determinar, entonces los parámetros inciertos restantes se colocarán en la matriz de parámetros restantes .

function foo(frist, ...arg) {
    
    
  arg.push(frist)
  return arg
}

const foo1 = foo(1, 2, 3, 4)
const foo2 = foo('a', 'b', 1, 2, 3, 4)

console.log(foo1); // [ 2, 3, 4, 1 ]
console.log(foo2); // [ 'b', 1, 2, 3, 4, 'a' ]

---

2.3 Declaración de variables en la desestructuración de la asignación de variables

En la asignación de desestructuración de variables, si no estamos seguros de qué variables se pueden desestructurar, también podemos usar el parámetro rest .
En este momento, el resto no es necesariamente una matriz, se determinará según el tipo de deconstrucción.
(Este párrafo en el documento se cuenta en 扩展运算符)

const arr = [0, 1, 2, 3]
const [a1, ...restArr] = arr
console.log(restArr); // [ 1, 2, 3 ]

const obj= {
    
     b1: 1, b2: 2, b3: 3 }
const {
    
     b1, ...restObj } = obj
console.log(restObj); // { b2: 2, b3: 3 }

// 函数参数的解构赋值和rest参数
function foo({
     
      c, ...rest }) {
    
    
  return rest
}

const res = foo({
    
     a:1, b:2, c:5, d:4})
console.log(res); // { a: 1, b: 2, d: 4 }

---

2.4 Solo se puede utilizar como último parámetro

El parámetro rest representa los parámetros restantes, por lo que solo se puede colocar al final, de lo contrario, se informará un error al usarlo.

function foo( ...arg, last) {
    
    
  arg.push(last)
  return arg
}
foo(1, 2, 3, 4) // SyntaxError: Rest parameter must be last formal parameter

const arr = [0, 1, 2, 3]
const [...pre, last] = arr // SyntaxError: Rest element must be last element

---

3. Operador de propagación

El operador de propagación es una extensión de 数组o 对象. Es como la operación inversa del parámetro rest , convirtiendo una matriz u objeto en una secuencia de parámetros separados por comas. Se utiliza principalmente en funciones 调用o variables . Tenga en cuenta que, como se puede ver en lo anterior, el resto representa una colección y el operador de extensión representa una secuencia, por lo que puse el contenido en el lado izquierdo del signo igual de la asignación deconstruida para descansar.使用

3.1 Parámetros de entrada de la función de serialización

El operador de propagación puede dividir una matriz en una secuencia separada por comas

const arr = [1, 2, 5]

function foo(a,b,c) {
    
    
  console.log(a);
  console.log(b);
  console.log(c);
}

foo(arr)
// [ 1, 2, 5 ]
// undefined
// undefined

foo(...arr)
// 1
// 2
// 5

aplicar método para funciones alternativas

Por ejemplo Math.max(), los parámetros están separados por comas uno por uno. En este momento, si desea comparar el tamaño de una matriz, debe usar el método de aplicación para ayudar, pero el operador de propagación puede serializar la matriz, que es equivalente usar directamenteMath.max()

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

---

3.2 Copiar matrices u objetos (copia superficial)

Las matrices u objetos son datos de tipo de referencia. La copia directa solo copia el puntero a la estructura de datos subyacente. La modificación de la variable copiada seguirá afectando a la variable original.
El operador de extensión proporciona una forma conveniente de copiar una matriz o un objeto para lograr una copia superficial

const arr = [1, 2, 3]
const arr1 = arr
const arr2 = [...arr]

arr1.push(4)
arr2.push(5)

console.log(arr); // [ 1, 2, 3, 4 ]
console.log(arr1); // [ 1, 2, 3, 4 ]
console.log(arr2); // [ 1, 2, 3, 5 ]

// 多层级的引用类型数据，修改复制变量仍然会影响原变量
const arr3 = [[1, 2]]
const arr4 = [...arr3]
arr4.push(6)
arr4[0].push(7)
console.log(arr3); // [ [ 1, 2, 7 ] ]
console.log(arr4); // [ [ 1, 2, 7 ], 6 ]

---

3.3 Combinar matrices u objetos

El operador de propagación proporciona una nueva forma de combinar matrices u objetos.

// 合并数组
const arr1 = [1, 3, 4]
const arr2 = [2, 5, 6]

// ES5 的写法
const mergeArr1 = arr1.concat(arr2)

// ES5 的写法
const mergeArr2 = [...arr1, ...arr2]

console.log(mergeArr1); // [ 1, 3, 4, 2, 5, 6 ]
console.log(mergeArr2); // [ 1, 3, 4, 2, 5, 6 ]

// 合并对象
const obj1 = {
    
     a: 1, b: 2 }
const obj2 = {
    
     c: 3, d: 4 }

// ES5 的写法
let mergeObj1 = {
    
    }
for (const key in obj1) {
    
    
  mergeObj1[key] = obj1[key]
}
for (const key in obj2) {
    
    
  mergeObj1[key] = obj2[key]
}

// ES5 的写法
const mergeObj2 = {
    
     ...obj1, ...obj2 }

console.log(mergeObj1); // { a: 1, b: 2, c: 3, d: 4 }
console.log(mergeObj2); // { a: 1, b: 2, c: 3, d: 4 }

3.4 Convertir cadena en matriz

El operador de propagación también puede convertir cadenas en matrices reales.

[...'hello']
// [ "h", "e", "l", "l", "o" ]

El operador de propagación reconoce correctamente los caracteres Unicode de cuatro bytes.

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

En la primera forma de escribir el código anterior, JavaScript reconocerá los caracteres Unicode de cuatro bytes como dos caracteres, y no existe ese problema cuando se utiliza el operador de extensión.
Nota: Cualquier función que implique manipular caracteres Unicode de cuatro bytes tiene este problema. Por lo tanto, es mejor reescribirlos todos con el operador de propagación.

3.5 Objetos que implementan la interfaz Iterator

(Aún no iterador)
TODO...

3.6 Estructura de mapas y conjuntos, función de generador

(Aún no generador)
TODO...