工作中9个实用的方法

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

最近在群里看到好友问的问题，以及看他们代码发现一些可以优化的代码，所以总结一下。

1.关于 链判断运算符

问题1: 在if中使用变量 A，这个变量没有 .length 方法，想用 A.length 作为判断条件，但是直接报错了。
没有.length方法，你直接使用能不报错吗？

    // 直接使用ES6的链判断运算符 ? 不就可以了吗？
    if(!A?.length) {
        // 使用A变量
    }

链判断运算符: 判断左侧的对象是否为null或undefined。如果是的，就不再往下运算，而是返回undefined。

2.关于 Map

另外一个好友在群里发了一个这样得问题(面试笔试题)：
给你2个数组a和b,请把b和a中合并，合并后的数组去重，最后在过滤掉a小于等与指定项num的项，返回相应的结果。

    // 这是对应上面的变量
    let a = [{ a: 6 }, { a: 1 }, { a: 5 }, { a: 2 }],
        b = [{ a: 1 }, { a: 4 }, { a: 3 }, { a: 2 }, { a: 7 }, { a: 10 }],
        num = 2
    
    function concatArr (arr1, arr2, n) {
        // 利用filter和 Map特性去重
        const map = new Map()
        const result = [...arr1, ...arr2].filter(item => {
          !map.has(item['a']) && map.set(item['a'], 1) && item['a'] > n
        })

        // 返回最终结果
        return result
    }
    
    concatArr(a, b, num)

3.关于 filter

有时候帮他们看BUG会看到类似这样的代码。

    // 不知道你们是否看到类似这样的代码 有点头大
    let arr = [{ a: 6 }, { a: 1 }, { a: 5 }, { a: 2 }]
    let res = []
    arr.forEach(i => {
        if(i.a > 2) {
            res.push(i)
        }
    })

优化

    let arr = [{ a: 6 }, { a: 1 }, { a: 5 }, { a: 2 }]
    
    // 使用filter一行代码就完事儿了
    const res = arr.filter(i => i.a > 2)

4.关于 代码不够优雅

还有这样的

    const food = price => {
        if (price === 30) {
          return '麦当劳'
        } else if (price === 35) {
          return '肯德基'
        } else if (price === 15) {
          return '华莱士'
        }
    }
    
    price(30) // '麦当劳'

优化

    // 这样写的好处是后续加了新的 只需要在foodObj添加对应的 key 和 value 不需要去修改函数的逻辑
    const foodObj = {
        30: '麦当劳',
        35: '肯德基',
        15: '华莱士',
    }
    
    const getFood = price => {
        return foodObj[price]
    }
    
    getFood(30) // '麦当劳'

5.关于 结构赋值

酱紫对象取值

    const obj = { 
                    name:'豆豆', 
                    age: 20, 
                    like: '篮球' 
                }
    
    // 取值
    const name = obj.name
    const age = obj.age
    const like = obj.like

优化

    const obj = { 
                    name:'豆豆', 
                    age: 20, 
                    like: '篮球' 
                }
    
    // 利用ES6对象的解构复制 一行代码完事儿
    const { name, age, like } = obj

6.关于 链式语法

这样的

    // 需求：取出价格低于20块钱的品牌名字
    const brands = [
        {
          name: '麦当劳',
          price: 30,
        },
        {
          name: '肯德基',
          price: 35,
        },
        {
          name: '华莱士',
          price: 15,
        },
        {
          name: '麦肯基',
          price: 10,
        },
      ]
      
      const res = brands.filter(i => i.price < 20)
      const names = res.map(i => i.name)
      console.log(names) // ['华莱士', '麦肯基']

优化

    // 使用链式语法 一行代码就完事儿了，还少声明一个变量
    const names = brands.filter(i => i.price < 20).map(item => item.name)

7.关于 数组扁平化

为了数组扁平化去引入Lodash

    // ES6的 flat() 不香吗？
    const arr1 = [1, [2, [3, [4, 5]]], 6]
    const res2 = arr1.flat(Infinity)
    console.log(names) // [1, 2, 3, 4, 5, 6]

8.关于 字符串反转

    const str = 'doudou is a dog'
    const res = reverseString(str)
    console.log('res', res) // god a si uoduod

    function reverseString (str) {
      return str
        .split('')
        .reverse()
        .join('')
    }

9.关于 去除数字外的字符串

    const str = 'doudou 123 is 456 a 789 dog'
    const res = str.replace(/\D/g, '')
    console.log('res', res) // 123456789

小结

多去看看ruanyifeng老师的 ECMAScript 6 入门，会有很大的收获，最后祝大家工作顺利。