这些工作中用到的JavaScript小技巧你都知道吗？
共 6925字，需浏览 14分钟
·
2021-04-13 10:01
前言
初衷： 整理一下工作中常用的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》
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]
感谢
谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，如有问题欢迎各位大佬指正。