《三分钟阅读》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"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"
复制代码

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