JavaScript 中常用简写技巧总结

分享一些自己常用的js简写技巧，长期更新，会着重挑选一些实用的简写技巧，使自己的代码更简洁优雅~

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

逻辑或操作符||，这里要注意的是0和''也会认为是false

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

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

空值合并操作符??如果没有定义左侧返回右侧。如果是，则返回左侧。

这种方法非常实用，有时候仅仅只是想判断一个字段有没有值，而不是把空字符串或者0也当做false处理

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

输入框非空的判断（有时候不想把0当成false可以用此方法。比如分数0也是个值，这种情况就不能认为是false）

if(value !== null && value !== undefined && value !== ''){}
// 等价于 ==>
if((value ?? '') !== ''){}

includes的正确使用姿势

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

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

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

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

可选链操作符?. 如果访问未定义的属性，则会产生错误。这就是可选链的用武之地。在未定义属性时使用可选链运算符，undefined将返回而不是错误。这可以防止你的代码崩溃。

const student = {
  name: "lwl",
  address: {
    state: "New York"
  },
}

// 一层一层判断
console.log(student && student.address && student.address.ZIPCode) // 输出：undefined
// 使用可选链操作符
console.log(student?.address?.ZIPCode) // 输出：undefined

可选链运算符也可以用于方法调用。如果方法存在，它将被调用，否则将返回 undefined。例如：

const obj = {
  foo() {
    console.log('Hello from foo!')
  }
}

obj.foo?.() // 输出：'Hello from foo!'
obj.bar?.() // 输出：undefined，因为 bar 方法不存在

同样，数组也可以使用。例如：

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

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

// 使用可选链运算符
console.log(arr?.[0]) // 输出：1
console.log(arr?.[4]) // 输出：undefined
console.log(arr?.[0]?.toString()) // 输出：'1'

逻辑空赋值(??=)

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

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration);
// expected output: 50

a.speed ??= 25;
console.log(a.speed);
// expected output: 25

数组降维

你是否还在用递归给一个多维数组降维？如果是，那你应该知道一下es6的 flat() 方法。

如果不确定需要降维的数组有多深，可以传入最大值作为参数Infinity，默认值深度为1

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

你是否在使用map的时候想要对数组降维？大概像这样：

const arr = [1, 2, 3, 4]
const result = arr.map(v => [v, v * 2]).flat()
console.log(result); // 输出 [1, 2, 2, 4, 3, 6, 4, 8]

其实js也提供了更简便的方法，那就是flatMap()，可以改成这样：

const result = arr.flatMap(v => [v, v * 2])

从数组中删除重复项

在 javascript 中，Set 是一个集合，它允许你仅存储唯一值。这意味着删除任何重复的值。

因此，要从数组中删除重复项，你可以将其转换为集合，然后再转换回数组。

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

它是如何工作的？

new Set(numbers)从数字列表中创建一个集合。创建集合会自动删除所有重复值。
展开运算符...将任何可迭代对象转换为数组。这意味着将集合转换回数组。[...new Set(numbers)]

Array.map()的简写

比如想要拿到接口返回的特定字段的值，可以用解构赋值和对象的简写方法对map方法简写，详细解释请移步js map方法应用场景处理对象数组。

比如接口返回数据，此时如果只想要数据里的id和name，就可以用下面的简写方式。

// 接口返回数据
res = [{
  id: 1,
  name: 'zhangsan',
  age: 16,
  gender: 0
}, {
  id: 2,
  name: 'lisi',
  age: 20,
  gender: 1
}]

// 第一种方法：箭头函数、 解构赋值
const data = res.map(({id, name}) => ({id, name}))
// 第二种方法：箭头函数、返回对象（相对更容易理解）
const data = res.map(v => ({id: v.id, name: v.name}))

长期更新。。。。

以上这篇javascript 中常用简写技巧总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。