15个优雅的js写法

863 阅读2分钟

1、简化 If-Else 语句

例如:
const value = 12
const valueType

// bad
if (value > 18) {
  valueType = 'big'
} else {
  valueType = 'small'
}

// good
valueType = value > 18 ? 'big' : 'small'

2、从数组中删除重复项

const arr = [1, 1, 6, 3, 3, 9, 9];
const uniqueArr = [...new Set(arr)]; 

3、将任何值转换为布尔值简化语句

// bad
const str = 'string'
let boolean
if (str !== '') {
  boolean = true
} else {
  boolean = false
}

// good
const str = 'string'
let boolean = !!str

4、扩展运算符

合并两个数组:
const nums1 = [1, 2, 3];
const nums2 = [4, 5, 6];

// bad
let newArray = nums1.concat(nums2);

// good
newArray = [...nums1, ...nums2];

5、对象属性简写

const name = 'Luis',
      city = 'Paris',
      age = 43;

// bad
const person = {
name: name,
city: city,
age: age,
}

// good
const person = { name, city, age };

6、使用forEach()或者Map()代替for循环遍历

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

// bad
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

// good
arr.forEach((item) => console.log(item))

7、解构赋值

student = {
  name: "cks",
  age: 18,
};

// bad
let name = student.name;
let age = student.age;

// good
let { name, age } = student;

8、使用includes简化使用多个|| 检查多个条件

// bad
if (num == 1 || num == 2 || num == 3) {}

// good
if ([1, 2, 3].includes(num)) {}

9、检查一个元素是否存在于数组中

// bad
const hasNumber = numbers.indexOf(1) > -1 

// good
const hasNumber = numbers.includes(1)

10、默认参数

// bad
function checkType(str) {
    if (str === undefined) {
      console.log('a')
    } else {
      console.log(str)
    }
}

// good
function checkType(str = 'a') {
  console.log(str)
}

11、使用 && 进行短路评估

var isReady = true;
function doSomething(){
  console.log("Yay!");
}

// bad
if(isReady){
  doSomething();
}

// good
isReady && doSomething();

12、使用 || 进行简化if判断

let value1 =  'cks';
let value2 = 'tony';
let value3

// bad
if (value1 !== '') {
  value3 = value1
} else {
  value3 = value2
}

// good
value3 = value1 || value2

13、交换变量

let x = 1; 
let y = 2; 

// bad
let temp = x; 
x = y; 
y = temp; 

// good
[x, y] = [y, x];

14、数组过滤

例如:提取数组里面大于5的数形成新的数组
let arr = [1, 6, 3, 6, 8, 4]

// bad
let newArr = []
arr.forEach(item => {
if(item > 5){
  newArr.push(item)
}
})

// good
let newArr = arr.filter((item) => item > 5)

15、将对象的键或值收集到数组中

const info = { name: 'cks', age: 35, weight: '120' }
// 获取值的数组
// bad
let data = []
for (let key in info) {
    data.push(info[key])
}
// good
const data = Object.values(info)

// 获取键的数组
// bad
let data = []
for (let key in info) {
    data.push(key)
}
// good
const data = Object.keys(info)