JavaScript中解构赋值

JavaScript中解构赋值相当于从数组或对象中提取值并赋值给新的变量。有时候需要搭配拓展运算符…和默认值使用

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4（已完成）提案中的特性
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

一、解构数组

1、声明变量的同时，通过解构数组(提取数组中的元素)进行赋值

var foo = ["one", "two", "three"];

var [o, t, th] = foo;
console.log(o); // "one"
console.log(t); // "two"
console.log(th); // "three"

2、先声明变量，再解构数组进行赋值

var a, b;

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

3、设置默认值，防止解构出undefined

var a, b;

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

4、通过解构赋值交换变量

var a = 1;
var b = 3;

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

5、忽略某些返回值

function f() {
  return [1, 2, 3];
}

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

6、使用剩余模式，将数组中剩余元素赋值给一个变量，该变量就是数组

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

二、解构对象

定义一个变量，变量名 = 属性名，这时候可以从原对象中解构出属性值赋给这个同名的变量。
左边声明变量名必须与对象的key相同！！！因为对象中讲究key value一一对应

1、基本赋值

将对象中的value提取出来，赋值给左边声明的变量
注：左边声明变量名必须与对象的key相同！！！因为对象中讲究key value一一对应

var o = {p: 42, q: true};
var {p, q} = o;
var {pi, qi} = o;
console.log(p); // 42
console.log(q); // true
console.log(pi); // undefined
console.log(qi); // undefined

2、不声明直接赋值

这里有注意点：
1、{a, b}会被当做块，因此必须加上括号
2、（…）前面一行必须用；结尾，否则会被认为是上一行后面的代码
3、({a, b} = {a: 1, b: 2}); 相当于 var {a, b} = {a:1, b:2 }

var a, b;

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

3、从对象中提取变量并赋值给新的变量名

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。
这时候对象中的key就不会被提取出来，因为没有定义key这个变量

// 对象解构出来的值赋值给新的变量，这时 obj中的m n没有被解构出来
var obj = { m: 5, n: 21 }
var { m: foo, n: bar } = obj;

console.log(foo); // 42
console.log(bar); // true
// console.log(m); // 报错
// console.log(n); // 报错

4、将对象中提取的变量赋默认值

变量可以先赋予默认值。当要提取的对象对应属性解析为 undefined，变量就被赋予默认值。

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

5、将对象中提取的属性值赋给新的变量名，并设置默认值

一个属性可以同时
1）从一个对象解构，并分配给一个不同名称的变量
2）分配一个默认值，以防未解构的值是 undefined。

var {a:aa = 10, b:bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5
// console.log(a); // 报错
// console.log(b); // 报错

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。