這些工作中用到的JavaScript小技巧你都知道嗎？
前言
初衷： 整理一下工作中常用的JavaScript小技巧分享給大家，希望能幫助到各位小伙伴們，在工作中提升開發(fā)效率。
適合人群： 前端初級開發(fā)，大佬繞道。
1.函數(shù)參數(shù)默認(rèn)值
在Es6之前，我們要寫參數(shù)默認(rèn)值的話，還需要在函數(shù)體內(nèi)寫一堆判斷邏輯，而Es6之后新出參數(shù)默認(rèn)值語法，我們來看一下。
function person(name, age, sex = "male") {
console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)
2.數(shù)組求和使用reduce
之前我們都使用for循環(huán)進(jìn)行遍歷求和，也可以使用reduce方法進(jìn)行求和，簡潔代碼。
let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)
3.廢棄if else俠
我們寫判斷時(shí)，都會(huì)使用if else但當(dāng)業(yè)務(wù)越來越龐大時(shí)有好幾種狀態(tài)時(shí)，這樣代碼太冗余了，我們做一下簡化。
if(xxx = 1) {
xxx = "啟用"
} else if(xxx = 2) {
xxx = "停用"
}
// ...省略
// 廢除以上寫法
let operation = {
1: "啟用",
2: "停用"
3: "注銷",
4: "修改"
5: "詳情"
}
xxx = operation[status] // 代碼簡潔清晰
4.交換變量
在Es6之前，我們交互變量值時(shí)得使用第三個(gè)變量，當(dāng)Es6出現(xiàn)解構(gòu)賦值時(shí)，我們可以非?？焖俚慕粨Q變量。
let x = 10;
let y = 20;
[x, y] = [y, x];
5.數(shù)組去重
在Es6之前，我們數(shù)組去重都使用for循環(huán)遍歷或者indexOf等，但Es6出現(xiàn)了Set結(jié)構(gòu)，非常便捷。
不明白Set結(jié)構(gòu)可以看我上一篇文章哦《5分鐘輕松理解數(shù)據(jù)結(jié)構(gòu)Set》
let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434
6.快速獲取URL地址欄參數(shù)
有時(shí)候我們想獲取地址欄上參數(shù)，都是手寫方法，有一個(gè)Api實(shí)用的方法來處理 URL 的查詢字符串。
let params = new URLSearchParams(location.search);
params.get("xxx") // 獲取地址欄參數(shù)
7.生成隨機(jī)Id
有些情況下我們想要獲取隨機(jī)不重復(fù)的字符串，就可以使用如下方法
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.模板字符串表達(dá)式
在Es6之前，我們字符串拼接變量，都是使用 + 號來拼接，這樣拼接還好，要是拼接html標(biāo)簽就非常的難受，稍不注意就報(bào)錯(cuò)符號問題。Es6出現(xiàn)了模板字符串使用 ``，然后${}里面綁定變量，使我們開發(fā)非常的便捷。
let name = "蛙人"
console.log(`hello ${name}`)
console.log(`<p>${name}</p>`)
11.獲取對象里指定的值
使用對象解構(gòu)獲取對象值非常簡潔，不用在向傳統(tǒng)那樣使用.語法一個(gè)一個(gè)去獲取
const person = {name: "蛙人", age: 24, sex: "male"};
let { age, sex } = person
console.log(age, sex) // 24 male
12.快速將字符串轉(zhuǎn)換為數(shù)組
不再使用字符串split方法，使用擴(kuò)展運(yùn)算符可以快速轉(zhuǎn)換為數(shù)組。
let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]
13.使用三目運(yùn)算判斷值
如果只有兩種狀態(tài)的情況強(qiáng)烈推薦使用三目運(yùn)算，拋棄if else。
let status = 1;
status = status == 1 ? "男" : "女"
14.??運(yùn)算符
??運(yùn)算符只有前面的值是undefined才會(huì)執(zhí)行，工作中有的情況下使用，我們來看一下。
let status = undefined;
let text = status ?? "暫無"
console.log(text) // 暫無
15.?.運(yùn)算符
?.運(yùn)算符這在有時(shí)候處理對象時(shí)非常有用，看下面案例，person.name返回undefined然后在調(diào)用toString這時(shí)肯定會(huì)報(bào)錯(cuò)，這時(shí)使用?.運(yùn)算符就不會(huì)產(chǎn)生錯(cuò)誤，?.運(yùn)算符是只有在當(dāng)值不是undefined時(shí)才會(huì)調(diào)用toString方法。
let person = {}
console.log(person.name.toString()) // 報(bào)錯(cuò)
console.log(person.name?.toString()) // undefined
16.~~雙非運(yùn)算符
~~雙非運(yùn)算符可以用于向下取整。
console.log(~~4.3) // 4
17.合并對象
使用Es6新增方法Object.assign，合并對象如果對象里面有重復(fù)的值，則后面覆蓋前面，可以接收無限參數(shù)。在工作中也是經(jīng)常使用。
let person = {name: "蛙人", age: 24}
let obj = Object.assign({}, person)
console.log(obj) // {name: "蛙人", age: 24}
18.數(shù)組里的值是否滿足一個(gè)要求
當(dāng)前方法只要數(shù)組里面有一個(gè)值符合需求，就返回true，否則false。
let list = [1,2,2,2,2,2]
let res = list.some(item => item > 1)
console.log(res) // true
19.數(shù)組里的值是否都滿足要求
我們之前使用for遍歷在判斷當(dāng)前數(shù)組里的值是否全符合要求，還要聲明一個(gè)變量來進(jìn)行累計(jì)，直接使用every當(dāng)全部滿足需求時(shí)返回true，否則返回false
let list = [1,2,2,2,2,2]
let res = list.every(item => item > 1)
console.log(res) // false
20.隨機(jī)打亂數(shù)組順序
有時(shí)我們場景有需要將一個(gè)數(shù)組順序進(jìn)行打亂。
let list = [1,2,'蛙人', 1, 34, 3, 12]
let res = list.sort(() => Math.random() - 0.5)
console.log(res)
21.事件委托
之前我們有100個(gè)li元素，都要綁定一個(gè)onclick事件，這樣性能不怎么好，我們可以通過事件委托實(shí)現(xiàn)。
ul.on("click", "li", e => {
....省略 操作
})
22.檢測值是否為數(shù)組
let arr = []
console.log(Array.isArray(arr)) // true
console.log(Object.toString.call(arr) == ["Object Array"]) // true
23.偽數(shù)組轉(zhuǎn)換為真數(shù)組
偽數(shù)組不能調(diào)用真數(shù)組對象上的方法，所以得將偽數(shù)組轉(zhuǎn)換為真數(shù)組，獲取js元素是偽數(shù)組。
document.querySelectAll("div") // NodeList[div, div, div, div]
[...document.querySelectorAll('div')] // 轉(zhuǎn)換為真數(shù)組
Array.from(document.querySelectorAll('div')) // 轉(zhuǎn)換為真數(shù)組
24.快速獲取時(shí)間戳
console.log(+ new Date())
console.log(Date.now())
25.獲取一個(gè)值的下標(biāo)
在Es6之前，我們只知道使用indexOf方法去獲取下標(biāo)，Es6之后還有一個(gè)方法哦，如果找到該值返回當(dāng)前值的下標(biāo)，找不到返回 -1
let colors = ["red", "blue", "green"]
function getIndex(val) {
return colors.findIndex(i => i == val)
}
getIndex("blue") // 1
26.數(shù)組轉(zhuǎn)換為對象
在有的情況需要將數(shù)組轉(zhuǎn)換為對象，可以這樣做。
let person = ["蛙人", 24, "male"]
let obj = {}
person.forEach(item => (obj[item] = item))
27.是否為奇偶數(shù)
let num = val => val % 2 == 0;
num(10) // ture 偶數(shù)
num(1) // false 奇數(shù)
28.檢測當(dāng)前頁面是否被隱藏
監(jiān)測當(dāng)前頁面是否被隱藏，當(dāng)切換頁面時(shí)顯示true, false就是打開狀態(tài)。一般在工作用主要用到用戶在頁面停留了多長時(shí)間。
document.addEventListener("visibilitychange", function() {
console.log(document.hidden);
});
29.去除當(dāng)前數(shù)組里的false值
把數(shù)組里面的假值過濾掉。
let list = ["", false, 1, null, undefined, "蛙人", 24]
let res = item => item.filter(Boolean)
console.log(res(list))
30.this指向
有時(shí)我們不想this是這個(gè)值，所以就要改變this指向，改變this指向有很多種，箭頭函數(shù)、bind、apply、call、我這里就演示一種，小伙伴可以根據(jù)不同業(yè)務(wù)場景來選擇使用哪種方法！
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使數(shù)組直接返回結(jié)果
有時(shí)我們處理數(shù)組時(shí)，想直接返回處理完的結(jié)果，而不是在重新組合一個(gè)數(shù)組，這時(shí)Map就登場了。
let person = [10, 20, 30]
function fn(item) {
return item + 1
}
let res = person.map(fn)
console.log(res) // [11, 21, 31]
感謝
謝謝各位在百忙之中點(diǎn)開這篇文章，希望對你們能有所幫助，如有問題歡迎各位大佬指正。