《三分钟阅读》7个有用的JavaScript技巧

三分钟阅读：给自己3分钟的时间，拾起自己遗漏的知识点，第2期
文章引用：davidwalsh.name/javascript-…
作者：David Walsh
解读：skinner

数组去重

var j = [...new Set([1, 2, 3, 3])];
>> [1,2,3]

这个去重方法简单的令人陶醉

过滤空值

空值指的是没有具体意义的一些值，比如0，undefined，null，false，空字符串等

let res = [1,2,0,undefined,null,false,''].filter(Boolean);
>> 1,2

创建空对象

创建一个空对象，我们可能大多数时候会使用对象字面量为{}的方式，然而这种方式创建的对象并不是纯粹的，它仍然有__proto__属性以及继承自Object原型的一些方法，这种方式创建的对象容易被修改，比如：

let o = {};
let p = Object.create(null);
Object.prototype.say = function(){
    console.log('hello')
}
console.log(o.say)
console.log(p.say)

>> f(){}
>> undefined

可以看到通过{}创建的对象，很容易就被修改了，而通过Object.create(null)这种方式创建的对象就很纯粹，没有任何属性和对象，非常干净。

合并对象

通过...延展操作符可以很容易的合并对象

const person = { a:1 };
const tools = { b:2 };
const attributes = { c:3 };

const summary = {...person, ...tools, ...attributes};

>> {a:1,b:2,c:3}

不得不说...延展操作符真是好东西啊！

参数非空检测

这个方法特别适用于封装函数时使用，也许我们知道可以在函数参数中直接指定一个默认值，像下面这样：

function test(parma = 'default'){}

然而，我们也可以直接赋值一个函数，如果没有传参，我们就直接抛出错误提醒，如果一个组件里面有很多方法，我们就可以直接复用，而不用每个方法里面都去做非空判断处理。

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
// 抛出一个错误，因为参数没有传
hello()；
// 没有问题
hello('hello')

解构添加别名

在导入多个模块的时候，为防止引用的组件重名，我们可以在引入时直接赋值一个别名

const obj = { x: 1 };

const { x: otherName } = require('module');

使用的时候就可以直接使用otherName

获取查询字符串参数

获取url里面的参数值或者追加查询字符串，在这之前，我们一般通过正则匹配处理，然而现在有一个新的api，具体详情可以查看这里，可以让我们以很简单的方式去处理url。

假如我们有这样一个url，"?post=1234&action=edit"，我们可以这样处理这个url

var urlParams = new URLSearchParams('?post=1234&action=edit');

console.log(urlParams.has('post')); 
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"

urlParams.append('active', '1')
console.log(urlParams); // "?post=1234&action=edit&active=1"

是不是很方便？那浏览器支持程度如何呢？通过这个地址查看，可以发现大部分浏览器都支持哦！，如果碰到不支持的情况，这里还有个polyfill。

作者：skinner
链接：https://juejin.im/post/5cc6f07ce51d456e3a5f089b

求点赞，求关注~