让你的代码更简洁

让你的代码更简洁

1.通过条件判断给变量赋值布尔值的正确姿势
	// bad
    if (a === 'a') {
      b = true
    } else {
      b = false
    }

    // good
    b = a === 'a'
    
2.在if中判断数组长度不为零的正确姿势
	// bad
    if (arr.length !== 0) {

    }

    // good
    if (arr.length) {

    }
   
3.同理，在if中判断数组长度为零的正确姿势
	// bad
    if (arr.length === 0) {

    }

    // good
    if (!arr.length) {

    }
  
4.简单的if判断使用三元表达式
	// bad
    if (a === 'a') {
      b = a
    } else {
      b = c
    }

    // good
    b = a === 'a' ? a : c

5.使用includes简化if判断
	// bad
    if (a === 1 || a === 2 || a === 3 || a === 4) {

    }

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

    }
    
    巧用数组方法，尽量避免用for循环
6.使用some方法判断是否有满足条件的元素
	// bad
    const arr = [1, 2, 3, 4]
    const hasNum = (num) => {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === num) {
          return true
        } else {
          return false
        }
      }
    }

    // good
    const hasNum = (num) => arr.some(item => item === num)

    // best
    const hasNum = (arr, num) => arr.some(item => item === num)

7.使用forEach方法遍历数组，不形成新数组
	// bad
    for (let i = 0; i < arr.length; i++) {
      arr[i].key = 'aa'
    }

    // good
    arr.forEach(item => {
      item.key = 'aa'
    })

8.使用filter方法过滤原数组，形成新数组
	// bad
    const arr = [1, 2, 3, 4, 5]; let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > 4) {
        newArr.push(arr[i])
      }
    }

    // good
    newArr = arr.filter(item => item > 4)

9.使用map对数组中所有元素批量处理，形成新数组
	// bad
    const arr = [1, 2, 3, 4, 5]; let newArr = []
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > 4) {
        newArr.push(arr[i] + 1)
      }
    }

    // good
    newArr = arr.map(item => item + 1)

巧用对象方法，避免使用for...in
10.使用Object.values快速获取对象键值
	const obj = {
      a: 1,
      b: 2
    }
    // bad
    const values = []
    for (const key in obj) {
      values.push(obj[key])
    }

    // good
    const values = Object.values(obj)

11.使用Object.keys快速获取对象键名
	const obj = {
      a: 1,
      b: 2
    }
    // bad
    const keys = []
     for (const key in obj) {
      keys.push(key)
    }

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

巧用解构简化代码
12.解构数组进行变量值的替换
	// bad
    let a = 'a'
    let b = 'b'
    const tem = a
    a = b
    b = tem

    // good
    let [b, a] = [a = 1, b = 2]
    console.log(a, b)

13.解构对象
	 // bad
     const personObj = (person) => {
      this.name = person.name
      this.age = person.age
    }

    // good
    const personObj = ({ name, age }) => {
      this.name = name
      this.age = age
    }
    
14.解构时重命名简化命名(有的后端返回的键名特别长，你可以这样干)
	// bad
     setForm (data) => {
      this.one = data.abcdefg
      this.two = data.bcdefg
    }

    // good
    setForm ({abcdefg, bcdefg}) => {
      this.one = abcdefg
      this.two = bcdefg
    }

    // best
    setForm ({abcdefg: one, bcdefg: two}) => {
      this.one = one
      this.two = two
    }
    
15.解构时设置默认值
	// bad
	setForm ({name, age}) {
	    if (!age) age = 16
	    this.name = name
	    this.age = age 
	}
	
	// good
	setForm ({name, age = 16}) {
	    this.name = name
	    this.age = age 
	}

16.||短路符设置默认值
	const person = {
	    name: '张三',
	    age: 38
	}
	
	let name = person.name || '佚名'

17.&&短路符判断依赖的键是否存在防止报错'xxx of undfined'
	let person = {
    name: '张三',
    age: 38,
    children: {
	        name: '张小三'
	    }
	}
	
	let childrenName = person.children && person.childre.name

18.字符串拼接使用${}
	let person = {
	    name: 'LiMing',
	    age: 18
	}
	
	// bad
	function sayHi (obj) {
	    console.log('大家好，我叫' + person.name = '，我今年' + person.age + '了')
	}
	
	// good
	function sayHi (person) {
	    console.log(`大家好，我叫${person.name}，我今年${person.age}了`)
	}
	
	// best
	function sayHi ({name, age}) {
	    console.log(`大家好，我叫${name}，我今年${age}了`)
	}

19.函数使用箭头函数
	let arr [18, 19, 20, 21, 22]
	// bad
		function findStudentByAge (arr, age) {
		    return arr.filter(function (num) {
		        return num === age
		    })
		}
	
	// good
	let findStudentByAge = (arr, age)=> arr.filter(num => num === age)

20.函数参数校验
	// bad
		let findStudentByAge = (arr, age) => {
		    if (!age) throw new Error('参数不能为空')
		    return arr.filter(num => num === age)
		}
	
	// good
	let checkoutType = () => {
	    throw new Error('参数不能为空')
	}
	let findStudentByAge = (arr, age = checkoutType()) =>
	    arr.filter(num => num === age)