ES6 结构赋值

基本用法

数组解构

// 数组解构的基本用法：
let [a,b,c] = [1,2,3]  // a=1,b=2,c=3
let [d,[e],f] = [1,[2],3]  // 嵌套数组解构 d=1,e=2,f=3
let [g,...h] = [1,2,3]  // 数组拆分 g=1,h=[2,3]
let [i,,j] = [1,2,3]  // 不连续解构 i=1,j=3
let [k,l] = [1,2,3]  // 不完全解构 k=1,l=2

对象解构

// 对象解构的基本用法
let {a,b} = {a:'aaaa',b:'bbbb'}  // a='aaaa' b='bbbb'
let obj = {d:'aaaa',e:{f:'bbbb'}}
let {d,e:{f}} = obj  // 嵌套解构 d='aaaa'  f='bbbb'
let g;
(g = {g:'aaaa'})  // 以声明变量解构 g = 'aaaa'
let [h,i,j,k] = 'nice'  // 字符串解构 h='n'  i='i'  j='c'  k='e'

变量赋值

// es5变量赋值
var data = { userName:'aaaa', password:123456 }
var userName = data.userName
var password = data.password
console.log(userName)
console.log(password)
var data1 = ['aaaa',123456]
var userName1 = data1[0]
var password1 = data1[1]
console.log(userName1)
console.log(password1)


// es6变量赋值
const { userName, password } = { userName:'aaaa', password:123456 }
console.log(userName)
console.log(password)
const [userName1,password1] = ['aaaa', 123456]
console.log(userName1)
console.log(password1)

// 相对于es5的语法更加简单明了，在数据量越大用解构赋值的优势越明显

函数参数的定义

一般在定义函数的时候，如果函数有多个参数时，在es5语法中函数调用时参数必须一一对应，否则就会出现赋值错误的情况，看下面的例子

function personInfo(name,age,address,gender){
  console.log(name,age,address,gender)
}
personInfo('william',18,'changsha','man')

上面这个例子在对用户信息的时候需要传递四个参数，且需要一一对应，这样就会极易出现参数顺序传错的情况，从而导致bug，接下来看es6解构赋值是怎么解决这个问题：

function personInfo({name,age,address,gender}){
  console.log(name,age,address,gender)
}
personInfo({gender:'man',address:'changsha',name:'william',age:18})
// 这么写我们只需要知道要传什么参数就行了，不需要知道参数的顺序也没问题

交换变量的值

// 在es5交换两个变量的值需要借助临时变量的帮助
var a = 1, b = 2, c;
c = a;
a = b;
b = c;
console.log(a,b)

// es6实现交换变量
let a = 1, b = 2
[b, a] = [a, b]
console.log(a,b)

函数的默认参数

在日常开发中，经常会有这种情况：函数的参数需要默认值，如果没有默认值在使用的时候就会报错，来看es5是怎么做的：

function saveInfo(name,age,address,gender){
  name = name || 'william'
  age = age || 18
  address = address || 'changsha'
  gender = gender || 'man'
  console.log(name,age,address,gender)
}
saveInfo()

在函数里面先对参数做一个默认值赋值，然后再使用避免使用的过程中报错，再看es6中的使用方法：

function saveInfo({name='william',age=18,address='changsha',gender='man'} = {}) {
  console.log(name,age,address,gender)
}

在函数定义的时候就定义了默认参数，这样就免了后面给参数赋值默认值的过程，是不是看起来就简单很多了