ES6学习笔记（二）--------------------------------------变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
ES6之前我们申明多个变量需要按照下面的方法：

let a=1;
let b=2;
let c=3;
let d=4;
//或者
let a=1,b=2,c=3,d=4;

现在我们可以更加简便

let[a,b,c,d]=[1,2,3,4]

这种方法需要连边结构完全对上，左边有多余变量，会给多余变量赋值undefined，右边有多余的值，多余的自动会被忽略

let[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]
console.log(a,b,c,d,e,f,g)//1 2 3 4 5 6 7

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

如果等号右边的对象不是数组，就会无法解析，报错

//下面的全部报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

解构赋值允许给变量默认值,如果后面给变量赋值undefined，系统会自动采用默认值

let[a=1,b,c,d]=["abort","bar","cancle","dance"]
console.log(a,b,c,d)//abort bar cancle dance

let[a=1,b,c,d]=[undefined,"bar","cancle","dance"]
console.log(a,b,c,d)//1 "bar" "cancle" "dance"

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

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

let[a=undefined,b]=[undefined,undefined]
console.log(a,b)//undefined undefined

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError

解构赋值还可以用于对象的属性赋值

let{a,b}={a:1,b:2}
a//1
b//2
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined

我们从上面的例子可以看出对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

如果变量名与属性名不一致，必须写成下面这样。

var { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

上面的例子等价于下面,其实就是个左右一一对应的意思

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
foo//"aaa"
bar//"bbb"

与数组一样，解构也可以用于嵌套结构的对象。

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

一定要看清楚他的左右对应关系

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

对象解构赋值也可以设置默认值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

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

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

数字和布尔的解构赋值，解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。(这个给我搞的有点懵逼，数字与布尔的这个例子大家可以看这个网址大家的讨论：https://segmentfault.com/q/10...

let {toString: s} = 123;
s === Number.prototype.toString // true

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

let { toString : s } = 123; 
// 可以换成两步
let temp = new Number(123);
let { toString : s } = temp;

// temp对象因为有toString属性，所以解构成功，然后将toStirng变量用新的变量s代替

let { a : s } = 123 是因为解构失败，所以是undefined

变量解构赋值的用途
一.交换变量的值

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

二.从函数返回多个值，用来接收返回值

function f(a,b){
var num=a+b;
var aver=(a+b)/arguments.length;
return[num,aver,a*b,a*a+b*b]
}
let[x,y,z,p]=f(2,3)
console.log(x,y,z,p)//5 2.5 6 13

function f1(){
return {a:1,b:2}}
let {a,b}=f1()
console.log(a,b)//1 2

解构赋值可以方便地将一组参数与变量名对应起来。

function f1([x,y,z]){
return x+y+z}
f1([1,2,3])//6

参数也可以是无序的
function f2({a,c,d,f,b}){
return a+c+d+f+b}
f2({a:1,b:2,c:3,d:4,f:5})//15

解构赋值对提取JSON对象中的数据，可以快速提取

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

....

猜你喜欢