es6 快速入门 系列 —— 解构

其他章节请看：

es6 快速入门 系列

解构

我们经常使用数组或对象存储数据，然后从中提取出相关数据信息

试图解决的问题

以前开发者为了从对象或数组中提取出特定数据并赋值给变量，编写了很多重复的代码，就像这样：

function demo1(obj){ let key1 = obj.key1 let key2 = obj.key2 let key3 = obj.key3 let key4 = obj.key4  // 使用key1,key2,key3,key4变量，做进一步操作}demo1({ key1: 'value1', key2: 'value2', key3: 'value3', key4: 'value4'})

解决的方法

es6引入新特性：解构。来解决上面的问题，请看下面：

function demo1({key1, key2, key3, key4}){ console.log(key2) // value2  // 使用key1,key2,key3,key4变量，做进一步操作}demo1({ key1: 'value1', key2: 'value2', key3: 'value3', key4: 'value4'})

可以把解构简单理解成赋值

更详细的介绍请看下面补充部分

补充

对象解构

对象解构的语法：在赋值操作符左边放置一个对象字面量

声明变量时使用解构

let obj = { key1: 'value1', key2: 'value2'}let {key1, key2} = objconsole.log(key1) // value1

不要忘记初始化

// 语法错误var {key1, key2}// 语法错误let {key1, key2}

变量赋值时使用解构

let obj = { key1: 'value1', key2: 'value2'}let key1 = '11';// 一定要用小括号包裹赋值语句。否则js引擎将{}是为代码块，而代码块不允许出现在赋值语句的左侧({key1} = obj)console.log(key1) // value1

解构时的默认值

let obj = { key1: 'value1', key2: 'value2', key5: undefined}let {key1, key2, key3, key4 = 'value4', key5 = 'value5'} = objconsole.log(key2) // value2console.log(key3) // undefined 该变量名在obj中不存在，则赋值undefinedconsole.log(key4) // value4 对应的属性不存在，使用默认值console.log(key5) // value5 对应属性值为undefined，使用默认值

非同名变量赋值

let obj = { key1: 'value1'}let {key1: v1, key2: v2 = 'value5'} = objconsole.log(v1) // value1console.log(v2) // value5

嵌套对象的解构

let obj = { loc: {  key1: 'value1', }}let {loc: {key1, key2, key3 = 'value3'}} = obj;console.log(key1) // value1console.log(key2) // undefinedconsole.log(key3) // value3

数组解构

数组解构语法：与对象解构语法相比要简单多了，使用的是数组字面量

声明变量时使用解构

let arr = ['value1', 'value2', 'value3', 'value4', 'value5']let [,,key3,key4,key5] = arrconsole.log(key3) // value3 逗号是占位符console.log(key5) // value5 

不要忘记初始化

// 语法错误let [,,key3,key4,key5]

变量赋值时使用解构

不需要用小括号包裹表达式，这一点与对象解构不同

let arr = ['value1', 'value2']let key1, key2;[key1, key2] = arrconsole.log(key1) // value1

数组解构有一个独特用法：交换两个变量的值

let key1 = 'value1';let key2 = 'value2';[key1, key2] = [key2, key1];console.log(key1) // value2console.log(key2) // value1

解构时的默认值

let arr = ['value1']let [key1, key2 = 'value2'] = arrconsole.log(key2) // value2

嵌套数组的解构

let arr = ['value1', ['value2', 'value3'], 'value4']let [key1,[key2],key4] = arrconsole.log(key2) // value2console.log(key4) // value4

不定元素

前面我们介绍了不定参数，而在数组解构语法中有一个与之类似的概念：不定元素。在数组中，可以通过三个点（...）的语法将数组中的其余元素赋值给一个特定的变量，就像这样：

let arr = ['value1', 'value2', 'value3', 'value4']let [key1, ...restKeys] = arrconsole.log(key1) // value1console.log(restKeys.length) // 3console.log(restKeys[0]) // value2

注：与不定参数一样，不定元素也必须是最后一个

可以使用不定元素克隆数组

let arr = ['value1', 'value2']let [...copy] = arrconsole.log(Array.isArray(copy)) // trueconsole.log(copy[1]) // value2

解构参数

解构参数必须传值

function demo(key1, {key2, key3}){ console.log(key2) // value2}// 正确demo('value1', {key2: 'value2'})// 报错demo('value1')

当调用 demo('value1') 时，js引擎实际上做了这些事:

function demo(key1, options){ let {key2, key3} = options}

如果需要让解构参数可选，必须为其提供默认值

function demo(key1, {key2, key3} = {}){ console.log(key2) // undefined}// 正确demo('value1')

下面这种写法，让解构参数支持可选，并且能提供默认值：

function demo(key1, {key2 = 'value2', key3 = 'value3'} = {}){ console.log(key2)}demo('value1') // value2 解构参数支持可选demo('value1', {}) // value2demo('value1', {key2: 'value20'}) // value20demo('value1', {key3: 'value30'}) // value2

其他章节请看：

es6 快速入门 系列

原文转载：http://www.shaoqun.com/a/599626.html

跨境电商：https://www.ikjzd.com/

拍拍：https://www.ikjzd.com/w/2205

邓白氏集团：https://www.ikjzd.com/w/582

其他章节请看：es6快速入门系列解构我们经常使用数组或对象存储数据，然后从中提取出相关数据信息试图解决的问题以前开发者为了从对象或数组中提取出特定数据并赋值给变量，编写了很多重复的代码，就像这样：functiondemo1(obj){letkey1=obj.key1letkey2=obj.key2letkey3=obj.key3letkey4=obj.key4//使用key1,key2,key3,
picitup：https://www.ikjzd.com/w/446
c2c：https://www.ikjzd.com/w/1576
sgshop：https://www.ikjzd.com/w/1982
旺季单量暴跌？这些流量入口赶紧抓住！：https://www.ikjzd.com/home/110372
"进城"还是"下乡"？跨境电商如何选择合适的出海目的地？：https://www.ikjzd.com/home/16615
能发表文章吗：https://www.ikjzd.com/home/1847