2023javascript简洁写法JavaScript 中有许多简写技巧可以缩减代码长度、减少冗余并提高代码的可读性和

以下文章来源于前端充电宝，作者CUGGZ

JavaScript 中有许多简写技巧可以缩减代码长度、减少冗余并提高代码的可读性和可维护性

移除数组假值

可以使用filter()结合Boolean来简化数组假值操作

// 简化写法
let arr = [1, 0, 'scs', NaN, null, undefined, false, '', 0.2]
arr.filter(item => Boolean(item))   // [ 1, 'scs', 0.2 ]
// 更简化写法
arr.filter(Boolean)   // [ 1, 'scs', 0.2 ]

Boolean 是 JavaScript 的内置构造函数，通过传递一个值给它，可以将该值转换为布尔值。在这种情况下，Boolean 构造函数作为回调函数传递给 filter() 方法，因此会将每个数组元素转换为布尔值。只有转换结果为真值的元素才会保留在新数组中。

数组查找

在javascript中常用的数组查找方法有indexOf()、findIndex()，用于查找数组中该值的下标，未查到该值则返回-1，0通常被视为false，大于0或小于0视为true，所以我们结合~按位非运算符来使用，如果需要取反使用在前面加上！

// 传统写法
let arr = [1, 0, 'scs', 0.2]
arr.indexOf(2)   // -1
arr.findIndex(2) // -1

// 简化写法
~arr.indexOf(2)   // 0
~arr.findIndex(2) // 0

// 取反操作
!~arr.indexOf(2)   // true
!~arr.findIndex(2) // true

空值合并运算符

空值合并运算符??，给变量null或undefined提供默认值，执行代码时，如果该左边有值存在，则赋左边的值，没有则赋右边的值

// 传统写法
let data = "前端"
let username = data == null && data == undefined ? "007" : data

// 简化写法
let data = "前端"
let username = data ?? "007"

还有一个空值运算符是??=,给变量存在（null或undefined）进行赋值

// 传统写法
let username1 = null, username2 = "007"
if (username1 == null || username1 == undefined) {
    username1 = username2
}

// 简化写法
username1 ??= username2

链式写法

可选链操作符?.允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效

let data = {
    a:{
        b:{
            name: ''
        }
    }
}
// 传统写法
if (data && data.a && data.a.b && data.a.b.name) {}

// 简化写法
if (data.a?.b?.name) {}

也可以结合空值运算符赋值

const username = data.a?.b?.name ?? "007"

逻辑或赋值运算符（||=）

当左边的变量为假值时（例如false、NaN、null、0、undefined或''）才会赋值，否则保留原始的值

// 传统写法
let count
if (!count) {
    count = 0
}

// 简化写法
let count
count ||= 0

逻辑且赋值运算符（&&=）

当左边的变量为真值时（例如true、1、或'007'）才会赋值

// 传统写法
let count = true
if (count) {
    count = 0
}

// 简化写法
let count
count &&= 0

指数幂运算符`()`**

// 传统写法
Math.pow(2, 3) // 8

// 简化写法
2**3 // 8

扩展运算符`(...)`

// 传统写法
let data = [1, 2, 3]
let data1 = [4, 5, 6].concat(data) // 合并数组
let data2 = data.slice()           // 克隆数组

// 简化写法
let data1 = [4, 5, 6, ...data]     // 合并数组
let data2 = [...data]              // 克隆数组

可以将扩展运算符与ES6解构语法结合使用

let {a, b, ...z} = {a: 1, b: 2, c: 3, d: 4}
console.log(a) // 1
console.log(b) // 2
console.log(z) // {c: 3, d: 4}

变量交换

// 传统写法
let a = 1
let b = 2
let temp = a // 临时变量，用与交换
a = b
b = temp

// 简化写法
[b, a] = [a, b]

变量声明

声明多个变量

// 传统写法
let a = 1
let b = 2

// 简化写法
let a = 1, b = 2

声明多个变量，同一个值

// 传统写法
let a = 1
let b = 1

// 简化写法
let a, b = 1

2023javascript简洁写法