前言
初衷： 整理一下工作中常用的JavaScript小技巧分享給大家嚷量，希望能幫助到各位小伙伴們，在工作中提升開發(fā)效率逆趣。
適合人群： 前端初級開發(fā)蝶溶，大佬繞道。
1.函數(shù)參數(shù)默認值
在Es6之前宣渗，我們要寫參數(shù)默認值的話抖所，還需要在函數(shù)體內寫一堆判斷邏輯，而Es6之后新出參數(shù)默認值語法痕囱，我們來看一下田轧。
function person(name, age, sex = "male") {
console.log(name, age, sex) // 蛙人 24 male
}
person("蛙人", 24)
2.數(shù)組求和使用reduce
之前我們都使用for循環(huán)進行遍歷求和，也可以使用reduce方法進行求和鞍恢，簡潔代碼傻粘。
let nums = [1,22,31,4,56]
let sum = nums.reduce((prev, cur) => prev + cur, 0)
3.廢棄if else俠
我們寫判斷時每窖，都會使用if else但當業(yè)務越來越龐大時有好幾種狀態(tài)時，這樣代碼太冗余了弦悉，我們做一下簡化窒典。
if(xxx = 1) {
xxx = "啟用"
} else if(xxx = 2) {
xxx = "停用"
}
// ...省略
// 廢除以上寫法
let operation = {
1: "啟用",
2: "停用"
3: "注銷",
4: "修改"
5: "詳情"
}
xxx = operation[status] // 代碼簡潔清晰
4.交換變量
在Es6之前，我們交互變量值時得使用第三個變量警绩，當Es6出現(xiàn)解構賦值時崇败，我們可以非常快速的交換變量肩祥。
let x = 10;
let y = 20;
[x, y] = [y, x];
5.數(shù)組去重
在Es6之前，我們數(shù)組去重都使用for循環(huán)遍歷或者indexOf等缩膝，但Es6出現(xiàn)了Set結構混狠，非常便捷。
不明白Set結構可以看我上一篇文章哦 《理解數(shù)據(jù)結構之Set疾层，只要5分鐘将饺！》
let arr = [1,1,2,434,2,1]
console.log([...new Set(arr)]) // 1 2 434
6.快速獲取URL地址欄參數(shù)
有時候我們想獲取地址欄上參數(shù)，都是手寫方法痛黎，有一個Api實用的方法來處理 URL 的查詢字符串予弧。
let params = new URLSearchParams(location.search);
params.get("xxx") // 獲取地址欄參數(shù)
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出現(xiàn)了模板字符串使用 ``仅仆，然后${}里面綁定變量器赞，使我們開發(fā)非常的便捷。
let name = "蛙人"
console.log(`hello ${name}`)
console.log(`<p>${name}</p>`)
11.獲取對象里指定的值
使用對象解構獲取對象值非常簡潔墓拜，不用在向傳統(tǒng)那樣使用.語法一個一個去獲取
const person = {name: "蛙人", age: 24, sex: "male"};
let { age, sex } = person
console.log(age, sex) // 24 male
12.快速將字符串轉換為數(shù)組
不再使用字符串split方法港柜，使用擴展運算符可以快速轉換為數(shù)組。
let str = "abcdefg"
console.log([...str]) // ["a", "b", "c", "d", "e", "f", "g"]
13.使用三目運算判斷值
如果只有兩種狀態(tài)的情況強烈推薦使用三目運算咳榜，拋棄if else夏醉。
let status = 1;
status = status == 1 ? "男" : "女"
14.??運算符
??運算符只有前面的值是undefined才會執(zhí)行，工作中有的情況下使用贿衍，我們來看一下授舟。
let status = undefined;
let text = status ?? "暫無"
console.log(text) // 暫無
15.?.運算符
?.運算符這在有時候處理對象時非常有用，看下面案例贸辈，person.name返回undefined然后在調用toString這時肯定會報錯释树，這時使用?.運算符就不會產(chǎn)生錯誤肠槽，?.運算符是只有在當值不是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秸仙，合并對象如果對象里面有重復的值，則后面覆蓋前面桩盲，可以接收無限參數(shù)寂纪。在工作中也是經(jīng)常使用。
let person = {name: "蛙人", age: 24}
let obj = Object.assign({}, person)
console.log(obj) // {name: "蛙人", age: 24}
18.數(shù)組里的值是否滿足一個要求
當前方法只要數(shù)組里面有一個值符合需求赌结，就返回true捞蛋，否則false。
let list = [1,2,2,2,2,2]
let res = list.some(item => item > 1)
console.log(res) // true
19.數(shù)組里的值是否都滿足要求
我們之前使用for遍歷在判斷當前數(shù)組里的值是否全符合要求柬姚，還要聲明一個變量來進行累計拟杉，直接使用every當全部滿足需求時返回true，否則返回false
let list = [1,2,2,2,2,2]
let res = list.every(item => item > 1)
console.log(res) // false
20.隨機打亂數(shù)組順序
有時我們場景有需要將一個數(shù)組順序進行打亂量承。
let list = [1,2,'蛙人', 1, 34, 3, 12]
let res = list.sort(() => Math.random() - 0.5)
console.log(res)
21.事件委托
之前我們有100個li元素搬设，都要綁定一個onclick事件，這樣性能不怎么好撕捍，我們可以通過事件委托實現(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ù)組轉換為真數(shù)組
偽數(shù)組不能調用真數(shù)組對象上的方法，所以得將偽數(shù)組轉換為真數(shù)組，獲取js元素是偽數(shù)組。
document.querySelectAll("div") // NodeList[div, div, div, div]
[...document.querySelectorAll('div')] // 轉換為真數(shù)組
Array.from(document.querySelectorAll('div')) // 轉換為真數(shù)組
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.數(shù)組轉換為對象
在有的情況需要將數(shù)組轉換為對象蚤霞，可以這樣做酗失。
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.檢測當前頁面是否被隱藏
監(jiān)測當前頁面是否被隱藏，當切換頁面時顯示true, false就是打開狀態(tài)昧绣。一般在工作用主要用到用戶在頁面停留了多長時間规肴。
document.addEventListener("visibilitychange", function() {
console.log(document.hidden);
});
29.去除當前數(shù)組里的false值
把數(shù)組里面的假值過濾掉。
let list = ["", false, 1, null, undefined, "蛙人", 24]
let res = item => item.filter(Boolean)
console.log(res(list))
30.this指向
有時我們不想this是這個值夜畴，所以就要改變this指向拖刃，改變this指向有很多種，箭頭函數(shù)贪绘、bind兑牡、apply、call税灌、我這里就演示一種均函，小伙伴可以根據(jù)不同業(yè)務場景來選擇使用哪種方法亿虽！
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ù)組直接返回結果
有時我們處理數(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]
感謝
謝謝各位在百忙之中點開這篇文章如迟，希望對你們能有所幫助收毫，如有問題歡迎各位大佬指正。
我是蛙人殷勘，如果覺得寫得還行的話此再，請點個贊吧。
感興趣的小伙伴可以加入 [ 前端娛樂圈交流群 ] 歡迎大家一起來交流討論
