Array-Destructure数组
Object-Destructure学习
解构赋值:
使用数组索引去使用变量,不如直接赋值一个变量,可是也不适合用let声明不少变量spa
let arr = ['hello', 'world'] // 经过索引访问值 let firstName = arr[0] let surName = arr[1] console.log(firstName, surName) // hello world
ES6rest
let arr = ['hello', 'world'] let [firstName, surName] = arr console.log(firstName, surName) //hello world
//跳过某个值 //Array let arr = ['a', 'b', 'c', 'd'] let [firstName,, thirdName] = arr // 左边是变量,右边是一个可遍历的对象,包括Set和Map console.log(firstName, thirdName) // a c //String let str = 'abcd' let [,, thirdName] = str console.log(thirdName) // c //Set let [firstName,, thirdName] = new Set([a, b, c, d]) console.log(firstName, thirdName) // a c
给对象属性从新命名code
let user = { name: 's', surname: 't' }; [user.name,user.surname] = [1,2] //花括号和中括号之间必需要有分号 console.log(user) // { name: 1,surname: 2}
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] let [firstName,, thirdName,...last] = arr console.log(firstName, thirdName, last) // 1 2 [3, 4, 5, 6, 7, 8, 9] // 上面若是只赋值firstName和thirdName,那么剩下的参数arr会被回收掉,若是不想3-9的元素被删掉,那么能够用[...rest] // rest只能在最后一个元素中使用
从前日后没有取到为undefined对象
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9] let [firstName,, thirdName,...last] = arr console.log(firstName, thirdName, last) // 1 2 [3, 4, 5, 6, 7, 8, 9] let arr = [1, 2, 3] let [firstName,, thirdName,...last] = arr // 1 2 [3] let arr = [1, 2] let [firstName,, thirdName,...last] = arr // 1 2 [] let arr = [1] let [firstName,, thirdName,...last] = arr // 1 undefined [] let arr = [] let [firstName,, thirdName,...last] = arr // undefined undefined [] //默认没有参数,会为undefined,若是这个时候进行数字运算的时候,就会有问题 //若是避免这种状况,就要进行默认值的赋值 let arr = [] let [firstName = 'hello',, thirdName,...last] = arr // hello undefined []
let options = { title: 'menu', width: 100, height: 200 } let { title, width, height } = options console.log(title, width, height) // menu 100 200
若是有变量冲突怎么办?不能用简写形式blog
// 下面title是匹配属性名提取变量名称 // title2是新的变量名 let {title: title2, width, height} = options console.log(title2, width, height) // menu 100 200
let options = { title: 'menu', height: 200 } let {title: title2, width = 130, height} = options console.log(title2, width, height) // menu 130 200
let options = { title: 'menu', width: 100, height: 200 } let { title, ...last } = options console.log(title, last) //menu {width: 100, height: 200}
let options = { size: { width: 100, height: 200 }, item: ['Cake', 'Donut'], extra: true } let { size: { width: width2, height }, item: [item1] } = options console.log(width2, height, item1) //100 200 "Cake"