数组去重
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
求点赞,求关注~