js实用小技巧-CSDN博客

本文链接：https://blog.csdn.net/lq099526/article/details/122807701

1，ES6扩展运算符... 合并多个数组或者多个对象

let a = [1,2,3];
let b = [1,5,6];
let c = [...new Set([...a, ...b])];   // [1,2,3,5,6] 结合Set，去重
 
let obj1 = { a:1 }
let obj2 = { b:1 }
let obj = {...obj1,...obj2};   // {a:1,b:1}

2，ES6数组实例方法 includes
避免多条件的 if 判断语句类似于：

if(type == 1 || type == 2 || type == 3 || type == 4){
   //...
}

简化后：

let conditionList = [1,2,3,4]; 
if(conditionList.includes(type)){
   //...
}

3，从后向前获取数组元素

let newArray = [1, 2, 3, 4]
console.log(newArray.slice(-3)) // [2, 3, 4]

4，短路条件句：

只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。
只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

例如、如果你想在某个条件逻辑值为true时，执行某个函数，就像这样：

if (condition) {
  dosomething()
}

这时，可这样用短路：

condition && dosomething()

例如、用操作符 “||” 来设置默认值
如果你必须给一个变量赋默认值，可以简单的这样写：

let a = b || 'default value'

5，空值合并运算符(??)

空值合并运算符(??)：当左侧的操作数为 null 或者 undefined 时，返回右侧操作数，否则返回左侧操作数（0， ''， NaN会被返回）
逻辑或操作符(||)：左侧的操作数会被强制转换成布尔值，左侧为假返回右侧，任何假值（0， ''， NaN， null， undefined）都不会被返回

const str = '' || '123';  // 输出 '123'
const str = '' ?? '123';  // 输出 ''
const str = null ?? '123';  // 输出 '123'

6，可选链式操作符（?.）

在访问属性可能为 undefined 与 null 的对象时，同 ??

let a = null;
a.b     // 报错: Uncaught TypeError: Cannot read property 'b' of null  
a?.b    // undefined

7，计算数组中的最大值/最小值

内置函数Math.max()和Math.min()可以分别找出参数中的最大值和最小值,但对于数字组成的数组是不能用的.

Math.max(1, 2, 3, 4); // 4
Math.min(1, 2, 3, 4); // 1

Function.prototype.apply() 可以使用提供的this与参数组成的_数组(array)_来调用函数。

let numbers = [1, 2, 3, 4];
Math.max.apply(null, numbers) // 4
Math.min.apply(null, numbers) // 1

更简单的，使用展开运算符：

let numbers = [1, 2, 3, 4];
Math.max(...numbers) // 4
Math.min(...numbers) // 1

8，检测Null、Undefined、空

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

简便写法：

let variable2 = variable1  || '';

注：如果variable1是数字，则先检查他是否为0

9，undefined与null的区别