1. Desestruturação e atribuição de arrays
ES6 permite extrair valores de arrays e objetos e atribuir valores a variáveis de acordo com determinados padrões, o que é chamado de desestruturação.
1. Uso básico
Após a "correspondência de padrões", a atribuição será concluída se o valor do índice for o mesmo
// 为变量赋值，只能直接指定值。
let a = 1
let b = 2
let c = 3
// 解构赋值：从数组中提取值，按照对应位置，对变量赋值。
let [a, b, c] = [1, 2, 3]
let [foo, [[bar], baz]] = [1, [[2], 3]]
foo // 1
bar // 2
baz // 3
let [ , , third] = ['foo', 'bar', 'baz']
third // 'baz'
let [x, , y] = [1, 2, 3]
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4]
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a']
x // 'a'
y // undefined
z // []
2.Valor padrão
(1) Uso básico de valores padrão
const [a, b] = []
console.log(a, b) // undefined undefined
const [a = 1, b = 2] = []
console.log(a, b) // 1 2
(2) Condições efetivas para valores padrão
ES6 usa o operador de igualdade estrita (===) internamente para determinar se uma posição tem um valor. Portanto, o valor padrão só terá efeito se um membro da matriz for estritamente igual a indefinido.
const [a = 1, b = 2] = [3, 0] // 3 0
const [a = 1, b = 2] = [3, null] // 3 null
const [a = 1, b = 2] = [3] // 3 2
const [x = 1] = [undefined] // 1
const [x = 1] = [null] // null
(3)Expressão de valor padrão
Se o valor padrão for uma expressão, então a expressão será avaliada preguiçosamente, ou seja, só será avaliada quando for utilizada.
// x 能取到值，所以函数 f 根本不会执行
function f() {
console.log('aaa')
}
let [x = f()] = [1]
(4) Referência de valor padrão
O valor padrão pode referir-se a outras variáveis atribuídas pela desestruturação, mas a variável deve ter sido declarada.
let [x = 1, y = x] = [] // 1 1
let [x = 1, y = x] = [2] // 2 2
let [x = 1, y = x] = [1, 2] // 1 2
let [x = y, y = 1] = [] // ReferenceError: Cannot access 'y' before initialization （x 用 y 做默认值时，y 还没有声明）
3. Aplicação de desestruturação e atribuição de array
(1) Argumentos de objetos semelhantes a array
function func() {
const [a, b] = arguments
console.log(a, b) // 1 2
}
func(1, 2)
(2)NodeList
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NodeList</title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
const [p1, p2, p3] = document.querySelectorAll('p')
console.log(p1, p2, p3)
/*
<p>1</p>
<p>2</p>
<p>3</p>
*/
</script>
</body>
</html>
(3) Desestruturação da atribuição de parâmetros de função
const array = [1, 1]
// const add = arr => arr[0] + arr[1]
const add = ([x = 0, y = 0]) => x + y
console.log(add(array)) // 2
console.log(add([])) // 0
[[1, 2], [3, 4]].map(([a, b]) => a + b)
// [ 3, 7 ]
(4) Trocar o valor da variável
let x = 2, y = 1
// 原来
let tmp = x
x = y
y = tmp
// 现在
[x, y] = [y, x] // [x, y] = [1, 2]
console.log(x, y) // 1 2
(5) Pule um determinado valor e separe-o com vírgulas
Ao desestruturar um array, você pode ignorar valores que não precisam ser desestruturados. Você pode usar vírgulas para ignorar o array desestruturado, de modo que não precise declarar mais variáveis para armazenar valores:
var [a, , , b] = [10, 20, 30, 40]
console.log(a) // 10
console.log(b) // 40
(6) Use nos parâmetros restantes
Normalmente, precisamos tratar os itens restantes da matriz como uma matriz separada. Neste momento, podemos usar a sintaxe de expansão para tratar os valores da matriz restante como uma matriz separada, como segue:
var [a, b, ...rest] = [10, 20, 30, 40, 50]
console.log(a) // 10
console.log(b) // 20
console.log(rest) // [30, 40, 50]
Não pode haver vírgula após o descanso, caso contrário, um erro será relatado e o programa reconhecerá que existe um valor depois de você. ...rest é a desestruturação dos parâmetros restantes, portanto só pode ser colocado no final do array. Não pode haver nenhuma variável depois dele, caso contrário será reportado um erro.
2. Desestruturação e atribuição de objetos
1. Uso básico
A desestruturação de objetos é basicamente semelhante à de arrays. As variáveis de desestruturação de objetos são definidas em {}.
Após a "correspondência de padrões", a atribuição de atributos com o mesmo nome é concluída.
// 对象没有索引，但对象有更明确的键，通过键可以很方便地去对象中取值
let {
foo, bar } = {
foo: 'aaa', bar: 'bbb' }
foo // 'aaa'
bar // 'bbb'
let {
bar, foo, baz } = {
foo: 'aaa', bar: 'bbb' }
foo // 'aaa'
bar // 'bbb'
baz // undefined
Se o nome da variável for inconsistente com o nome do atributo, ele deverá ser escrito da seguinte forma.
// foo 是匹配的模式，baz 才是变量。真正被赋值的是变量 baz，而不是模式 foo。
let {
foo: baz } = {
foo: 'aaa', bar: 'bbb' }
baz // 'aaa'
foo // error: foo is not defined
2.Valor padrão
A condição para que o valor padrão tenha efeito é que o valor da propriedade do objeto seja estritamente igual a indefinido.
Se o valor padrão for uma expressão, a expressão do valor padrão será avaliada lentamente.
var {
a = 10, b = 5 } = {
a: 3 } // a = 3, b = 5
var {
a = 10, b = 5 } = {
a: 3, b: undefined } // a = 3, b = 5
var {
a = 10, b = 5 } = {
a: 3, b: null } // a = 3, b = null
3. Aplicação de desestruturação e atribuição de objetos
(1) Objeto como parâmetro de função
// 之前
const logPersonInfo = user => console.log(user.name, user.age)
logPersonInfo({
name: 'jerry', age: 18 }) // jerry 18
// 之后
const logPersonInfo = ({
age = 21, name = 'tom' }) => console.log(name, age);
logPersonInfo({
name: 'jerry', age: 18}) // jerry 18
logPersonInfo({
}) // tom 21
(2) Retornar vários valores de uma função
// 返回一个数组
function example() {
return [1, 2, 3]
}
let [a, b, c] = example()
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
}
}
let {
foo, bar } = example()
(3) Aninhamento complexo (múltiplas atribuições de desestruturação)
let obj = {
p: [
'Hello',
{
y: 'World' }
]
}
// 这时 p 是模式，不是变量，因此不会被赋值。
let {
p: [x, {
y }] } = obj
x // 'Hello'
y // 'World'
// p 作为变量赋值
let {
p, p: [x, {
y }] } = obj
x // 'Hello'
y // 'World'
p // ['Hello', {y: 'World'}]
const node = {
loc: {
start: {
line: 1,
column: 5
}
}
}
// 三次解构赋值，分别是对 loc、start、line 三个属性的解构赋值。
// 注意，最后一次对 line 属性的解构赋值之中，只有 line 是变量，loc 和 start 都是模式，不是变量.
let {
loc, loc: {
start }, loc: {
start: {
line }} } = node
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
(4) Use nos parâmetros restantes
Os demais parâmetros também podem ser utilizados na desestruturação do objeto.Os demais atributos do objeto que não são desconstruídos são agregados para gerar um novo objeto.
const {
a, c, ...rest } = {
a: 1, b: 2, c: 3, d: 4 }
console.log(a) // 1
console.log(c) // 3
console.log(rest) // { b: 2, d: 4 }
4. Pontos a serem observados
(1) Se você quiser usar uma variável declarada para desestruturar atribuição, você deve ter muito cuidado.
// 错误的写法
let x
{
x } = {
x: 1 }
// SyntaxError: syntax error
O código acima reportará um erro porque o mecanismo JavaScript entenderá {x} como um bloco de código, resultando em um erro de sintaxe. Este problema só pode ser resolvido não escrevendo a chave no início da linha para evitar que o JavaScript a interprete como um bloco de código.
// 正确的写法
let x
({
x } = {
x: 1 })
O código acima coloca toda a instrução de atribuição de desestruturação entre parênteses e pode ser executada corretamente.
(2) A atribuição de desestruturação não permite que nenhum nome de variável seja colocado no padrão no lado esquerdo do sinal de igual. Portanto, você pode escrever expressões de atribuição muito estranhas.
({
} = [true, false])
({
} = 'abc')
({
} = [])
Embora a expressão acima não tenha sentido, a sintaxe é legal e pode ser executada.
(3) Como os arrays são essencialmente objetos especiais, os atributos dos objetos dos arrays podem ser desconstruídos.
let arr = [1, 2, 3]
let {
0 : first, [arr.length - 1] : last } = arr
first // 1
last // 3
O código acima realiza a desestruturação de objetos no array. O valor correspondente da chave 0 da matriz arr é 1, [arr.length - 1] é a chave 2 e o valor correspondente é 3.
3. Desestruturação e atribuição de strings
Strings também podem ser desestruturadas e atribuídas. Você pode desestruturar e atribuir valores na forma de arrays ou na forma de objetos.
// 数组形式解构赋值
const [a, b, , , c] = 'hello'
console.log(a, b, c) // h e o
// 对象形式解构赋值
// 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
const {
0: a, 1: b, 4: o, length : len } = 'hello'
console.log(a, b, o, len) // h e o 5
4. Atribuição de desestruturação de valores numéricos e booleanos
A desestruturação e atribuição só podem ser feitas na forma de objetos. (Primeiro converta automaticamente o valor do lado direito do sinal de igual em um objeto)
// 转化后的对象里没有任何的属性（没有 123 这个属性，也没有 true 这个属性）和方法，
// 所有的属性和方法都在它的继承 __proto__ 中，比如 toString 方法就是继承来的。
new Number(123)
new Boolean(true)
// 里面的值只能是默认值，继承的方法倒是可以取到
const {
a = 1, toString: s } = 123
console.log(a, s) // 1 [Function: toString]
// 里面的值只能是默认值，继承的方法倒是可以取到
const {
b = 1, toString } = true;
console.log(b, toString) // 1 [Function: toString]
5. Não há atribuição de desestruturação para indefinido e nulo
A regra da atribuição de desestruturação é que, desde que o valor no lado direito do sinal de igual não seja um objeto ou matriz, converta-o primeiro em um objeto. Como indefinido e nulo não podem ser convertidos em objetos, desestruturar e atribuí-los resultará em erro.
let {
prop: x } = undefined // TypeError
let {
prop: y } = null // TypeError