解构赋值,以及解构null如何赋初始值

4,785 阅读1分钟

1、当被解构的对象为null或者undefined时,直接解构会报错

Uncaught TypeError: Cannot read property 'a' of undefined/null

var data = undefined; // 或者是null
const { a=1 } = data;

解决方法

const { a = 1 } = data || {}

2、对象和数组解构赋值时,默认值生效的条件是 ===undefined

2.1对象解构:
// a === undefined, 默认值生效
let { a = 1 } = {a: undefined}; // a: 1

// null === undefined为false, 默认值不生效,此时a = null
let { a = 1 } = {a: null}; // a: null

2.2数组的解构:
let [a=1] = [undefined]; // a: 1
let [a=1] = [null]; // a: null

对象和数组解构赋值,默认值生效条件是 === undefined 举例说明

const data = {banners: null, items: [1,2,3]};
const { banners = [], items = [] } = data || {};

// 思考此时banners的值为 ?
// banner值为 null, 因为null 不严格等于 undefined,所以赋初始值 banners = [] 不生效

//判空处理如下
if(!banners?.length) {
    return null;
}