这些工作中用到的JavaScript小技巧你都知道吗？

左手的ㄟ右手 2022-11-17 10:23 154阅读 0赞

![da33ccb37e8e54852eafc817e45fa2a1.png][]

### 前言 ###

**初衷：** 整理一下工作中常用的JavaScript小技巧分享给大家，希望能帮助到各位小伙伴们，在工作中提升开发效率。

**适合人群：** 前端初级开发，大佬绕道。

### 1.函数参数默认值 ###

在Es6之前，我们要写参数默认值的话，还需要在函数体内写一堆判断逻辑，而Es6之后新出参数默认值语法，我们来看一下。

function person(name, age, sex = "male") {
     console.log(name, age, sex) // 蛙人 24 male
    }
    person("蛙人", 24)

### 2.数组求和使用reduce ###

之前我们都使用for循环进行遍历求和，也可以使用reduce方法进行求和，简洁代码。

let nums = [1,22,31,4,56]
    let sum = nums.reduce((prev, cur) => prev + cur, 0)

### 3.废弃`if` `else`侠 ###

我们写判断时，都会使用`if` `else`但当业务越来越庞大时有好几种状态时，这样代码太冗余了，我们做一下简化。

if(xxx = 1) {
        xxx = "启用"
    } else if(xxx = 2) {
        xxx = "停用"
    }
    // ...省略
    // 废除以上写法
    
    let operation = {
        1: "启用",
        2: "停用"
        3: "注销",
        4: "修改"
        5: "详情"
    }
    xxx = operation[status] // 代码简洁清晰

### 4.交换变量 ###

在Es6之前，我们交互变量值时得使用第三个变量，当Es6出现解构赋值时，我们可以非常快速的交换变量。

let x = 10;
    let y = 20;
    [x, y] = [y, x];

### 5.数组去重 ###

在Es6之前，我们数组去重都使用for循环遍历或者indexOf等，但Es6出现了Set结构，非常便捷。

> 不明白Set结构可以看我上一篇文章哦[《5分钟轻松理解数据结构Set》][5_Set]

let arr = [1,1,2,434,2,1]
    console.log([...new Set(arr)]) // 1 2 434

### 6.快速获取URL地址栏参数 ###

有时候我们想获取地址栏上参数，都是手写方法，有一个Api实用的方法来处理 URL 的查询字符串。

let params = new URLSearchParams(location.search);
    params.get("xxx") // 获取地址栏参数

### 7.生成随机Id ###

有些情况下我们想要获取随机不重复的字符串，就可以使用如下方法

Math.random().toString(36).substr(2)

### 8.获取对象key键值 ###

快速获取对象的key值

let person = {name: "蛙人", age: 24};
    console.log(Object.keys(person)) // ["name", "age"]

### 9.获取对象value值 ###

快速获取对象的value值

let person = {name: "蛙人", age: 24};
    console.log(Object.values(person)) // ["蛙人", 24]

### 10.模板字符串表达式 ###

