ES6语法之解构赋值

什么是解构赋值

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

解构赋值的分类

  1. 数组解构赋值
  2. 对象解构赋值
  3. 字符串解构赋值
  4. 布尔解构赋值
  5. 函数解构赋值
  6. 数值解构赋值

数组解构赋值

按照索引位置匹配

常用示例

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

使用场景

默认值

如果解构赋值没有在结构上成功配对，就是只声明了变量，没有赋值为undefined,所以用默认赋值来解决这种情况。

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

变量交换

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

函数返回值

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

选择性结构赋值

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

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

对象解构赋值

按照 key value 匹配分方式

1
let a,b;
2
({a,b} = {a:1,b:2})
3
console.log(a,b)       // 1 ,2
1
let o = {p:42,q:true};
2
let {p,q} = o;
3
console.log(p,q);     // 42,true

使用场景

默认值

1
let {a=10,b=5} = {a:3};
2
console.log(a,b);      // 3,5

嵌套对象

1
let metaData = {
2
  title:'abc',
3
  test:[{
4
    title:'title',
5
    desc:'description'
6
  }]
7
}
8
let {title:esTitle,test:[{title:cnTitle}]} = metaData;
9
console.log(esTitle,cnTitle);

函数解构赋值

1
function f({x = 0, y = 0} = {}) {
2
    return [x, y];
3
}
4
console.log(f({x: 3, y: 8})); // [3, 8]
5
// 说明：传递了实参，所以函数默认值{}不生效，对实参{x: 3, y: 8}解构赋值，对应的属性都有值，所以解构赋值的默认值不生效，所以x = 3，y = 8；
6
7
console.log(f({x: 3}));// [3, 0]
8
//说明：传递了实参，所以函数默认值{}不生效，对实参{x: 3}解构赋值，对应的属性x有值，y没有值，所以解构赋值的默认值y生效,x不生效，所以x = 3，y = 0；
9
10
console.log(f({}));// [0, 0]
11
//说明：传递了实参{}，所以函数默认值{}不生效，对实参{}解构赋值，对应的属性都没有值，所以解构赋值的默认值生效，所以x = 0，y = 0；
12
13
console.log(f());// [0, 0]
14
//说明：没有传递实参，所以函数默认值{}生效，对实参{}解构赋值，对应的属性都没有值，所以解构赋值的默认值生效，所以x = 0，y = 0；
1
function f({x, y} = { x: 0, y: 0 }) {
2
  return [x, y];
3
}
4
5
console.log(f({x: 3, y: 8})); // [3, 8]
6
//说明：传递了实参，所以函数默认值{x: 0, y: 0}不生效，对实参{x: 3, y: 8}解构赋值，对应的属性都有值，所以解构赋值的默认值不生效，所以x = 3，y = 8；
7
8
console.log(f({x: 3})); // [3, undefined]
9
//说明：传递了实参，所以函数默认值{x: 0, y: 0}不生效，对实参{x: 3}解构赋值，对应的属性x有值，y没有值，所以x=3,因为本例没有解构赋值的默认值，所以y就是undefined；
10
11
 console.log(f({})); // [undefined, undefined]
12
 //说明：传递了实参{}，所以函数默认值{x: 0, y: 0}不生效，对实参{}解构赋值，对应的属性没有值，所以x,y就是undefined；
13
 
14
 console.log(f()); // [0, 0]
15
 //说明：没有传递实参，所以函数默认值{x: 0, y: 0}生效，对实参{x: 0, y: 0}解构赋值，对应的属性有值，所以x,y就是0；
JavaScript
ES6

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！