解构赋值的使用

在处理数据的时候经常会使用到解构赋值，浅浅记录一下。

1、解构成对象，只要等号右边的值不是对象或数组，就先将其转为对象。由于 undefined 和 null 无法转为对象，所以对它们进行解构赋值，都会报错

2、解构成数组，等号右边必须为可迭代对象

1、数组的解构赋值

解构成数组的前提：如果等号右边，不是数组(严格地说，不是可遍历的解构)，则直接报错

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

//省略解构赋值
let [ ,a, ,b] = [1,2,3,4]
console.log(a, b) // 2,4

//含剩余参数的
let [a, ...reset] = [1, 2, 3, 4, 5]
console.log(a, reset) // 1,[2,3,4,5]

//模式匹配
let [foo, [[bar], baz]] ] = [1, [[2], 3]]
console.log(foo, bar, baz); //1,2,3

//若剩余参数对应的值为undefined,则赋值为[]
let [a, ...reset] = [1]
console.log(a, reset) //1,[]
var arr = [1], //转成 ES5 的原理如下
    a = arr[0], 
    reset = arr.slice(1)
console.log(a, reset) //1,[]

//默认值
let [a, b = 'default'] = [1];
console.log(a, b); //1,'default'

2、对象的解构赋值

如果解构成对象，右侧不是 null 或者 undefined 即可

let obj = { name: 'xiaoming', age: 21}
let { name, age } = obj //注意变量必须为属性名
console.log(name, age) //"xiaoming",21

//别名
let obj = { name: 'xiaoming', age: 21}
let { name: otherName, age: otherAge } = obj 
console.log(otherName, otherAge) //"xiaoming",21
console.log(name, age) //Uncaught ReferenceError: age is not defined

//含剩余参数的
let obj = { name: 'xiaoming', age: 21, gender: '女'}
let { name, ...rest } = obj
console.log(name, rest ) //"xiaoming",{ age: 21, gender: '女' }


//默认值（只有当为 undefined 的时候才会取默认值，null 等均不会取默认值）
let obj = { name: "xiaoming"}
let {name, age} = obj
console.log(name, age) //"xiaoming",undefined

改为设置默认值：let {name, age = 18} = obj
console.log(name, age) //"xiaoming",18


let { a } = { a: "1" } 等于 let a;({ a } = { a: "1" })
console.log(a) //'1'

3、字符串的解构赋值

const [a, b, c, d, e] = "hello"
console.log(a, b, c, d, e) // 'h','e','l','l','o'

//注：解构属性一定是对象解构
let { length } = "hello"
console.log(length) //5

原文地址：https://blog.csdn.net/xxuxioxx/article/details/140610491

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！