提高JavaScript代码优雅性的一些小技巧《一》

原创

已于 2023-08-17 14:19:51 修改 · 388 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #es6 #前端

于 2023-08-16 21:20:53 首次发布

本文介绍了JavaScript中的一些常见简写技巧，如可选链预防崩溃、includes的高效用法、Array.map的简写、逗号运算符的应用、变量交换等，旨在帮助开发者编写更简洁、易读的代码。

简介

JavaScript 中一些常用简写技巧总结，让代码告别屎山，从我做起！

文章目录

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

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

const person = {
   
   
  name: "张三",
   age: 30,
   address: {
   
   
     area: "beijing"
   },
 }
 // 一层一层判断
 console.log(person && person.address && person.address.province) // 输出：undefined
 // 使用可选链操作符
 console.log(person?.address?.province) // 输出：undefined

2、includes的正确使用姿势

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

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

检查一个字段是否存在于数组中，可以使用 includes() 方法，而不是使用 indexOf() 方法来检查元素是否在数组中

let numbers = [1, 2, 3];
const state = numbers.indexOf(1) > -1 //  true
const state = numbers.includes(1)     //  true

3、Array.map()的简写

想要拿到接口返回的特定字段的值，可以用解构赋值和对象的简写方法对map方法简写。
比如接口返回数据，此时如果只想要数据里的id和name，可以用下面的简写方式。

// 接口返回数据
res = [{
   
   
  id: 1,
  name: '张三',
  age: 20,
  sex: 0
}, {
   
   
  id: 2,
  name: '李四',
  age: 24,
  sex: 1
}]
// 第一种方法：箭头函数、返回对象
const list= res.map(v => ({