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

前言

初衷： 整理一下工做中经常使用的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结构能够看我上一篇文章哦 《理解数据结构之Set，只要5分钟！》

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 or null才会执行，工做中有的状况下使用，咱们来看一下。

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.prototype.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]
复制代码

感谢

谢谢各位在百忙之中点开这篇文章，但愿对大家能有所帮助，若有问题欢迎各位大佬指正。

我是蛙人，若是以为写得能够的话，请点个赞吧。

感兴趣的小伙伴能够加入 [ 前端娱乐圈交流群 ] 欢迎你们一块儿来交流讨论

往期高赞好文

《理解数据结构之Set，只要5分钟！》

《【建议收藏】分享一些工做中经常使用的Git命令及特殊问题场景怎么解决》

《解构：使数据访问更便捷！》

《你真的了解ES6中的函数特性么？》

《一看就懂的var、let、const三者区别》