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

    文章目录

    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

    • 1
    • 2
    • 3
    • 4
    • 5

    在上述语法中，我们将数组 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
    • 2
    • 3
    • 4
    • 5

    1.3 注意事项

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

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

      • 1
      • 2
      • 3
      • 4

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

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

      • 1
      • 2
      • 3
      • 4

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在上述代码中，我们将对象 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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    得到同样的结果👇

    在这里插入图片描述

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    输出：

    Alice今年20岁
我是func2

    • 1
    • 2

    点击此处，获取关于ES6变量解构赋值的更多内容。

  • 相关阅读:
    ZedGraph设置刻度轴的颜色、刻度文本颜色以及网格线的颜色
    [Redis]——Redis持久化的两种方式RDB、AOF
    03 【Sass语法介绍-嵌套】
    力扣题解（ 最长递增子序列的个数）
    Java入门第112课——使用Iterator的hasNext方法、next方法遍历集合
    【无标题】
    Flume笔记
    【建立单链表：头插法，尾插法；循环列表，带尾指针的循环链表合并（将Tb合并在Ta之后）】
    怎样使用浏览器静默打印网页
    携创教育：学位证和毕业证有什么区别？自考怎么申请学位证？
  • 原文地址：https://blog.csdn.net/weixin_46098577/article/details/134069676