JS經常使用小技巧

一、數組去重

let arr = [1,2,2,3,3,4,5,6]
let newArr = [...new Set(arr)] // [1,2,3,4,5,6]
//或者 Array.from(new Set(arr))
複製代碼

---

二、String強制轉換爲Number

'123' * 1            // 123
'china' * 1            // NaN
null * 1            // 0
undefined * 1    // NaN

複製代碼

+ '666'            // 666
+ ''                    // 0
+ null              // 0
+ 'china'               // NaN
+ undefined    // NaN

複製代碼

當 + 解釋爲鏈接操做符,而非加法操做符，可使用兩個 ~~ 替換。對整數來講 ~~ 運算結果與 Math.floor( ) 運算結果相同（一個波浪號 ~ ，被稱爲「按位取反運算符」，等價於 - n - 1。因此~15 = -16.）

---

三、includes

let arr = [1,2,3,4,5]
console.log(arr.includes(1) == arr.indexOf(1)!=-1)//true
複製代碼

判斷字符串或數組中是否存在某個元素，使用includes代替indexOf

---

四、URLSearchParams

基本用法

let url = new URLSearchParams(location.search.slice(1));
複製代碼

使用URL構造

let location = 'http://www.baidu.com?id=2'
 let _url = (new URL(location)).searchParams;
 console.log(_url.get("id")) //2
複製代碼

獲取/設置參數

• get(key)：獲取參數
• set(key)：設置參數
• append(key,value)：

---

五、對象去重合並

Object.assign

var obj1 = { a : 1 };

var obj2 = { b : 2 };

var obj3 = { c : 3 };

console.log(Object.assign(obj1, obj2, obj3))//{ a : 1, b : 2, c:3 }
複製代碼

擴展運算符

let obj1 = { a : 1, b : 2 };
let obj2 = { a : 2, c : 3, d : 4 };
let newObj = { ...obj1,...obj2 };
console.log(newObj) //{a: 2, b: 2, c: 3, d: 4}
複製代碼

---

六、平鋪多維數組

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 做爲深度，展開任意深度的嵌套數組
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]
複製代碼

flat() 方法會移除數組中的空項:

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
複製代碼

七、Boolean過濾數組中的全部假值

let arr = [ 1 , null , false , 2 , 3 , NaN , '' ]
console.log(a.filter(Boolean)) //[1,2,3]
複製代碼

八、取整

對一個數字| 0能夠取整，負數也一樣適用，num | 0

1.3 | 0 // 1
-1.9 | 0 // -1
複製代碼

九、|| 和 && 的妙用

// 場景 1
function b(a) {
  if (a) {
    return a
  } else {
    return ''
  }
}
// 場景 2
function b(a) {
  return a || ''
}
複製代碼

上面是 || 的用法，也叫作短路處理。常見於 if 條件中，可是他其實也能夠直接用於語句中。當第一個參數爲 true 就會取第一個參數的值，當第一個參數不爲 true 就會取第二個參數的值。&& 正好與 || 相反。第一個參數 爲 true 會取第二個參數的值,常見用&&代替if-else,例如:

if(a >=5){ 
 alert("你好"); 
} 
//a >= 5 && alert("你好"); 
複製代碼

十、用對象代替 switch / if

公共內容:
let a = 'VIP'

場景 1
if (a === 'VIP') {
  return 1
} else if (a === 'SVIP') {
  return 2
}

場景 2
switch(a) {
  case 'VIP'
    return 1
    break
  case 'SVIP'
    return 2
    break
}

場景 3
let obj = {
  VIP: 1,
  SVIP: 2
}
複製代碼

可用這種方法把狀態映射中文含義，例如支付狀態一般獲取的是 1， 2，3，4 這種值，可是列表要求顯示相應的中文狀態 未支付 | 支付中 | 已退款等等

十一、用解構賦值過濾對象屬性

// 過濾掉對象中 inner 和 outer 屬性
const { inner, outer, ...restProps } = {
  inner: 'This is inner',
  outer: 'This is outer',
  v1: '1',
  v2: '2',
  v4: '3'
};
console.log(restProps);
// {v1: "1", v2: "2", v4: "3"}
複製代碼

十二、數字金額千分位格式化

let num = 123455678;
let num1 = 123455678.12345;

let formatNum = num.toLocaleString('en-US');
let formatNum1 = num1.toLocaleString('en-US');

console.log(formatNum); // 123,455,678
console.log(formatNum1); // 123,455,678.123
複製代碼