在Es6之前，我们字符串拼接变量，都是使用 + 号来拼接，这样拼接还好，要是拼接`html`标签就非常的难受，稍不注意就报错符号问题。Es6出现了模板字符串使用 \`\`，然后$\{\}里面绑定变量，使我们开发非常的便捷。

let name = "蛙人"
    console.log(`hello ${name}`)
    console.log(`<p>${name}</p>`)

### 11.获取对象里指定的值 ###

使用对象解构获取对象值非常简洁，不用在向传统那样使用`.`语法一个一个去获取

const person = {name: "蛙人", age: 24, sex: "male"};
    let { age, sex } = person
    console.log(age, sex) // 24 male

### 12.快速将字符串转换为数组 ###

不再使用字符串`split`方法，使用扩展运算符可以快速转换为数组。

let str = "abcdefg"
    console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]

### 13.使用三目运算判断值 ###

如果只有两种状态的情况强烈推荐使用三目运算，抛弃if else。

let status = 1;
    status = status == 1 ? "男" : "女"

### 14.`??`运算符 ###

`??`运算符只有前面的值是`undefined`才会执行，工作中有的情况下使用，我们来看一下。

let status = undefined;
    let text = status ?? "暂无"
    console.log(text) // 暂无

### 15.`?.`运算符 ###

`?.`运算符这在有时候处理对象时非常有用，看下面案例，`person.name`返回`undefined`然后在调用`toString`这时肯定会报错，这时使用`?.`运算符就不会产生错误，`?.`运算符是只有在当值不是`undefined`时才会调用`toString`方法。

let person = {}
    console.log(person.name.toString()) // 报错
    console.log(person.name?.toString()) // undefined

### 16.`~~`双非运算符 ###

`~~`双非运算符可以用于向下取整。

console.log(~~4.3) // 4

### 17.合并对象 ###

使用Es6新增方法`Object.assign`，合并对象如果对象里面有重复的值，则后面覆盖前面，可以接收无限参数。在工作中也是经常使用。

let person = {name: "蛙人", age: 24}
    let obj = Object.assign({}, person)
    console.log(obj) // {name: "蛙人", age: 24}

### 18.数组里的值是否满足一个要求 ###

当前方法只要数组里面有一个值符合需求，就返回true，否则false。

let list = [1,2,2,2,2,2]
    let res = list.some(item => item > 1)
    console.log(res) // true

### 19.数组里的值是否都满足要求 ###

我们之前使用for遍历在判断当前数组里的值是否全符合要求，还要声明一个变量来进行累计，直接使用`every`当全部满足需求时返回`true`，否则返回`false`

let list = [1,2,2,2,2,2]
    let res = list.every(item => item > 1)
    console.log(res) // false

### 20.随机打乱数组顺序 ###

有时我们场景有需要将一个数组顺序进行打乱。

let list = [1,2,'蛙人', 1, 34, 3, 12]
    let res = list.sort(() => Math.random() - 0.5)
    console.log(res)

### 21.事件委托 ###

之前我们有100个`li`元素，都要绑定一个`onclick`事件，这样性能不怎么好，我们可以通过事件委托实现。

ul.on("click", "li", e => {
       ....省略 操作
    })

### 22.检测值是否为数组 ###

let arr = []
    console.log(Array.isArray(arr)) // true
    console.log(Object.toString.call(arr) == ["Object Array"]) // true

### 23.伪数组转换为真数组 ###

伪数组不能调用真数组对象上的方法，所以得将伪数组转换为真数组，获取js元素是伪数组。

document.querySelectAll("div") // NodeList[div, div, div, div]
    [...document.querySelectorAll('div')] // 转换为真数组
    Array.from(document.querySelectorAll('div')) // 转换为真数组

### 24.快速获取时间戳 ###

console.log(+ new Date())
    console.log(Date.now())

### 25.获取一个值的下标 ###

在Es6之前，我们只知道使用`indexOf`方法去获取下标，Es6之后还有一个方法哦，如果找到该值返回当前值的下标，找不到返回 -1

let colors = ["red", "blue", "green"]
    function getIndex(val) {
        return colors.findIndex(i => i == val)
    }
    getIndex("blue") // 1

### 26.数组转换为对象 ###

在有的情况需要将数组转换为对象，可以这样做。

let person = ["蛙人", 24, "male"]
    let obj = {}
    person.forEach(item => (obj[item] = item))

### 27.是否为奇偶数 ###

let num = val => val % 2 == 0;
    num(10) // ture 偶数
    num(1) // false 奇数

### 28.检测当前页面是否被隐藏 ###

监测当前页面是否被隐藏，当切换页面时显示`true`, `false`就是打开状态。一般在工作用主要用到用户在页面停留了多长时间。

document.addEventListener("visibilitychange", function() {
       console.log(document.hidden);
    });

### 29.去除当前数组里的false值 ###

把数组里面的假值过滤掉。

let list = ["", false, 1, null, undefined, "蛙人", 24]
    let res = item => item.filter(Boolean)
    console.log(res(list))

### 30.this指向 ###

有时我们不想`this`是这个值，所以就要改变`this`指向，改变`this`指向有很多种，`箭头函数`、`bind`、`apply`、`call`、我这里就演示一种，小伙伴可以根据不同业务场景来选择使用哪种方法！

let person = {name: "蛙人"}
    ul.onclick = (function(e) {
        console.log(this.name )
    }).bind(person)

### 31.判断地址是否有效 ###

function IsUrl(val) {
        try {
         if (new URL(val)) {
             return true        
            }
        } catch(e) {
         return false
        }
    }
    IsUrl("https://www.baidu.cn") // true
    IsUrl("www.baidu.cn") // false

### 32.使用Map使数组直接返回结果 ###

有时我们处理数组时，想直接返回处理完的结果，而不是在重新组合一个数组，这时Map就登场了。

let person = [10, 20, 30]
    function fn(item) {
    	return item + 1
    }
    let res = person.map(fn)
    console.log(res) // [11, 21, 31]

### 感谢 ###

谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，如有问题欢迎各位大佬指正。

[da33ccb37e8e54852eafc817e45fa2a1.png]: /images/20221022/a80d3674e88a430f95db98e419509cb6.png
[5_Set]: http://mp.weixin.qq.com/s?__biz=Mzg5MTU3MDA1MA%3D%3D&chksm=cfca10cef8bd99d80d36bfe6f5e913b35cea7e99b322a9ace5701ed76a9256d4f84eaaa5afe7&idx=1&mid=2247483939&scene=21&sn=72d1b10b91a06000ad414de84c61ed7f#wechat_redirect