es6的解构函数

话说，解构无处不在啊，鄙人自从用了vue写项目以来，总是遇到各路大神莫名其妙的写法，然并未出任何错，查之，然解构也，呜呼哀哉，进而习之。

解构（Destructuring）：ES6中，从数组和对象中提取值，对变量进行赋值。

//变量的声明
let [a,b,c] = [1,2,3];
let [foo,[bar],baz] = [1,[2],3];
let [head,...tail] = [1,2,3,4]; //head:1,tail:[2,3,4]
let [x,y,z] = new Set(['a','b','c']);
//解构允许指定默认值
let [foo = true] = [];  //foo:true
let [x,y='b'] = ['a'];  //x = 'a',y = 'b'

对象的解构：

let {foo,bar} = {foo:"aaa",bar:"bbb"};
//实例举例，下面的变量x就是1，y是2，c为定义是is no defined
var obj = {x:1,y:1,c:1};
let {x,y} = obj;

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

对象的解构变量必须与属性同名，才能取到争取的值。而且对象的属性时没有次序的，而数组的元素是按次序排列的。如果想要变量名和属性名不一致，那么必须这样写：

let {foo,bar} = {foo:"aaa",bar:"bbb"};
//实例举例，下面的变量x就是1，y是2，c为定义是is no defined
var obj = {x:1,y:1,c:1};
let {x,y} = obj;

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

let {foo:baz} = { foo: "aaa", bar: "bbb" };
baz //'aaa',此时的foo就是未定被定义的，定义的变量只有baz
let {foo:foo,bar:bar} = {foo:"aaa",bar:"bbb"}

实际上也说明，对象的解构赋值是内部机制，先找回同名属性，再赋值给对应的变量，真正被赋值的是后者。

圆括号和解构赋值的关系：

只要有可能导致解构歧义，就不得不使用圆括号。

let x = 2;
({x} = {x:1});
//对象的解构赋值可很方便的将现有对象的方法，赋值到某个变量
let {log,sin,cos} = Math;
//由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构
let arr = [1,2,3];
let {0:first,[arr.length-1]:last} = arr;
first //1
last //3

对于字符串，数字，布尔值的解构赋值规则：只要等号右边的值不是对象或者数组，就先将其转化为对象，undefined和null是无法转化为对象，所以对它们进行解构赋值会报错。

[[1,2],[3,4]].map(([a,b]) => a+b)

对于函数的解构赋值，可以将形参以数组的形式传入，如上，数组参数被解构成变量a和b，对于函数内部就只是参数a，b。

用途：

1，变量交换

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

2,函数返回多个值

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

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

3,函数参数的定义

解构赋值可以方便的将参数和变量名对应起来，可以无次序

function f({x,y,z}){...}
f({z:2,y:8:x:9})

4,提取JSON数据，有关json的提取就是对象的解构赋值而已。

5，函数参数的默认值

指定参数的默认值，就避免了在函数体内再写 || 语句。

jQuery.ajax  = function(url,{
    async = true,
    beforeSend = function(){},
    cache = true,
    complete = function(){},
    crossDomain = false,
    global = true,
} = {}){  }

6，遍历Map解构

7，输入模块的指定方法

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

猜你喜欢