解构运算符的理解与运用

2022 年 7 月 06 日
本文字数：1965 字
阅读完需：约 6 分钟

解构符号

前言

最近一直在学 JavaScript，看到了 ES6 中的解构符号，觉得这个给我们的代码简洁性带来了一个飞跃式的提升，而且它已经运用在了企业开发中，假如未来你工作中，别人在用，你却读不懂别人的代码，这造成的影响还是很大的。因此，好好学习一下吧。

你可以不用，但是你不能不懂✔

JavaScript ES6 中，有很多特性都是为了简化代码，方便程序员去书写的。解构运算符就是其中很好的特性，它可以通过减少赋值语句的使用，或者减少访问数据下标、对象属性的方式，使得代码更加简洁，增强了代码的可读性。

解构符号的作用

解构赋值是对赋值运算符的扩展，他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值

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

使用方法

基本使用

  let [a,b,c] = [1,2,3];  // let a = 1, b = 2, c = 3;

复制代码

嵌套使用

  // 数组   let [a, [[b], c]] = [1, [[2], 3]];    console.log(a); // 1    console.log(b); // 2    console.log(c); // 3  // 对象   let obj = { x: ['hello', {y: 'world'}] };   let { x: [x,{ y }] } = obj;    console.log(x); // hello    console.log(y); // world

复制代码

忽略

  // 数组   let [a, , b] = [1, 2, 3];    console.log(a); // 1    console.log(b); // 3    // 对象   let obj = { x: ['hello', { y: 'world' }] };   let { x: [x, { }] } = obj;    console.log(x); // hello

复制代码

不完全解构

  // 数组   let [a = 1, b] = [];    console.log(a); // 1    console.log(b); // undefined    // 对象   let obj = { x: [{ y: 'world' }] };   let { x: [{ y }, x] } = obj;    console.log(x); // undefined    console.log(y); // world

复制代码

剩余运算符

  // 数组   let [a, ...b] = [1, 2, 3];    console.log(a); // 1    console.log(b); // [2,3]    // 对象   let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};    console.log(a); // 10    console.log(b); // 20    console.log(rest); // { c: 30, d: 40 }

复制代码

字符串

   let [a, b, c, d, e] = 'hello';    console.log(a); // h    console.log(b); // e    console.log(c); // l    console.log(d); // l    console.log(e); // o

复制代码

解构默认值

  // 当解构模式有匹配结果，且匹配结果是 undefined 时，会触发默认值作为返回结果。   let [a = 2] = [undefined];     console.log(a); // 2  // 对象  let {a = 10, b = 5} = {a: 3};     console.log(a); // 3     console.log(b); // 5

复制代码

交换变量的值.

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

复制代码

解构赋值的应用

// 1. 浅克隆与合并let name = { name: "aaa" }let age = { age: 'bbb' }let person = { ...name, ...age }console.log(person) // { name: "aaa", age: 'bbb' }
let a = [1,2,3];let b = [4,5];let c = [...a,...b];console.log(c); // [1,2,3,4,5]
// 2. 提取JSON数据let JsonData = { id: 10, status: "OK", data: [111, 222] } let { id, status, data: numbers } = JsonData; console.log(id, status, numbers); //10 "OK" [111, 222]
// 3. 函数参数的定义// 参数有序function fun1([a, b, c]) { console.log(a, b, c) } fun1([1, 2, 3]); // 1 2 3
// 参数无序function fun2({ x, y, z }) { console.log(x, y, z) } fun2({ z: 3, x: 2, y: 1 }); // 2 1 3
// 参数有默认值function fun3 ([a=1,b]) {console.log(a,b);}fun3([,3]) // 1 3

复制代码

浅谈应用

提取 json 数据

上面列出了几种解构赋值的应用，其中我们最常用的应该是第二种，提取 json 数据，后端传给前端的数据就是 json 数据，前端通常要将数据赋值给一个对象，就是使用的这种方法。

可扩展运算符`...`

我在 leetcode 上刷题的时候使用过，我是用arr.push(...arr1)来合并两个数组的，有点像上面的浅克隆与合并。比起以往我们合并数组的操作，这个简直不要太简单。

第 88 题，合并两个有序数组。

var merge = function(nums1, m, nums2, n) {    nums1.length=m;    nums2.length=n;    nums1.push(...nums2);    let arr=nums1.sort((a,b)=>{        return a-b;    })    return arr;};

复制代码

...这个运算符是将数组中的数据遍历出来，并拷贝到当前对象当中。

arr.push(...arr1)这个方法会将 arr1 的数组元素全部解析出来，然后依次添加到 arr 中去，完成两个数组的合并。

交换变量值

再来看看交换变量值这个应用，我依稀记得一位学长的面试题：不占用额外内存空间的情况下，交换 a 与 b 的值。当时有两种解法，一是使用异或，二是用数学方法，将 ab 相加，再分别减之，(a=a+b,b=a-b,a=a-b)，现在使用解构符号的这个方法[a,b] = [b,a]，是不是也可以呢？

发布于: 2022 年 07 月 06 日阅读数: 3

原文链接:【http://xie.infoq.cn/article/8d9bab4f87eb0aa0c1bf36cf2】。文章转载请联系作者。

是乃德也是Ned

关注

公众号：前端成长日记 2021.08.09 加入

还未添加个人简介

发布

暂无评论

创作场景

解构运算符的理解与运用

解构符号

前言

解构符号的作用

使用方法

解构赋值的应用

浅谈应用

提取 json 数据

可扩展运算符...

交换变量值

是乃德也是Ned

评论

可扩展运算符`...`