几个JavaScript技巧

写代码的时候，能用最简洁的代码完成任务，那岂不是很棒。今天暂时先推荐下面几个小技巧。

1. 数组去重复

var arr = [1, 2, 3, 3, 4];
console.log(...new Set(arr))
>> [1, 2, 3, 4]

介绍：其实在任何一门语言中，都不可能避免和数组，字符串、对象打交道。或者说web API接口开发返回无非就是这个。但是在接口返回之前，肯定是对其中的数组经过一系列的处理。如果一个数组很大或者一个对象很大。那么循环遍历索要花费的时间肯定很多。那么如何使用好的方法的数据结构来避免这种数据处理上的时间差就显得很重要了。

1.1 Set

set 和 array 本质的区别是：

• 数组是一个索引集合，所以数组中的值是按照 索引 排序
• set 是一个键的集合，set 不使用索引，而是使用 键 对数据排序。
  • set中的元素按照插入顺序是可迭代的，他不包含任何重复的值
  • 也就是说： set 中的每一项必须是惟一的。

至于在详细的后面专门做一篇两者的对比文章。这里只需要知道数组去重，为什么能够利用set去重的原理就OK。

2. 去除数组中值为false的值

当需要过滤数组中的值为 false 的值，如0、undefined、null、false，用如下方法：

var myArray = [1, 0 , undefined, null, false];
 myArray.filter(Boolean);
 >> [1]

这里Boolean 是函数调用,它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.
它等价于：

b = a.filter(function (x) { return Boolean(x); });

3. 创建一个空对象

有时我们需要创建一个纯净的对象, 不包含什么原型链等等. 一般创建空对象最直接方式通过字面量 {}, 但这个对象中依然存在 __proto__ 属性来指向 Object.prototype 等等.

let dict = Object.create(null);
dict.__proto__ === "undefined"

4. 对象合并或者数组合并

4.1 对象合并

let obj1 = {
    name: 'zhangsan',
  sex: 'm',
};
let obj2 = {
  class: 'p5',
  address: 'china',
};
let obj = {...obj1, ...obj2};
console.log(obj); // { name: 'zhangsan', sex: 'm', class: 'p5', address: 'china' }

4.2 数组合并

let arr1 = [1, 2, 3];
let arr2 = ['a', 'b', 'c'];
let arr = [...arr1, ...arr2];
console.log(obj); //[ 1, 2, 3, 'a', 'b', 'c' ]

5.在循环中缓存数组长度

我们在循环数组的时候，通常这样写：

for (let i = 0; i < array.length; i++){
  console.log(i);
}

在使用这种方式时，for 循环的每次迭代都会重复计算数组长度。
有时候这个会很有用，但在大多数情况下，如果能够缓存数组的长度会更好，这样只需要计算一次就够了。我们可以把数组长度复制给一个叫作 length 的变量，例如:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

6. 获取查询参数

很久之前，一直通过正则表达式来获取查询字符串值，现在可以使用 URLSearchParams API 来获取查询参数。

在不使用 URLSearchParams 我们通过正则的方式来完成获取查询参数的, 如下:

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    return r ? r[2] : null;
  }

使用 URLSearchParams 之后:

// 假设地址栏中查询参数是这样 "?post=1234&action=edit"
let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

原型链所提供的函数：