Es6 变量解构赋值

在以前怎们js中的变量只可以指定值,在Es6中允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）;

1 .数组的解构赋值

1.基本用法

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

解构赋值其实就是只要等号两边的模式相同，左边的变量就会被赋予对应的值

下面来看一些列子

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解构不成功值为undefined

let [foo] = [];
let [bar, foo] = [1];

上边的两个foo都没有解构成功,所以值为undefined

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

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

上边的代码属于不完全解构,但是可已成功!!!

let [a] = 1;
let [a] = false;
let [a] = NaN;
let [a] = undefined;
let [a] = null;
let [a] = {};

如果等号的右边不是数组（或者严格地说，不是可遍历的结构)，那么将会报错。
2.设置默认值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

如果有的的值严格等于undefined,那么默认值就会生效

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

上边的null不完全等于undefined所以解构赋值成功

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

2.对象的解构赋值

1.基本用法

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

对象和数组有一个不同,就是数组是有序的,而对象是无序的,也就是说在使用数组方式进行解构赋值的时候右边的顺序必须按照左边的顺序来写,而在使用对象的方式进行解构赋值的时候右边的不用按照左边的顺序来写,但是左边的属性和右边的属性名必须一致,示例如下

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

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

2.对象的解构赋值也可以像数组的方式进行嵌套

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // {prop:123}
arr // [true]

3.对象的解构赋值也可以像数组的方式进行设置默认值

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"

3.函数的解构赋值

1.基本用法

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

2.函数参数的解构也可以使用默认值。

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]

主要的用法

1.变量交换值
1.以前变量交换值得放法

var a = 0,
    b = 1,
    temp;
temp = a;
a = b;
b = temp;
a   //1
b   //0

2.利用解构赋值的方式来进行变量交换值

let x = 1;
let y = 2;

[x, y] = [y, x];

2.从函数返回多个值
1.以前的函数返回多个值

 function fn () {
       return  [0,1,2,3,4]
 }
 var arr = [];
 for(var i =0;i<fn().length;i++){
     arr[arr.length] = fn()[i]
 }

2.利用解构赋值来进行函数返回多和值

// 返回一个数组

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

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3.提取json

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

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

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