一文彻底理解 JavaScript 解构赋值

anyup_前端梦工厂2024-10-27 19:27

一、基本概念

为什么需要解构呢，先来看一个例子：

const student = {
    name: 'ZhangSan',
    age: 18,
    scores: {
        math: 19,
        english: 85,
        chinese: 100
    }
};

function displayInfo(student) {
    console.log('name:', student.name);
    console.log('math:', student.scores.math);
    console.log('english:', student.scores.english);
    console.log('chinese:', student.scores.chinese);
}

displayInfo(student);

这样写也能实现预期效果，但是代码看起来比较冗余。并且，如果对象内部嵌套较深时，那么对象的访问链就会变得很长。虽然这并不是什么大问题，但是使用解构赋值会让代码变得更简单和易读。

下面就来看看什么是解构赋值。MDN 中对解构赋值的描述：

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性值从对象/数组中取出,赋值给其他变量。

实际上，结构赋值就是将复杂的结构分解为简单的部分。解构赋值语法可以用于变量声明或者变量赋值。除此之外，还可以使用嵌套的解构赋值语法来处理嵌套结构。

比如，对上面例子中的对象进行解构：

function displayInfo(student) {
  const { name, scores: {math, english, chinese} } = student; 
    console.log('name:', name);
    console.log('math:', math);
    console.log('english:', english);
    console.log('chinese:', chinese);
}

这样看起来是不是简洁多了。

二、解构分类

根据 MDN 对解构赋值的定义，我们可以将解构赋值分为两大类：

  • 对象解构

  • 数组解构

下面就分别来看看这两种解构赋值。

1. 对象的解构赋值

对象解构又称为对象属性分配模式，它允许我们将对象的属性值分配给相应的变量。它有两种写法：

let obj =  {x: 1, y: 2, z: 3};

let {x: a, y: b, z: c} = obj;
console.log(a, b, c)

let {x, y, z} = obj;
console.log(x, y, z)

  • 第一种（第 3 行）是对象解构的完整形式，对象的每个属性都将被分配一个变量，其中冒号前面的是源对象中的属性，冒号后面的是要赋值属性;

  • 第二种（第 5 行）是对象解构的简写形式，对象的属性与要分配的属性一致时可以使用这种形式。

如果需要给已有变量赋值，就需要额外注意了：

let obj =  {x: 1, y: 2, z: 3};

let x = 0, y = 0, z = 0;

({x, y, z} = obj)
console.log(x, y, z)

这里需要注意，需要将赋值表达式使用括号括起来，如果省略，解构对象将被视为一个块语句，而块语句是不能放在赋值表达式左侧的。

当使用解构赋值时，可以给变量传递一个默认值：

const person = {
    name: 'ZhangSan',
    height: 180
};

const { name, height, age = 25 } = person;

console.log(name, height, age);

这里我们给 age 分配了一个默认值，当对源对象上不存在 age 属性时，age 就会被赋上默认值 25，而不是 undefined。

如果分配的对象属性为 undefined，那么就会使用默认值：

const {x = 2} = {x: undefined};
console.log(x);    // 2

2. 数组的解构赋值

在使用数组解构时，实际上会使用迭代器将所需要的值与结构源分开。因此，我们可以对可迭代值使用数组结构，包括字符串、数组、集合、函数映射、DOM 元素。我们还可以将解构赋值与扩展运算符结合使用。

（1）字符串
let message = 'Hello';
let [a, b] = message;
let [x, y, ...z] = message;

console.log(a, b);        // H e
console.log(x, y, z);     // H e ['l', 'l', 'o']
（2）数组
let numbers = [1, 2, 3];
let [x, y, z] = numbers;

console.log(x, y, z);    // 1 2 3
（3）集合
let set = new Set().add('foo').add('bar');
let [a, b] = set;

console.log(a, b);      // foo bar
（4）Map
let map = new Map().set('a', 1).set('b', 2);
let [x, y] = map;

console.log(x, y);    // ["a", 1] ["b", 2]

在数组的解构中，存储变量的数组中的每个变量都会映射到解构数组上相同索引处的相应项。

如果解构中某一项不需要，可以使用逗号操作符进行分隔：

const rgb = [200, 255, 100];

const [,, blue] = rgb;

console.log(blue);   // 100

与对象解构一样，可以使用数组解构为局部变量设置默认值：

const rgb = [200];

const [red = 255, green, blue = 255] = rgb;

console.log(`R: ${red}, G: ${green}, B: ${blue}`);

如果变量已经存在，就可以这么写：

let red = 100, green = 200, blue = 50;

