JS常用小技巧

1、数组去重

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))

---

2、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.）

---

3、includes

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

判断字符串或数组中是否存在某个元素，使用includes代替indexOf

---

4、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)：

---

5、对象去重合并

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}

---

6、平铺多维数组

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]

7、Boolean过滤数组中的所有假值

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

8、取整

对一个数字| 0可以取整，负数也同样适用，num | 0

1.3 | 0 // 1
-1.9 | 0 // -1

9、|| 和 && 的妙用

// 场景 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("你好"); 

10、用对象代替 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 这种值，但是列表要求显示相应的中文状态 未支付 | 支付中 | 已退款等等

11、用解构赋值过滤对象属性

// 过滤掉对象中 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"}

12、数字金额千分位格式化

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