es6的解构函数

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

解构(Destructuring):是将一个数据结构分解为更小的部分的过程。ES6中,从数组和对象中提取值,对变量进行赋值

解构有什么用处呢?可以大大的简化数组或者对象里面的元素的赋值语句。

数组解构,数组本身并没有发生任何的改变,解构是对新的变量(可能是对象同名属性)赋值。

//变量的声明
let [a,b,c] = [1,2,3];
//嵌套解构 let [foo,[bar],baz]
= [1,[2],3];
//类似函数的剩余参数,数组解构有个类似的,剩余项的概念。 ...tail,里面的tail就是剩余项,也是个数组 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 colors = ["red","green","blue"];
let [,,thirdColor] = colors;
console.log(thirdColor)  //blue

 JS中有个被遗漏的功能:克隆数组,ES5中用concat,用来合并数组,如果不传递任何参数,就是原数组的克隆品。ES6中可以使用剩余项达到同样的效果:

let colors = ["red","green","blue"];
let [...cloneColors] = colors;
console.log(cloneColors)  //["red", "green", "blue"]

本例中剩余项将colors数组的值复制到cloneColors数组中,这个技巧值的关注。。。剩余项是数组解构模式中最后一项,后面不能有逗号。。。 

对象的解构:

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

let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
//如果对象的属性已被变量赋值,再次赋值时候需要用圆括号括起来,因为花括号里面并不是块语句,而是解构赋值表达式。
let node = {
   type:'Identifier',
     name:'foo'
  },type = "Literal",name = 5;
  ({type,name} = node);
  console.log(type,name); //Identifier foo

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

let {foo:baz,hand:lochand = 'eart'} = { foo: "aaa", bar: "bbb" };
baz //'aaa',此时的foo就是未定被定义的,定义的变量只有baz
lochand //'eart' 此时的hand虽然undefined,但是lochand有被初始化 let {foo:foo,bar:bar} = {foo:"aaa",bar:"bbb"}

实际上也说明,对象的解构赋值是内部机制,先找回同名属性,再赋值给对应的变量,真正被赋值的是后者。现在已经掌握了如何对属性值为基本类型值的对象进行解构,而对象解构也可被用于从嵌套的对象结构中提取属性值。(嵌套对象表示:对象的属性可能还是一个对象)举个例子: 

let node = {
    type:'Identifier',
    name:'foo',
    loc:{
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    }
};
let {loc:{start}} = node;
console.log(start) //{line: 1, column: 1}、
let {loc:{start:localStart}} = node;
console.log(localStart) //{line: 1, column: 1}

 嵌套对象的模式,里面使用了{},表示在node对象的loc属性内部寻找start属性。每当有个冒号在结构模式中出现,冒号之前的标识符代表需要检查的位置,冒号右侧则是赋值的目标;当冒号右侧存在花括号时,表示目标被嵌套在对象的更深层次中。

在对象的嵌套解构中也是可以给本地变量使用不同的名称,看上面的栗子(node.loc.start的值被存储在一个新的本地变量localStart上):

 混合解构:

对象和数组解构能被组合使用,以创建更复杂的解构表达式。栗子如下:

let node = {
    type:'Identifier',
    name:'foo',
    loc:{
        start:{
            line:1,
            column:1
        },
        end:{
            line:1,
            column:4
        }
    },
    range:[0,3]
};
let {
    loc:{start},
    range:[startIndex]
} = node;
console.log(start,startIndex);  //{line: 1, column: 1} 0

上面的代码提取出node.loc.start和node.range[0],并将它们的值分别存储在start和startIndex上。

参数解构:

解构还有一个很有用的场景,在传递函数参数时,当JS函数接收大量可选参数时,一种常用模式是创建一个包含附加参数的options对象:

function setCookie(name,value,options){
    options = options || {};
    let secure = options.secure,
    path = options.path,
    domain = options.domain;
}
setCookie("type","js",{
    secure:true,
    path:'http://baidu.com'
})

function setCookie(name,value,{secure,path,domain}){
     //设置cookie的代码
setCookie("type","js",{
   secure:true,
   path:'http://baidu.com'
})

name和value参数是必需的,而options中的secure,path等是可选的。参数解构提供了更清楚标明函数期望输入的替代方案。用对象或数组解构的模式替代了具名参数。看上面的栗子,解构参数在未传递值的情况下会被设定为undefined,类似于常规参数。

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

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

let x = 2;
({x} = {x:1});
console.log(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)  //[3, 7]

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

用途:

1,变量交换:看起来如同镜像。赋值语句的左侧的解构模式,右侧是临时创建的数组字面量。x被赋值为数组中的y,y被赋值为数组中的x。

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,
} = {}){  }
//这种写法有个缺点,当传入参数值为null时会引发程序异常。因为null和undefined是无法被解构的。

6,输入模块的指定方法

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

 关键字:【对象】【数组】【参数解构】

古今之成大事业,大学问者,必经过三种之境界:“昨夜西风凋碧树。独上高楼,望尽天涯路。”此第一境也。“衣带渐宽终不悔,为伊消得人憔悴。”此第二境也。“众里寻他千百度,蓦然回首,那人却在灯火阑珊处。”此第三境也。   ——王国维《人间词话》

posted @ 2018-05-10 14:57  tangjiao_Miya  阅读(13374)  评论(0编辑  收藏  举报