js 解构、可选链运算符和空值合并运算符介绍

194 阅读1分钟

一,解构

js中的解构是指将数组或对象在结构上进行分解,可以拆分成多个子结构,然后可以访问这些拆分后的子结构。

1,数组解构

const arr1 = [1, 2];
const [a, b] = arr1;
console.log(a);  //1
console.log(b);  //2

2,对象解构

const obj1 = {x: 1, y: 2};
const {x, y} = obj1;
console.log(x); // 1
console.log(y);  // 2

二,可选链运算符

在JavaScript中,可选链运算符(Optional Chaining Operator)是一个非常有用的特性,它允许你在尝试访问对象的深层属性时,如果某个中间属性不存在,不会抛出错误,而是返回undefined。这样可以避免写很多冗余的代码来检查每一层的属性是否存在。

可选链运算符的语法是 ?.。 1,可选的静态属性访问

let persion;
let lastName = persion?.name?.lastName;
console.log(lastName); // undefined

2,可选的计算属性访问

let arr = []; 
let value = arr?.[0]; // value 将被赋值为 undefined 

3,可选的函数调用或方法调用

let func = null; 
let result = func?.(); // result 将被赋值为 undefined

4,短路求值 如果可选链运算符左边操作数的求值结果为undefined或null,那么右侧的操作数不会再被求值。

let a = 0;
let b;
let c = b?.[++a];
console.log(a); // 0

三,空值合并运算符 ??

空值合并运算符是一个新的二元逻辑运算符,它使用两个问号“??”作为标识。如下: 当左侧操作数为undefined或null时,返回右侧操作数,否则返回左侧操作数。

let a;
let b =  1;
let c = a ?? b;
console.log(c); // 1