前言

初衷： 整顿一下工作中罕用的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 } = personconsole.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)) // trueconsole.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") // trueIsUrl("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]

感激

谢谢各位在百忙之中点开这篇文章，心愿对你们能有所帮忙，如有问题欢送各位大佬斧正。

我是蛙人，如果感觉写得还行的话，请点个赞吧。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