JavaScript 解构赋值

解构赋值语法是一种 Javascript 表达式。可以将数组中的值或对象的属性取出，赋值给其他变量。

数组

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

默认值

name没有赋值的话,默认值是undefined

let [name="tim",age] = [undefined,0]

对象

获取对象属性

let {name,age} = {name:"tim",age:18}
console.log(name,age)

//没有解构的话
let person = {
    name:"tim",
    age:18
}
let name = person.name
let age = person.age
console.log(name,age)

对象里的value

let { foo:bar } = { foo: 'aaa', bar: 'bbb' };
console.log(foo,bar)
//aaa aaa

真正被赋值的是后者bar，而不是前者foo。
上面代码中，foo是匹配的模式，bar才是变量。真正被赋值的是变量bar，不是模式foo。

默认值

output

tim
1234@gmail.com
1234568       

let {name="默认值",age=0} = {age:18} 

console.log(name,age)

output

默认值 18
// 注意默认值是name右边的值
// 未匹配到值才会使用默认值,age有匹配了

字符串

const [a, b, c, d, e] = 'world'; 
// a = "w"
// b = "o"
// c = "r"
// d = "l"
// e = "d"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
// len = 5

数值和布尔的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。 下面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

let {toString: str} = 999;
str === Number.prototype.toString // true

let {toString: str} = true;
str === Boolean.prototype.toString // true

只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

let { prop: x } = undefined; 
// TypeError
let { prop: y } = null; 
// TypeError

函数的解构赋值

//tim age
function fn({name,age}){
  console.log(name,age)
}

fn({name:'TIM',age:39})

//未使用解构
function fn2(options){
  let name = options.name
  let age = options.age
  console.log(name,age)
}

fn2({name:'jack',age:20})

//TIM 39
//jack 20

函数的默认值

Function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); 
// [3, 8]
move({x: 3}); 
// [3, 0]
move({}); 
// [0, 0]
move(); 
// [0, 0]

函数参数的解构也可以使用默认值。
下面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。