JavaScript专题之代码简洁

￡神魔★判官ぃ 2022-10-29 01:49 139阅读 0赞

# JavaScript专题之代码简洁 #

> 本年度第二篇文章，进了新项目组要了解的东西太多，之后我会保证定时输出有质量的文章

这篇文章主要是想和大家一起学习一下，工作之中有哪些让我们眼前一亮的JavaScript代码简洁小技巧。

注意：下面的代码对比没有绝对的正确和错误，有些写法的使用场景会比较单一，根据大家的习惯和喜好判断即可，如果有更好或不同意见欢迎留言交流哦～

### 1. 短路操作： ###

当我们遇到这样的情况的时候，你会是

const res1 = item.a ? item.a : item.b // 看起来很是简洁
    const res2 = item.a ? item.b : item.a // 看起来很是简洁

还是利用js逻辑运算来实现呢？

const res1 = item.a || item.b;
    const res1 = item.a && item.b;

### 2. 通过条件判断给变量赋值布尔值的正确姿势： ###

当我们需要比较单一的值来获取结果的时候，利用直接的运算，要不if判断要简洁的多～

let res;
    if(a === '余光'){ 
    	res = true 
    }else{ 
    	res = false;
    }
    
    // good?
    const res = a === '余光'

### 3. 在if中判断数组长度不为零的正确姿势： ###

场景：如果数组内存在元素，则进行操作：

// bad
    if (arr.length !== 0) { 
        // todo
    }
    
    // good
    if (arr.length) { 
        // todo
    }

以此类推，当我们需要判断数组的长度为为空时：

if(!arr.length){ 
    	// todo
    }

### 4. 使用includes简化if判断： ###

场景：如果参数等于1、2、3、4，就进行下一步操作

写第一版代码：

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

看完感觉异常的头疼，遂修改为：

if([1,2,3,4].includes(a)){ 
    	// todo
    }

### 5. 使用some判断是否存在符合条件的值： ###

场景：寻找是否存在价格小于n的商品

方法写完了，但既然js为我们提供了那么多数组的方法，用起来：

const itemList = [
    	{ name: '手机', price: 1000},
    	{ name: '手机壳', price: 10},
    	{ name: '帽子', price: 50},
    ]
    const checkData = (n) => itemList.some(item => item.price < n)

再次优化

const checkData = (n, itemList) => itemList.some(item => item.price < n)

### 6. 使用filter方法过滤原数组，形成新数组 ###

情景：剔除某些不需要的元素，例如每一条数据的id是之后操作的必须数据，为了剔除缺陷数据，我们会这么做：

const data = [
        {  name: '手机', price: 1000, id: 1 },
        {  name: '手机壳', price: 10, id: 2 },
        {  name: '帽子', price: 50, id: '' },
    ]
    
    // bad
    let newArr = []
    for (let i = 0; i < data.length; i ++) { 
        if (data.id) { 
            newArr.push(arr[i])
        }
    }

掌握“过滤”思想，我们这样处理：

const afterData = data.filter(item => item.id);

### 7. 使用map对数组内的元素进行批量处理： ###

情景：在涉及到价格的交互中，我们拿到的价格字段通常是以分为单位的，我们要怎么做展示呢？

const data = [10000, 20000, 980000]
    
    const afterData = data.map(price => price / 100)

### 8. 解构数组进行变量值的替换 ###

情景：需要将两个值进行交换

// bad
    let a = 1,
        b = 2
    let temp = a
    a = b
    b = temp
    
    // good
    let a = 1,
        b = 2
    [b, a] = [a, b]

### 9. 解构融到代码中： ###

情景：获取对象中的某个元素，并设置默认值

写第一版代码：

// bad
    setForm (person) { 
        this.name = person.name
        this.age = person.age 
    }
    
    // good
    setForm ({ name = '余光', age}) { 
        this.name = name
        this.age = age 
    }

### 10. 多个方法合体时都能做什么？（举例一） ###

这是最后一条代码简洁思路，拿一个具体的场景距离，抛砖引玉，欢迎大家在评论区留言～

场景：

前端拿到的数据是

data = [
        {  id: 1, name: '一级标题-1' },
        {  id: 2, name: '一级标题-2' },
        {  id: 3, name: '二级标题-1', pid: 1 },
        {  id: 3, name: '一级标题-3' },
        {  id: 3, name: '二级标题-2', pid: 2 },
    ]

我们需要形成及联关系，如：

needData = [
        { 
            id: 1,
            name: '一级标题-1',
            children: [
                {  id: 3, name: '二级标题-1', pid: 1 }
            ]
        },
        { 
            id: 2,
            name: '一级标题-2',
            children: [
                {  id: 5, name: '二级标题-2', pid: 2 }
            ]
        },
        {  id: 4, name: '一级标题-3' },
    ]

于是我借助数组提供的多个api：

newList = data.reduce((result, item, _, arr) => { 
        if (!item.pid) { 
            return [...result, item];
        }
        const parentItem = arr.find(({  id }) => id === item.pid);
        if (parentItem) { 
            const {  children = [] } = parentItem;
            parentItem.children = [...children, item];
        }
        return result;
    }, []);

思路：

1.  寻找存在父级的元素
2.  将它发到正确的位置上
3.  返回所有没有父级字段（pid）的数据

u如果大家有更多类似的思路和操作请一定要留言哦

![20201112161712838.jpg][]

## 写在最后 ##

**JavaScript 系列：**

1.  [《JavaScript 内功进阶系列》（已完结）][JavaScript]
2.  [《JavaScript 专项系列》（持续更新）][JavaScript 1]

**关于我**

*  花名：余光（沉迷 JS，虚心学习中）
 *  WX：j565017805

**其他沉淀**

*  [Js 版 LeetCode 题解][Js _ LeetCode]
 *  [前端进阶笔记][Link 1]
 *  [我的 CSDN 博客][CSDN]
 *  [我的 GitHub][GitHub]

这是[文章所在 GitHub 仓库的传送门][GitHub 1]，如果真的对您有所帮助，希望可以点个 star，这是对我最大的鼓励 ～

![20200602155947301.png][]

[20201112161712838.jpg]: /images/20221024/7dae8c7fd9ec42508b7cafe4ac752dbc.png
[JavaScript]: https://blog.csdn.net/jbj6568839z/article/details/103161970
[JavaScript 1]: https://blog.csdn.net/jbj6568839z/category_10204368.html
[Js _ LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 1]: https://webbj97.github.io/summary/
[CSDN]: https://yuguang.blog.csdn.net/
[GitHub]: https://github.com/webbj97/
[GitHub 1]: https://github.com/webbj97/summary
[20200602155947301.png]: /images/20221024/9110273577314ad4b8a3b61ba3e1f264.png