我的前端代码瘦身大法#yyds干货盘点#-CFANZ编程社区

经常在前端交流群里，看到不少的小伙伴争先说自己代码写的菜。看到别人在学习，他也就一起卷起来。

我的前端代码瘦身大法#yyds干货盘点#_数组

本篇文章主要介绍一些大家平时忽略的知识点，通过对比的方式加深印象，希望看完本篇文章，你的代码有一个质的飞跃！

1、通过条件判断给变量赋值，可以使用三元运算替代它。

var m = 1, n = 2;
var res = null

// bad
if (m > n) {
  res = 1
} else if (m == n) {
  res = 0
} else {
  res = -1
}

// good
res = m > n ? 1 : m == n ? 0 : -1

2、使用 includes 简化 if 判断

let a = 1

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

// good
let arr = [1, 2, 3, 4]
if (arr.includes(a)) {
}

3、字符串拼接使用 ${}

function show(name, age, sex) {
  
  //bad
  return '我叫' + name + '今年' + age + '岁' + '是一个' + sex

  // good
  return `我叫${name}今年${age}岁是一个${sex}`
  
}
console.log(show("WEB", 3, 'girl'));

4、解构数组进行变量值的替换

// a b值进行替换
let a = 1;
let b = 2;

// bad
var tmp = a;
a = b
b = tmp

// good
[b, a] = [a, b]

5、利用解构重命名化繁为简

// bad
setForm (data) {   
    this.one = data.aaa_bbb_ccc_ddd   
    this.two = data.eee_fff_ggg
}
// good
setForm ({aaa_bbb_ccc_ddd, eee_fff_ggg}) {  
    this.one = aaa_bbb_ccc_ddd  
    this.two = eee_fff_ggg
}

// best
setForm ({aaa_bbb_ccc_ddd: one, eee_fff_ggg: two}) {  
    this.one = one   
    this.two = two
}

6、设置默认值

// bad
function setValue({ name, age }){
  if (!age) age = 18
  console.log(age)
}

// good
function setValue({ name, age = 18 }){
  console.log(age)
}

// good -- 使用 || 短路符设置默认值
let person = {
  name: "web",
}
let age = person.age || 18

7、使用 filter 一步过滤到位

//过滤出奇数
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

// bad
let oddNum = []
for (var i = 0; i < arr.length; i++){
  if (arr[i] % 2) {
    oddNum.push(arr[i])
  }
}

// good
let oddNum = arr.filter(item => item%2 )

8、使用 map 对数组中所有元素批量处理，形成新数组

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
let isOdd = []
// bad
for (var i = 0; i < arr.length; i++){
  if (arr[i] % 2) {
    isOdd.push(true)
  } else {
    isOdd.push(false)
  }
}

// good
let isOdd = arr.map(item => item % 2 ? true : false)

9、使用 Object.values 快速获取对象的键值

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

// bad
let value = []
for (key in obj) {
  value.push(obj[key])
}

// good
let value = Object.values(obj)

10、使用 Object.keys 快速获取对象的键名

let obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

// bad
let keys = []
for (key in obj) {
  value.push(key)
}

// good
let keys = Object.keys(obj)

11、使用 set 让数组去重更简单

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

// bad
let newArr = []
for (var i = 0; i < arr.length; i++){
  if (newArr.indexOf(arr[i]) == -1) {
    newArr.push(arr[i])
  }
}

// good
let newArr = [...new Set(arr)]

12、将任何值转换为布尔值

// 在js中，经常需要将一些数据转为布尔值进行判断，可以使用 !!
console.log(!!true);//true
console.log(!!1)//true
console.log(!!'a')//true
console.log(!!false)//false
console.log(!!'')//false
console.log(!![])//true
console.log(!!0)//false
console.log(!!{})//true

13、使用扩展运算符将剩余元素分配给变量

const student = {
  name: "Matt",
  age: 23,
  city: "Helsinki",
  state: "Finland",
};

// bad
const name = student.name;
const age = student.age;
const address = { city: student.city, state: student.state };

// good
const { name, age, ...address } = student;

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

let isReady = false
function doSomthing() {
  
}
// bad
if (isReady) {
  doSomthing()
}

// good
isReady && doSomthing()

15、使用展开运算符快速合并数组，并插入元素

let arr1 = [1, 2, 3], arr2 = [4, 5, 6]

// bad
let arr = arr1.concat(arr2)
arr.push(7)
arr.push(8)
arr.push(9)

// good
let arr = [...arr1, ...arr2, 7, 8, 9]

我希望你喜欢它并学到了一些新东西。感谢你的阅读，编程快乐！