js解构赋值

发表于 | 分类于


三个类型的结构赋值都可以用对象来展示

字符串可以用索引值来取值，所以是特殊的数组，数组是特殊的对象，所以都可以转为对象

1
2
3
4
let str = '123'
let [a,b,c] = str // a = 1,b = 2, c = 3
let {0:a1,1:b1,2:c1} = str // a1 = 1, b1 = 2, c1 = 3
let {length: len} = str // len = 3

数组解构赋值

数组的解构赋值按照顺序来得，解构不成功就为undefined

1
2
3
4
5
let [a, b, c] = [1, 2, 3]
let [a1, b1] = [1, 2, 3]
let [a2, b2] = [1]
let [a3, [b3]] = [1, [1, 2]]
let [a4, b4='2'] = [1]

数组赋值默认值

只有解构赋值为undefined时才会取默认值

1
2
let [a4, b4='2'] = [1]
let [a5, b5='3'] = [1, null] // b5 === null

对象解构赋值

对象的解构赋值按照属性来的

1
2
3
4
5
let {a1} = {b1: 2, a1: 3}
// 实际
let {a1: a1} ={b1: 2, a1: 3} // a1和a1重复，所以可以省略
// 所以变量名可以与属性不一致
let {a1: c} = {b1: 2, a1: 3} // a1是匹配的模式，c才是变量

对象的解构赋值能赋值继承的属性和不可枚举属性
1
2
3
4
5
6
7
8
9
let Detail = function(){}
Detail.prototype.name = "zc"
let me = new Detail()
Object.defineProperty(me, 'age', {
  value: 28
})
let {name, age} = me
name === 'zc'
age ==== 28
对象结构嵌套
1
2
3
4
5
6
7
8
9
10
11
12
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
函数参数数组的解构赋值
1
2
3
4
5
function add([x, y]){
  return x + y;
}
add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b);  // [ 3, 7 ]
函数参数对象的解构赋值
1
2
3
4
5
6
7
function move({x = 0, y = 0} = {}) { // 一定要加{}不然就会报错
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({}); // [0, 0]
move(); // [0, 0]
解构赋值的用途

1、交换变量

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

2、函数返回多个值

1
2
3
4
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

3、函数参数的定义

1
2
3
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

4、输入某块的指定方法

1
const { SourceMapConsumer, SourceNode } = require("source-map");