欢迎光临
我的个人博客网站

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} = obj  console.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'} = obj  console.log(key2) // value2 console.log(key3) // undefined 该变量名在obj中不存在,则赋值undefined console.log(key4) // value4 对应的属性不存在,使用默认值 console.log(key5) // value5 对应属性值为undefined,使用默认值 
非同名变量赋值
let obj = {     key1: 'value1' } let {key1: v1, key2: v2 = 'value5'} = obj  console.log(v1) // value1 console.log(v2) // value5 
嵌套对象的解构
let obj = {     loc: {         key1: 'value1',     } } let {loc: {key1, key2, key3 = 'value3'}} = obj;  console.log(key1) // value1 console.log(key2) // undefined console.log(key3) // value3 

数组解构

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

声明变量时使用解构
let arr = ['value1', 'value2', 'value3', 'value4', 'value5'] let [,,key3,key4,key5] = arr  console.log(key3) // value3 逗号是占位符 console.log(key5) // value5  

不要忘记初始化

// 语法错误 let [,,key3,key4,key5] 
变量赋值时使用解构

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

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

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

let key1 = 'value1'; let key2 = 'value2'; [key1, key2] = [key2, key1];  console.log(key1) // value2 console.log(key2) // value1 
解构时的默认值
let arr = ['value1'] let [key1, key2 = 'value2'] = arr  console.log(key2) // value2 
嵌套数组的解构
let arr = ['value1', ['value2', 'value3'], 'value4'] let [key1,[key2],key4] = arr  console.log(key2) // value2 console.log(key4) // value4 
不定元素

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

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

:与不定参数一样,不定元素也必须是最后一个

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

let arr = ['value1', 'value2'] let [...copy] = arr  console.log(Array.isArray(copy)) // true console.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', {}) // value2 demo('value1', {key2: 'value20'}) // value20 demo('value1', {key3: 'value30'}) // value2 

其他章节请看:

es6 快速入门 系列

赞(0) 打赏
未经允许不得转载:张拓的天空 » es6 快速入门 系列 —— 解构
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