es6 基础学习之变量的解构赋值

有问题请咨询gpt2023-10-09 7:05

在 ES6 中，变量的解构赋值（Destructuring Assignment）是一种非常有用的特性，它使得从数组或对象中提取数据并赋值给变量变得更加方便。下面我将介绍数组解构和对象解构的基础用法。

数组解构

基本形式：

javascript 复制代码

const [a, b] = [1, 2];
console.log(a); // 输出 1
console.log(b); // 输出 2

可以跳过某些元素：

javascript 复制代码

const [a, , c] = [1, 2, 3];
console.log(a); // 输出 1
console.log(c); // 输出 3

使用剩余元素（Rest Element）：

javascript 复制代码

const [a, ...rest] = [1, 2, 3, 4];
console.log(a);    // 输出 1
console.log(rest); // 输出 [2, 3, 4]

对象解构

基本形式：

javascript 复制代码

const { x, y } = { x: 1, y: 2 };
console.log(x); // 输出 1
console.log(y); // 输出 2

使用不同的变量名：

javascript 复制代码

const { x: a, y: b } = { x: 1, y: 2 };
console.log(a); // 输出 1
console.log(b); // 输出 2

使用默认值：

javascript 复制代码

const { x, y = 3 } = { x: 1 };
console.log(x); // 输出 1
console.log(y); // 输出 3

嵌套解构：

javascript 复制代码

const { p: { x, y } } = { p: { x: 1, y: 2 } };
console.log(x); // 输出 1
console.log(y); // 输出 2

混合解构

你也可以在一个解构表达式中同时使用数组和对象解构。

javascript 复制代码

const { p: [x, y] } = { p: [1, 2] };
console.log(x); // 输出 1
console.log(y); // 输出 2

函数参数的解构赋值

函数参数也可以使用解构赋值。

javascript 复制代码

function greet({ name = 'John', age }) {
  console.log(`Hello ${name}, you are ${age} years old.`);
}

greet({ age: 30 }); // 输出 "Hello John, you are 30 years old."

解构赋值是 ES6 中一个非常强大的特性，它可以极大地简化代码和提高可读性。以上只是一些基础用法，实际应用中可能会有更多高级和复杂的用法。