ES6+的那些运算符,你知道吗?(非常的好用)

230 阅读2分钟

1、... 扩展运算符

数组的合并(对象也可以)

var a = [1, 2];
var b = [0, ...a, 3]
console.log(b) // [0, 1, 2, 3]

数组的分割(对象也可以)

var [a, ...b] = [0, 1, 2];
console.log(a) // [0]
console.log(b) // [1, 2]

数组的拷贝(对象也可以)

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

2、**指数运算符

console.log( 2**2 ) // 4
console.log( 2**3 ) // 8

3、?.可选链

判断?前是不是null,undefined,是就不在向下执行,不是就继续执行

obj=null

console.log(obj?.a); //undefined
console.log(obj.a);  //报错
obj?.say() // 返回 undefined
obj.say() //报错

obj?.a相当于
  obj && obj.a 或者 obj==null?undefined:obj.a

4、?? 空值合并

a ?? b 的结果是:

  • 如果 a 是已定义的,则结果为 a
  • 如果 a 不是已定义的,则结果为 b

换句话说,如果第一个参数不是 null/undefined,则 ?? 返回第一个参数。否则,返回第二个参数。

let a = 11;
let b='11111111111111'
let res = a ?? b
console.log(res);//11



res = a ?? b 相当于 res = (a !== null && a !== undefined) ? a : b;

有人可能就会觉得这和 || 用法一样,其实不然……

它们之间重要的区别是:

  • || 返回第一个  值。
  • ?? 返回第一个 已定义的 值。 || 无法区分 false0、空字符串 "" 和 null/undefined都会被当成假值
let a = false; 
let b='11111111111111'
let res1 = a ?? b
console.log('res1=',res1); //false

let res2 = a || b
console.log('res2=',res2); //'11111111111111' 

5、 ||= &&= ??=逻辑赋值运算符

  • a||=b相当于a || (a=b):如果a——为真值,返回值为a, 为假值,把b赋值给a,再返回a
  • a&&=b相当于a && (a=b):如果a——为真值,把b赋值给a,再返回a,为假值,返回值为a
  • a??=b相当于a ?? (a=b):如果a—— 为null/undefined,把b赋值给a,再返回a 假值: false0、空字符串 "" 和 null/undefined都会被当成假值
let a1 = 0;
let b1=222;
let res1 = a1 ||= b1 
console.log(res1); //222

let a2 = 0;
let b2=222;
let res2 = a2 &&= b2 
console.log(res2); //0

let a3 = 0;
let b3=222;
let res3 = a3 ??= b3 
console.log(res3); //0