话说,解构无处不在啊,鄙人自从用了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,变量交换
扫描二维码关注公众号,回复:
428393 查看本文章
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'