[JavaScript]解构赋值详解

文章目录

概念

ES6提供了更简洁的赋值模式，从数组和对象中提取值，这被称为解构

示例：

[a, b]=[50,100];
console.log(a);// expected output: 50
console.log(b);// expected output: 100[a, b,...rest]=[10,20,30,40,50];
console.log(rest);// expected output: [30, 40, 50]

数组解构

数组解构是非常简单简洁的，在赋值表达式的左侧使用数组字面量，数组字面量中的每个变量名称映射为解构数组的相同索引项

这是什么意思呢，就是如下面这个示例一样，左边数组中的项分别得到了右侧解构数组相应索引的值

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

声明分别赋值

你可以通过变量声明分别解构赋值

示例：声明变量，分别赋值

// 声明变量let a, b;// 然后分别赋值[a, b]=[1,2];
console.log(a);// 1
console.log(b);// 2

解构默认值

如果解构取出的值是

undefined

，可以设置默认值：

let a, b;// 设置默认值[a =5, b =7]=[1];
console.log(a);// 1
console.log(b);// 7

在上面的例子中，我们给a和b均设置了默认值
这种情况下，如果a或b的值是

undefined

，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）

交换变量值

以往我们进行两个变量的交换，都是使用

//交换ab
c = a;
a = b;
b = c;

或者异或的方法

然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值

let a =1;let b =3;//交换a和b的值[a, b]=[b, a];
console.log(a);// 3
console.log(b);// 1

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数

functionc(){return[10,20];}let a, b;[a, b]=c();
console.log(a);// 10
console.log(b);// 20

在上面的例子中，**c()**的返回值[10，20]可以在单独的同一行代码中使用解构

忽略返回值（或跳过某一项）

你可以有选择性的跳过一些不想得到的返回值

functionc(){return[1,2,3];}let[a,, b]=c();
console.log(a);// 1
console.log(b);// 3

赋值数组剩余值给一个变量

当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量

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

这样的话b也会变成一个数组了，数组中的项是剩余的所有项

注意：
这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错

let[a,...b,]=[1,2,3];// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样，数组也可以进行嵌套解构

示例：

const color =['#FF00FF',[255,0,255],'rgb(255, 0, 255)'];// Use nested destructuring to assign red, green and blue// 使用嵌套解构赋值 red, green, blueconst[hex,[red, green, blue]]= color;
console.log(hex, red, green, blue);// #FF00FF 255 0 255

字符串解构

在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据

let[a, b, c, d, e]='hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

对象解构

基础对象解构

let x ={ y:22, z:true};let{ y, z }= x;// let {y:y,z:z} = x;的简写

console.log(y);// 22
console.log(z);// true

赋值给新变量名

当使用对象解构时可以改变变量的名称

let o ={ p:22, q:true};let{ p: foo, q: bar }= o;

console.log(foo);// 22
console.log(bar);// true

如上代码

var {p: foo} = o

获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是

undefined

，我们可以设置默认值

let{ a =10, b =5}={ a:3};

console.log(a);// 3
console.log(b);// 5

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值

let{ a: aa =10, b: bb =5}={ a:3};

console.log(aa);// 3
console.log(bb);// 5

同时使用数组和对象解构

在结构中数组和对象可以一起使用

const props =[{ id:1, name:'Fizz'},{ id:2, name:'Buzz'},{ id:3, name:'FizzBuzz'},];const[,,{ name }]= props;
console.log(name);// "FizzBuzz"

不完全解构

let obj ={p:[{y:'world'}]};let{p:[{ y }, x ]}= obj;//不解构x// x = undefined// y = 'world'

赋值剩余值给一个对象

let{a, b,...rest}={a:10, b:20, c:30, d:40};// a = 10// b = 20// rest = {c: 30, d: 40}

嵌套对象解构（可忽略解构）

let obj ={p:['hello',{y:'world'}]};let{p:[x,{ y }]}= obj;// x = 'hello'// y = 'world'let obj ={p:['hello',{y:'world'}]};let{p:[x,{}]}= obj;//忽略y// x = 'hello'

注意事项

小心使用已声明变量进行解构

错误示范：

let x;{x}={x:1};

JavaScript引擎会将

{x}

理解为一个代码块，从而产生语法错误，我们要避免将大括号写在行首，避免JavaScript将其解释为代码块
正确写法：

let x;({x}={x:1});

正确写法将整个解构赋值语句放在一个圆括号里，就可以正确执行了

函数参数的解构赋值

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

functionadd([x, y]){return x + y;}add([1,2]);

上面代码中，函数add的参数表面上是一个数组，但在传参的时候，数组参数就被解构为变量x和y了，对于函数内部来说，就和直接传入x和y是一样的

解构的用途

解构赋值的用法很多

交换变量的值

let x =1;let y =2;[x, y]=[y, x];

上面的代码交换x和y的值，这样的写法不仅简洁而且易读，语义清晰

从函数返回多个值

函数只能返回一个值，如果要返回多个值，我们只能将这些值放置数组或对象里返回，当我们有了解构赋值后，从对象或数组里取出这些值犹如探囊取物

// 返回一个数组functionexample(){return[1,2,3];}let[a, b, c]=example();// 返回一个对象functionexample(){return{
    foo:1,
    bar:2};}let{ foo, bar }=example();

提取JSON数据

解构赋值对于提取JSON对象中的数据，尤其有用

示例：

let jsonData ={
  id:42,
  status:"OK",
  data:[867,5309]};let{ id, status, data: number }= jsonData;

console.log(id, status, number);// 42, "OK", [867, 5309]

使用上面的代码，我们就可以快速取出JSON数据中的值