JavaScript工作中常用的代码片段32个，适合前端菜鸟

整理一下工作中常用的JavaScript小技巧分享给大家，希望能帮助到各位小伙伴们，在工作中提升开发效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

适合人群： 前端初级开发，大佬绕道。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

1.函数参数默认值

在Es6之前，我们要写参数默认值的话，还需要在函数体内写一堆判断逻辑，而Es6之后新出参数默认值语法，我们来看一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

2.数组求和使用reduce

之前我们都使用for循环进行遍历求和，也可以使用reduce方法进行求和，简洁代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

3.废弃if else侠

我们写判断时，都会使用if else但当业务越来越庞大时有好几种状态时，这样代码太冗余了，我们做一下简化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

if(xxx = 1) {
    xxx = "启用"
} else if(xxx = 2) {
    xxx = "停用"
}
// ...省略
// 废除以上写法

let operation = {
    1: "启用",
    2: "停用"
    3: "注销",
    4: "修改"
    5: "详情"
}
xxx = operation[status] // 代码简洁清晰

4.交换变量

在Es6之前，我们交互变量值时得使用第三个变量，当Es6出现解构赋值时，我们可以非常快速的交换变量。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

5.数组去重

在Es6之前，我们数组去重都使用for循环遍历或者indexOf等，但Es6出现了Set结构，非常便捷。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

不明白Set结构可以看我上一篇文章哦 《理解数据结构之Set，只要5分钟！》文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

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

有时候我们想获取地址栏上参数，都是手写方法，有一个Api实用的方法来处理 URL 的查询字符串。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

7.生成随机Id

有些情况下我们想要获取随机不重复的字符串，就可以使用如下方法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

8.获取对象key键值

快速获取对象的key值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

9.获取对象value值

快速获取对象的value值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

10.模板字符串表达式

在Es6之前，我们字符串拼接变量，都是使用 + 号来拼接，这样拼接还好，要是拼接html标签就非常的难受，稍不注意就报错符号问题。Es6出现了模板字符串使用 ``，然后${}里面绑定变量，使我们开发非常的便捷。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

11.获取对象里指定的值

使用对象解构获取对象值非常简洁，不用在向传统那样使用.语法一个一个去获取文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

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

不再使用字符串split方法，使用扩展运算符可以快速转换为数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

13.使用三目运算判断值

如果只有两种状态的情况强烈推荐使用三目运算，抛弃if else。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

14.??运算符

??运算符只有前面的值是undefined or null才会执行，工作中有的情况下使用，我们来看一下。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

15.?.运算符

?.运算符这在有时候处理对象时非常有用，看下面案例，person.name返回undefined然后在调用toString这时肯定会报错，这时使用?.运算符就不会产生错误，?.运算符是只有在当值不是undefined时才会调用toString方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

16.~~双非运算符

~~双非运算符可以用于向下取整。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

console.log(~~4.3) // 4

17.合并对象

使用Es6新增方法Object.assign，合并对象如果对象里面有重复的值，则后面覆盖前面，可以接收无限参数。在工作中也是经常使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

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

当前方法只要数组里面有一个值符合需求，就返回true，否则false。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

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

我们之前使用for遍历在判断当前数组里的值是否全符合要求，还要声明一个变量来进行累计，直接使用every当全部满足需求时返回true，否则返回false文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

20.随机打乱数组顺序

有时我们场景有需要将一个数组顺序进行打乱。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

21.事件委托

之前我们有100个li元素，都要绑定一个onclick事件，这样性能不怎么好，我们可以通过事件委托实现。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

22.检测值是否为数组

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

23.伪数组转换为真数组

伪数组不能调用真数组对象上的方法，所以得将伪数组转换为真数组，获取js元素是伪数组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

26.数组转换为对象

在有的情况需要将数组转换为对象，可以这样做。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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就是打开状态。一般在工作用主要用到用户在页面停留了多长时间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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

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

把数组里面的假值过滤掉。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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、我这里就演示一种，小伙伴可以根据不同业务场景来选择使用哪种方法！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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就登场了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/22559.html

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