javaScript代码简洁之道

　　1.通过条件判断给变量赋值布尔值的正确姿势  // bad if (a === ＂a＂) {     b = true } else {     b = false }  // good b = a === ＂a＂ 2.在if中判断数组长度不为零的正确姿势// bad if (arr.length !== 0) {     // todo }  // good if (arr.length) {     // todo } 3.同理，在if中判断数组长度为零的正确姿势// bad if (arr.length === 0) {     // todo }  // good if (!arr.length) {     // todo } 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) {     // todo }  // good let arr = [1, 2, 3, 4] if (arr.includes(a)) {     // todo }
　　巧用数组方法，尽量避免用for循环 6.使用some方法判断是否有满足条件的元素// bad let arr = [1, 3, 5, 7] function isHasNum (n) {     for (let i = 0; i < arr.length; i ++) {         if (arr[i] === n) {             return true         }     }     return false }  // good let arr = [1, 3, 5, 7] let isHasNum = n => arr.some(num => num === n)  // best let arr = [1, 3, 5, 7] let isHasNum = (n, arr) => arr.some(num => num === n) 7.使用forEach方法遍历数组，不形成新数组// bad for (let i = 0; i < arr.length; i ++) {     // todo     arr[i].key = balabala }  // good arr.forEach(item => {     // todo     item.key = balabala }) 8.使用filter方法过滤原数组，形成新数组// bad let arr = [1, 3, 5, 7],     newArr = [] for (let i = 0; i < arr.length; i ++) {     if (arr[i] > 4) {         newArr.push(arr[i])     } }  // good let arr = [1, 3, 5, 7] let newArr = arr.filter(n => n > 4) // [5, 7] 9.使用map对数组中所有元素批量处理，形成新数组// bad let arr = [1, 3, 5, 7],        newArr = [] for (let i = 0; i < arr.length; i ++) {        newArr.push(arr[i] + 1) }  // good let arr = [1, 3, 5, 7] let newArr = arr.map(n => n + 1) // [2, 4, 6, 8]
　　巧用对象方法，避免使用for...in 10.使用Object.values快速获取对象键值let obj = {       a: 1,       b: 2 } // bad let values = [] for (key in obj) {       values.push(obj[key]) }  // good let values = Object.values(obj) // [1, 2] 11.使用Object.keys快速获取对象键名let obj = {        a: 1,        b: 2 } // bad let keys = [] for (value in obj) {       keys.push(value) }  // good let keys = Object.keys(obj) // [＂a＂, ＂b＂]
　　巧用解构简化代码 12.解构数组进行变量值的替换// bad let a = 1,       b = 2 let temp = a a = b b = temp  // good let a = 1,       b = 2 [b, a] = [a, b] 13.解构对象// bad setForm (person) {       this.name = person.name        this.age = person.age }  // good setForm ({name, age}) {       this.name = name       this.age = age  } 14.解构时重命名简化命名
　　有的后端返回的键名特别长，你可以这样干 // 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 } 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.||短路符设置默认值let 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)