ES6 新增特性 解构赋值

ES6 中数据解构赋值

在 ES6 中通过使用解构赋值代码可以方便时使我们快速的上手代码的实现方式

· 数组的解构:

有一下的代码块:

let arr = [1, 2, 3]

现在要求取出数组的每一项

// 传统的方式
let a = arr[0]
let b = arr[1]
let c = arr[2]
console.log(a, b, c) // 1, 2, 3

在 ES6 中提供了 解构 的语法 可以得到数组中的某一项, 如：

let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3

结构赋值就是将数组中的某一项按照指定的顺序结构赋值给左边的变量 等于号的左右两边都应该是一个数组才可以 两边的值都应该一一对应

let [a, b, c] = [1, 3, [3, 4]]
// 通过解构赋值的一一对应的原则
console.log(1, 3, [3, 4])

let [a, b, c, d] = [1, 2, [3, 4]]
// 通过解构赋值的一一对应结果
console.log(a, b, c, d) // 1 2 [3, 4] undefined

通过上一段代码输出可知 这里的 a, b, c 都有与之对应的值匹配 而 d 没有对应的值匹配 为 undefined 如何解决这个 undefined 的问题呢??

通过在解构的时候设置默认的初始值

let [a, b, c, d = 5] = [1, 2, [3, 4]]
console.log(a, b, c, d) // 1, 2, [3, 4], 5

解构赋值是一种惰性的 如果有传值 就以传递的值为准 如果没有就是用默认值 如果连默认值都没有那就是 undefined

难度提升 => 如何将一下的数组全部展开??
以上要求我们可以通过 数据的解构赋值配合扩展运算符实现

let [a, b, ...c] = [1, 2, [3, 4]]
// 注意 这里的 c 输出的值为 [3, 4] 通过扩展运算符的形式即可展开数组

· 对象的解构：

有一个对象:

let user = {
    name: 'xiaojianjian',
    age: 18,
}

传统获取 name 和 age 的方式

let name = user.name
let age = user.age
console.log(name, age) // xiaojianjian 18

es6 中结构赋值的方式

let { name, age } = user
console.log(name, age) // xiaojianjian 18

解构时顺序的调换是否正常

let { age, name } = user
console.log(age, name) // 18, xiaojianjian
// 输出的结果可知 解构与顺序没有关系

解构时不想使用原来的属性名称 >>> 如何更换

let { age, name: userName } = user
console.log(age, name) // 报错
console.log(age, userName) // 18, xiaojianjian

// 通过以上的代码可知 在解构变量时候 通过给变量起别名的方式即可将解构的值赋值给新变量名

字符串的解构赋值
字符串如何解构 <=> 如何字符串中的每个字符

传统的方式

let str = 'xiaojianjian'
for(let i = 0; i < str.length; i++) {
    console.log(str[i]) // x i a o j i a n...
}

ES6 中对字符的解构就如同对数组的解构 两种解构的方式是一样的

let str = 'xiaojianjian'
let [a, b, c, d] = str
console.log(a, b, c, d) // x, i, a, o

开发场景
设置默认值在代码中增强防御式代码

对象解构默认值

let { name:'liuxiaojian', age: 18 } = {
    name: 'xiaojianjian',
    age: 20,
}

console.log(name, age) //正常情况下 xiaojianjian 20
console.log(name, age) // 非正常情况下取默认值 liuxiaojian 18

数组解构默认值

let [a = 3, b = 4] = [1 ,2]
console.log(a, b) //正常情况下 1, 2
console.log(name, age) // 非正常情况下取默认值 3 4

以上的代码段中不难看出 数组解构默认值 通过 赋值号 “ = “ 对象默认的赋值号 “ : “