這些工做中用到的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三者區別》