Introdução à tarefa de desestruturação de JavaScript
A atribuição de desestruturação JavaScript é uma sintaxe que simplifica a atribuição de variáveis, permitindo que os dados sejam extraídos de um array ou objeto e atribuídos a uma variável. 【https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment】
1. Desestruturação e atribuição de array
let numbers = [1, 2, 3];
let [a, b, c] = numbers;
console.log(b); // 输出: 2
console.log(a, b, c); // 输出: 1 2 3
2. Desestruturação e atribuição de objetos
let person = {
name: 'Alice',
age: 25,
gender: 'female'
};
let { name, age, gender } = person;
console.log(name, age, gender); // 输出: Alice 25 female
3. Ao desestruturar e atribuir valores, você também pode definir valores padrão para variáveis. Você pode lidar com variáveis inexistentes especificando valores padrão.
let arr = [1, 2];
let [x, y, z = 3] = arr;
console.log(x, y, z); // 输出: 1 2 3
4. A atribuição de desestruturação do JavaScript pode ser usada não apenas para arrays e objetos simples, mas também para desestruturar estruturas aninhadas, parâmetros de função e valores de retorno.
☆ Atribuição de desestruturação de estruturas aninhadas:
let nestedObj = {
outer: {
inner: {
value: 42
}
}
};
let { outer: { inner: { value } } } = nestedObj;
console.log(value); // 输出 42
☆ Desestruturação da atribuição de parâmetros de função:
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
greet({ name: "Alice", age: 30 }); // 输出 "Hello, my name is Alice and I am 30 years old."
☆ Desestruturação da atribuição do valor de retorno da função:
function getFullName({ firstName, lastName }) {
return {
fullName: `${firstName} ${lastName}`
};
}
const { fullName } = getFullName({ firstName: "John", lastName: "Doe" });
console.log(fullName); // 输出 "John Doe"