如何掌握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）

交换变量值

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

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

或者异或的方法

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

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

解构函数返回的数组

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

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

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

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

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

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

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

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

let [a, ...b] = [1, 2, 3];
    console.log(a);
     // 1console.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, blue
const [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}
    );

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

函数参数的解构赋值

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

function add([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的值，这样的写法不仅简洁而且易读，语义清晰

从函数返回多个值

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

// 返回一个数组function example() {
    
  return [1, 2, 3];
}
    let [a, b, c] = example();

  // 返回一个对象
  function example() {

  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数据中的值