js 常用简写技巧

if-Else 用 || 或 ?? 运算符进行简化

如果 ||前面的值是0 、‘’、false、 null、 undefined 、NaN其中的任意一种，则直接返回||后面的值；

let a;
let obj;
a = obj || {};
// 等价于
if(
    obj === 0 || 
    obj === "" || 
    obj === false || 
    obj === null || 
    obj === undefined ||
    isNaN(obj)
  ){
     a = {}
   } else {
     a = obj;
  }

??（空值合并操作符） 如果果没有定义左侧返回右侧，这种方法非常实用，有时候仅仅只是想判断一个字段有没有值，而不是把空字符串或者 0 也当做 false 处理；

var a = obj ?? {}
// 等价于
if(
    obj === null || 
    obj === undefined
  ){
     a = {}
   } else {
     a = obj;
  }

includes

在上面逻辑或操作符||代码段里有一个if判断比较长，这时候就可以用includes去简化代码；

if(
  obj === 0 || 
  obj === "" || 
  obj === false || 
  obj === null || 
  obj === undefined
){
  // ...
}

// 使用includes简化
if([0, '', false, null, undefined].includes(obj)){
  // ...
}

防止崩溃的可选链(?.)

如果访问未定义的属性，则会产生错误。尤其是后端接口返回出错的情况极其容易让页面崩溃。在未定义属性时使用可选链运算符，可以防止代码崩溃。

用于对象

const obj ={ name:'张三'};
// 张三 undefined
console.log(obj?.name,obj?.age) 
用于方法
如果方法存在，它将被调用，否则将返回 undefined。🌰：
const obj = {
  foo() {
    console.log('Hello from foo!')
  }
}
// 输出：'Hello from foo!'
obj.foo?.() 
// 输出：undefined，因为 bar 方法不存在
obj.bar?.() 

用于数组

const arr = [1, 2, 3, 4];

 // 输出：1
console.log(arr?.[0]);
// 输出：undefined
console.log(arr?.[4]) ;

逻辑运算符

逻辑运算符 ||=、&&=、??=，这三个运算符相当于先进行逻辑运算，然后根据运算结果，再视情况进行赋值运算。

逻辑空赋值 (??=)

逻辑空赋值运算符 x??=y 仅在 x 是 null 或 undefined时对其赋值。

或（OR）逻辑运算符 (||=)

逻辑或赋值运算符 x||=y 仅在 x 是 false时对其赋值。

与（AND）赋值运算符 (&&=)

逻辑与赋值运算符 x&&=y 仅在 x 是 true 时对其赋值。

const arr = {b : 2, c : 0, d : false} ;

// 使用 ?? 来判断，结果并不会赋值给 a.e
arr.e??99 ;
// undefined 
console.log(arr.e) ;

// 使用 ??= 来赋值，结果是可以添加到 a 对象上的
arr.f??=100 ;
// {b: 2, c: 0, d: false, f: 100}
console.log(arr) ;  

arr.f ||= 8;
// {b: 2, c: 0, d: false, f: 100}
console.log(arr) ;

arr.g ||= 8;
// {b: 2, c: 0, d: false, f: 100,g:8}
console.log(arr) ;  

arr.f &&= 20 ;
// {b: 2, c: 0, d: false, f: 20,g:8}
console.log(arr) ; 


arr.d &&= 20 ;
// {b: 2, c: 0, d: false, f: 20,g:8}
console.log(arr) ; 

快速生成1-10的数组

生成0-9，利用了数组的下标值

// 方法一
const arr1 = [...new Array(10).keys()]
// 方法二
const arr2 = Array.from(Array(10), (v, k) => k)

数组降维

如果不确定需要降维的数组有多深，可以传入最大值作为参数Infinity，默认值深度为1；可以代替递归对数组进行降维。

const arr = [1, [2, [3, 4], 5], 6]
const flatArr = arr.flat(Infinity) // 输出 [1, 2, 3, 4, 5, 6]

Set：交集、并集、差集

// 1.数组去重 
let arr1 = [1, 3, 2, 1, 4, 2, 1] 
let result1 = [...new Set(arr1)] 
console.log(result1) // [1, 3, 2, 4] 

// 2.交集 
let arr2 = [4, 3, 4, 7] 
let result2 = [...new Set(arr1)].filter(v => new Set(arr2).has(v)) 
console.log(result2) // [3, 4] 

// 3.并集 
let result3 = [...new Set([...arr1, ...arr2])] 
console.log(result3) // [1, 3, 2, 4, 7] 

// 4.差集 
let result4 = [...new Set(arr1)].filter(v => !(new Set(arr2).has(v))) 
console.log(result4) // [1, 2]

变量交换

常见的变量交换方法如下：

let a = 1;
let b = 2;
let c;
c = a;
a = b;
b = c;

// 2,1,1
console.log(a,b,c);

可以使用解构从数组中拆分值。这可以应用于交换两个变量而无需第三个，es6语法：

let x = 1;
let y = 2;

// 交换变量
[x, y] = [y, x];

// 2,1
console.log(x,y);