Js解构赋值学习记录

定义

先看下官方文档给出的解构赋值的定义

文档说明了，使用解构赋值表达式，可以直接获取到数组或对象中的属性或者值，可以方便我们获取。

初识解构赋值

在此之前，我经常用的赋值方式是这样的

var arr = [1,"student",undefined,"小王"];
var arr_0 = arr[0];
var arr_1 = arr[1];
var arr_2 = arr[2];
var arr_3 = arr[3];
console.log(arr_0,arr_1,arr_2,arr_3)  //  1 "student" undefined "小王"

使用结构赋值的话，可以直接对多个变量进行赋值
如下图，每个值可以直接获取到

当然，也可以只获取你想要的属性，不用全部获取

var arr = [1,"student",undefined,"小王"];
var [arr_0,,,arr_3] = [arr[0],arr[1],arr[2],arr[3]]
console.log("arr_0的值为 ",arr_0,"     arr_3的值为 ",arr_3)    //   arr_0的值为 1      arr_3的值为 小王

不想获取的值，可以直接用,隔开就行，不需要做处理

默认值
为了防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。

var a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

交换变量
在一个解构表达式中可以交换两个变量的值。
没有解构赋值的情况下，交换两个变量需要一个临时变量。

var a = 1;
var b = 3;

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

嵌套

当然我们经常会遇见一些复杂的结构，比如嵌套，举个例子

var arr = ["student",["小王",18,"男"]]

这样我们在使用表达式的时候也需要做一次嵌套就可以获取到

let arr = ["student",["小王",18,"男"]]
let [a,[b,c,d]] = arr
console.log("a的值为 ",a)	//a的值为  student
console.log("b的值为 ",b) 	//b的值为  小王
console.log("c的值为 ",c) 	//c的值为  18
console.log("d的值为 ",d) 	//d的值为  男

解构对象

基础赋值

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

无声明变量赋值

var a, b;
({a, b} = {a: 1, b: 2});

注意：赋值语句周围的圆括号 ( … ) 在使用对象字面量无声明解构赋值时是必须的。
{a, b} = {a: 1, b: 2} 不是有效的独立语法，因为左边的 {a, b} 被认为是一个块而不是对象字面量。然而，({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}
你的 ( … ) 表达式之前需要有一个分号，否则它可能会被当成上一行中的函数执行

给变量命名新的名字

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
 
console.log(foo); // 42 
console.log(bar); // true 

对象嵌套解构

对一个对象进行解构赋值时，要确保层次对应
var person = {
name: ‘小王’,
age: 18,
address: {
city: ‘Henan’,
street: ‘DongfengRoad’,
zipcode: ‘454550’
}
};
var {name, address: {city, zip}} = person;
name; // ‘小王’
city; // ‘Henan’
zip; // undefined, 因为属性名是zipcode而不是zip
// 注意: address不是变量，而是为了让city和zip获得嵌套的address对象的属性:
address; // Uncaught ReferenceError: address is not defined

本文学习来源
js官方文档
廖雪峰的官方网站