javascript解构知识

javascript解构知识

解构

1. 解构赋值时，左侧不一定必须时变量，它可以是任意形式的左值表达式

   let arr = []
   let user = {name:'', age:''}
   [arr[0], user.name] = [12, 'jpruby']
   arr
   //[12]
   user
   //{name: 'jpruby', age: ''}
   

2. 解构对象的语法也十分相似，只是用属性名匹配，替代了数组位置的匹配

   let user = {name:'西瓜甜不甜', age:'19'}
   let {name:username, age:userage} = user 
   username
   //'西瓜甜不甜'
   userage
   //'19'
   

3. 当变量名字和属性名一致时最适合对象解构

   let {name, age} = user
   name
   //'西瓜甜不甜'
   age
   //'19'
   

高级解构

昨天介绍了结构语法中最简单，最引人注目的部分，今天介绍更强大但不是很直观的特性

对象解构详谈

```js
let pat = {name: '西瓜甜不甜', birthday: {year:2010, month:06, day:14}}

let {birthday:{year:patsBirthYear}} = pat
```

• 再次提醒左侧不是一个对象，而是用于描述如何与右侧进行匹配的模板，他等价于

  let patsBirthYear = pat.birthday.year
  

• 也支持使用计算结果作为属性名

  let feild = 'Name'
  let {[feild.toLowerCase()]: patsName} = pat
  

  示例结果
  

剩余参数声明

• 再解构数组的时候我们可以再变量名前加… 将未读取的所有剩余元素保存到一个数组中

  let arr = ['苹果', '香蕉', '梨子', '西瓜', '葡萄']
  
  let [a,b,...d] = arr
  

  

• 如果右侧没有足够的元素，则剩余参数变量会被赋予一个空数组

  let arr = ['西瓜甜不甜']
  let [a,b, ...d] = arr
  

  

• 剩余参数声明的语法同样适用于对象

  let boy = {name:'西瓜甜不甜', age:18 ,hobby:'做冰粉'}
  let {name:boyName, ...allButName} = boy
  

  

默认值

我们可以为每个变量提供一个默认值，如果我们需要的值再数组或对象中不存在那就使用默认值

let arr = ['西瓜甜不甜','不甜']
let [a,b,d='做冰粉才是正道'] = arr

let boy = {name:'西瓜甜不甜',age:18}
let {name,age,girfriend='冰粉妹妹'} = boy 

展开的玩法

• 示例一，这里可以看到boy3集成所有属性完美！

let boy = {name:'西瓜甜不甜', age:18, hobby:'卖冰粉'}
let boy2 = {girfrient:'貂蝉'}
let boy3 = {...boy,...boy2}
//boy3
//{name: '西瓜甜不甜', age: 18, hobby: '卖冰粉', girfrient: '貂蝉'}

• 示例二，这里可以看到后来的属性覆盖了前者

let boy = {name:'西瓜甜不甜', age:18, hobby:'卖冰粉'}
let boy2 = {name:'吕布', girfrient:'貂蝉',hobby:'杀人'}
let boy3 = {...boy, ...boy2}
//boy3
//{name: '吕布', age: 18, hobby: '杀人', girfrient: '貂蝉'}