收集到的22個實用的JavaScript小技巧，你一定用得到

1、陣列去重

const arr = [1, 2, 2, 3, 4, 5, 5, 3]
//方式1：
const newArr1 = [...new Set(arr)]
//方式2
const newArr2 = arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
console.log(newArr1) //[1, 2, 3, 4, 5]
console.log(newArr2) //[1, 2, 3, 4, 5]

2、生成一個[1-100]的陣列

// 方式1
const arr1 = [...Array(100).keys()] 
// 方式2
const arr2 = Array.from(Array(100), (e, i) => i + 1)

3、獲取陣列中最后一個元素

var array = [1,2,3,4,5,6];
console.log(array.slice(-1)); // [6]
console.log(array.slice(-2)); // [5,6]
console.log(array.slice(-3)); // [4,5,6]

tip： 方法 slice(begin,end) 用來獲取 begin 和 end 之間的陣列元素，如果你不設定end引數，將會將陣列的默認長度值當作 end 值，但有些同學可能不知道這個函式還可以接受負值作為引數，如果你設定一個負值作為 begin 的值，那么你可以獲取陣列的最后一個元素

4、陣列截斷

var array = [1,2,3,4,5,6];
console.log(array.length); // 6
array.length = 3;
console.log(array.length); // 3
console.log(array); // [1,2,3]

tip： 這個小技巧主要用來鎖定陣列的大小，如果用于洗掉陣列中的一些元素來說，是非常有用的，例如，你的陣列有10個元素，但你只想只要前五個元素，那么你可以通過array.length=5來截斷陣列

5、合并陣列

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

6、洗掉陣列最后兩個元素

    let a = [1, 2, 4, 5];
    a.length = a.length - 2;
    console.log(a.length); // 2

7、陣列元素的洗牌

var list = [1,2,3];
console.log(list.sort(function() { Math.random() - 0.5 })); // [2,1,3]

8、多維陣列扁平化

const arr = [1, 2, 3, [4, [5, 6, [7,8]]]];
// 方式1：
console.log(arr.flat(Infinity));  //[1, 2, 3, 4, 5, 6, 7, 8]
// 方式2：
console.log(arr.join().split(','));  //['1', '2', '3', '4', '5', '6', '7', '8']
// 方式3：
console.log(arr.toString().split(','));  //['1', '2', '3', '4', '5', '6', '7', '8']
// 在查閱資料中，博主發現原來join()、toString()函式式可以跨越層級的，于是便有了方式2、 3

9、求兩個陣列交集和差集

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let intersect = new Set([...a].filter(x => b.has(x))); // 交集
let difference = new Set([...a].filter(x => !b.has(x)));  // 差集

10、獲取陣列最大值和最小值

let numbers = [1, 3, 5, 5, 6, -3, 10]
let max = Math.max(...numbers)  //最大值
let min = Math.min(...numbers)   //最小值
console.log(max); // 10
console.log(min); //-3

11、字串反轉

 let str = "hello world";
 console.log([...str].reverse().join(""));  // dlrow olleh

12、統計字串中相同字符出現的次數

let str = 'aaabbbccddeegggggggllllssgjwd';
let strInfo = str.split('').reduce((p, c) => (p[c]++ || (p[c] = 1), p), {});
console.log(strInfo)  //{a: 3, b: 3, c: 2, d: 3, e: 2, g: 8, j: 1, l: 4, s: 2, w: 1}

13、用運算子 “||” 來設定默認值

let a = 111
let b = a || 'default value'
// 如果a有值 則顯示a的值 如果沒有值則顯示默認的值

13、比“||”運算子更優的“??”

let a = a ?? 'default value'
// 與邏輯或運算子（||）不同，邏輯或運算子會在左側運算元為假值時回傳右側運算元，
也就是說，如果使用 || 來為某些變數設定默認值，可能會遇到意料之外的行為，比如為假值（例如，'' 或 0）時，

14、隱式轉義（字串轉數字）

let a = '1';
console.log(Number(a)); // 1
console.log(+a);  //1
// 使用隱式轉義可更簡單快速

15、隱式轉義（字串轉數字）數字金額千分位格式化

let a = 123456789;
console.log(a.toLocaleString('en-US')) //123,456,789

16、雙位運算子

Math.floor(5.9) === 5  //true
簡寫后
~~5.9 === 5  //true
// 可以使用雙位運算子來替代 Math.floor( )，雙否定位運算子的優勢在于它執行相同的操作運行速度更快，

17、小數取整

let num = 123.456

// 常用方法
console.log(parseInt(num)); // 123
// 按位或
console.log(num | 0); // 123
// “雙按位非”運算子
console.log(~~ num); // 123
// 左移運算子
console.log(num << 0); // 123
// 按位異或
console.log(num ^ 0); // 123

18、替換所有

var string = "john john";
console.log(string.replace(/hn/, "ana")); // "joana john"
console.log(string.replace(/hn/g, "ana")); // "joana joana"

tip：String.replace()函式允許你使用字串或正則運算式來替換字串，本身這個函式只替換第一次出現的字串，不過你可以使用正則表達多中的/g來模擬replaceAll()函式功能：

19、使用 Object.is()作比較

Object.is(0 , 0); // true

20、從陣列中獲取唯一值

let uniqueArray = [...new Set([1, 2, 3, 3,3,"school","school",'ball',false,false,true,true])];
    console.log(uniqueArray) // [1, 2, 3, 'school', 'ball', false, true]

21、排序數字陣列

console.log([0,10,4,9,123,54,1].sort((a,b) => a-b)) //  [0, 1, 4, 9, 10, 54, 123]

tip：JavaScript陣列帶有內置的sort方法，默認情況下，此sort方法將陣列元素轉換為字串，并對其進行字典排序，在對數字陣列進行排序時，這可能會導致問題，因此，這里是解決此問題的簡單解決方案，

22、禁用右鍵

< body oncontextmenu = “ return false” >    < div > < / div>< / body>

tip： 你可能曾經想阻止用戶在你的網頁上單擊滑鼠右鍵，盡管這種情況很少見，但是在某些情況下你可能需要此功能，