ES6的解构函数

文章2020-02-05446 人已阅来源:tangjiao_Miya

话说,解构无处不在啊,鄙人自从用了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.startnode.range[0],并将它们的值分别存储在startstartIndex上。

参数解构:

解构还有一个很有用的场景,在传递函数参数时,当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'
 })

namevalue参数是必需的,而options中的securepath等是可选的。参数解构提供了更清楚标明函数期望输入的替代方案。用对象或数组解构的模式替代了具名参数。看上面的栗子,解构参数在未传递值的情况下会被设定为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

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

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

对于函数的解构赋值,可以将形参以数组的形式传入,如上,数组参数被解构成变量ab,对于函数内部就只是参数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'