阅读 6361

《三分钟阅读》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

关注下面的标签,发现更多相似文章
评论