这一小节主要是记录解构模块知识,解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值,它是对赋值运算符的扩展,解构分4种类型,1 对象解构 2 数组解构 3 混合解构 4 解构参数。
1 对象结构:
let obj = {
a: 1,
b: [1, 2]
}
// 对象解构
const { a, b } = obj
console.log(a, b) //1 [1, 2]
2 数组解构:
let arr = [1, 2, 3]
//解构前2个元素
const [a, b] = arr
console.log(a,b) //1 2
//解构中间的元素
const [, b,] = arr
console.log(b) // 2
数组解构比对象解构简单,因为数组只有数组字面量,不需要像对象一个使用key属性。
3 函数中使用解构赋值
let props = {
a: 1,
b: 2
}
function test(value) {
console.log(value)
}
test({a=3, b=3} = props)
//输出: {a: 1, b: 2}
分析:在调用test()函数的时候,我们给参数设置了默认值3,如果不重新赋值,则打印出3,3,但是进行解构赋值后,将props对象的参数解构赋值给a和b,所以打印结果是{a: 1, b: 2}
如果现在我们想修改这2个变量的值,采用解构赋值的方式可以这样做:定义一个props对象,该对象包含2个属性a和b,然后进行解构赋值,这时就能更新变量a和b的value。
let props = {
a: 1,
b: 2
},
a = 3,
b = 3;
//解构赋值
({ a, b } = props)
console.log(a, b)
//输出 1, 2
4 嵌套对象解构
{
let metaData = {
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]} = metaData;
console.log(esTitle,cnTitle); //abc test
}
5 不定元素解构
let arr = [1, 2, 3, 4];
let [...a] = arr;
console.log(a)
//[1,2,3,4] 这种做法就是克隆arr数组
6 混合解构
混合解构指的是对象和数组混合起来,执行解构操作
let obj = {
a: {
id: 1
},
b: [2, 3]
}
const {
a: {id},
b:[...arr]
} = obj;
console.log(id, arr)
//id = 1, arr = [2, 3]
7 解构参数
function Ajax(url, options) {
const {timeout = 0, jsonp = true} = options
console.log(url, timeout, jsonp)
};
Ajax('baidu.com', {
timeout: 1000,
jsonp: false
}) // "baidu.com" 1000 false
当给函数传递参数时,我们可以对每个参数进行解构,我给option的参数设置了默认值,这样可以防止没有给option传参导致的报错情况。