ES6新特性：变量的解构赋值

news2024/9/22 17:28:14

文章目录

1 数组的解构赋值
- 1.1 基本用法
- 1.2 交换变量的值
- 1.3 注意事项
2 对象的解构赋值
- 2.1 基本用法
- 2.2 属性重命名
- 2.3 注意事项

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

ES6的变量解构赋值是指通过解构的方式将数组或对象中的值赋值给变量。

1 数组的解构赋值

1.1 基本用法

数组的解构赋值可以通过以下语法实现：

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

在上述语法中，我们将数组 arr 中的值通过方括号的方式进行解构，并将值分别赋值给变量 a, b 和 c。

1.2 交换变量的值

let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

1.3 注意事项

变量与数组元素从左向右一一对应。

let arr = [1, 2, 3];
let [b, c] = arr;
console.log(b); // 1
console.log(c); // 2

当我们需要省略一些元素时，可以使用逗号来跳过这些元素

let arr = [1, 2, 3];
let [, b, c] = arr;
console.log(b); // 2
console.log(c); // 3

2 对象的解构赋值

2.1 基本用法

对象的解构赋值可以通过以下语法实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6新特性: 解构赋值</title>
</head>

<body>
    <script>
        let obj = {
            name: 'Alice',
            age: 20,
            func: function () {
                console.log(name + '今年' + age + '岁')
            }
        };
        let { name, age, func } = obj;
        console.log(name); // 'Alice'
        console.log(age); // 20
        console.log(func);
    </script>
</body>

</html>

在上述代码中，我们将对象 obj 中的属性通过花括号的方式进行解构，并将属性值分别赋值给变量 name 、 age和func。控制台输出如下：

在这里插入图片描述

2.2 属性重命名

我们也可以在对象解构赋值时，将属性进行重命名，语法格式为：成员名: 新名

在下面代码中，name: n 表示将 name 属性重命名为 n，age: a 表示将 age 属性重命名为 a。

示例：

let obj = {
    name: 'Alice',
    age: 20,
    func: function () {
        console.log(name + '今年' + age + '岁')
    }
};
let { name: n, age: a, func: f } = obj;
console.log(n); // 'Alice'
console.log(a); // 20
console.log(f);

得到同样的结果👇

在这里插入图片描述

2.3 注意事项

花括号内的变量名要与对象的成员变量或成员方法名称一致
花括号内的变量顺序可以任意
花括号内的变量数量可以少于对象的成员数量，但是当花括号内的变量调用了其他成员的时候，需要同时在花括号内包含调用的成员。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6新特性: 解构赋值</title>
</head>

<body>

    <script>
        let obj = {
            name: 'Alice',
            age: 20,
            func1: function () {
                console.log(name + '今年' + age + '岁')
            },
            func2: function () {
                console.log('我是func2')
            }
        };
        
        let { name, func1, age } = obj;
        func1();

        let { func2 } = obj;
        func2();
    </script>

</body>

</html>