const rgb = [200, 255, 100];

[red, green] = rgb;

console.log(`R: ${red}, G: ${green}, B: ${blue}`);

与对象解构不同的是，这里不需要括号将数组括起来。

如果给变量分配的值是 undefined，那么就会使用默认值：

const [x = 1] = [undefined];
console.log(x);    // 1

这里的默认值并不一定是一个固定值，它可以是一个计算属性：

function foo() {
    return 1;
}

let obj1 = {x: 2};
let obj2 = {x: undefined};

let {x=foo()} = obj1;
console.log(x);     // 2

let {x=foo()} = obj2;
console.log(x);     // 1

如果我们想将数组中的一些元素分配给变量，而将数组中的其余项分配给特定的变量就可以这样做：

let [greeting,...intro] = ["Hello", "I" , "am", "John"];

console.log(greeting);  // "Hello"
console.log(intro);     // ["I", "am", "John"]

三、嵌套解构

上面我们说的解构的只是普通的数组和对象。实际上，解构赋值可以用于嵌套数组和嵌套对象。比如，文章最开始的例子中，就是解构的嵌套对象：

const student = {
    name: 'ZhangSan',
    age: 18,
    scores: {
        math: 19,
        english: 85,
        chinese: 100
    }
};

const { name, scores: {math, english, chinese} } = student;

再来看一个嵌套数组解构的例子：

let numbers = [1, [2, 3, 4], 5];
let [a, [b, c, d], e] = numbers;
console.log(a, b, c, d, e); // 1 2 3 4 5

四、使用技巧

1. 函数解构

（1）解构函数参数

可以对函数参数使用解构赋值：

function foo([a, b]) {
    console.log(a + b);
}
foo([1, 2]);       // 3


function bar({x, y}) {
    console.log(x, y);
}
foo({x: 1, y: 2}); // 1 2

可以对函数返回值使用解构赋值：

function getStudentInfo() {
    return {
        name: 'ZhangSan',
        age: 18,
        scores: {
            math: 19,
            english: 85,
            chinese: 100
        }
    };
}
const { name, scores: {math, english, chinese} } = getStudentInfo();
console.log(name, math, english, chinese);

2. 循环中的解构

当我们需要循环中的对象键值时，也可以使用对象解构：

const students = [
    {
        'name': 'ZhangSan',
        'grade': 80
    },
    {
        'name': 'LiSi',
        'grade': 75
    },
    {
        'name': 'WangWu',
        'grade': 95
    }
];

for(let {name, grade} of students){
    console.log(name, grade);
}

3. 动态属性解构

很多时候我们不知道对象属性的 key，只有运行时才知道。比如有一个方法 getStudentInfo，它以一个 key 为参数，并返回相应的属性值：

getStudentInfo('name'); 
getStudentInfo('age');

这里传递给 getStudentInfo 方法的参数是动态的，因此可以这样写：

const getStudentInfo = key => {
  const {[key]: value} = student;
  return value;
}

需要注意，包裹 key 的方括号不能少，否则会出现 undefined 值。

4. 交换变量

数组结构一个很实用的功能就是实现交换局部变量。通常，我们会借助临时变量来实现变量的交换：

let width = 300;
let height = 400;

let temp = width;
width = height;
height = temp;

console.log(width, height)

如果使用数组的解构赋值，就会变得很简单：

let width = 300;
let height = 400;

[width, height] = [height, width];

console.log(width, height)

5. 数组拷贝

可以使用解构赋值和 rest 运算符来实现数组的拷贝：

const rgb = [200, 255, 100];

const [...newRgb] = rgb;
// 等同于 const newRgb = [...rgb]

console.log(newRgb)
相关推荐
黑客老陈1 小时前
新手小白如何挖掘cnvd通用漏洞之存储xss漏洞（利用xss钓鱼）
运维·服务器·前端·网络·安全·web3·xss
正小安1 小时前
Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）
前端·vite
暴富的Tdy1 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js
neeef_se1 小时前
Vue中使用a标签下载静态资源文件（比如excel、pdf等），纯前端操作
前端·vue.js·excel
m0_748235611 小时前
web 渗透学习指南——初学者防入狱篇
前端
℘团子এ1 小时前
js和html中，将Excel文件渲染在页面上
javascript·html·excel
z千鑫2 小时前
【前端】入门指南：Vue中使用Node.js进行数据库CRUD操作的详细步骤
前端·vue.js·node.js
m0_748250743 小时前
Web入门常用标签、属性、属性值
前端
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10ARM学习（31）编译器对overlay方式的支持