es6中比较有用的7个技巧小结
前言
ES6出来已经有好几年了，同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些，希望它们对你有用。
如果你还知道其他一些小技巧，欢迎留言~很高兴把它们补充进来。
es6有用的7个技巧
数组去重
vararr=[1,2,3,3,4]; console.log(...newSet(arr)) >>[1,2,3,4]
数组和布尔
有时我们需要过滤数组中值为false的值.例如(0,undefined,null,false),你可能不知道这样的技巧
varmyArray=[1,0,undefined,null,false]; myArray.filter(Boolean); >>[1] //是不是很简单,只需要传入一个Boolean函数即可.
创建一个空对象
有时我们需要创建一个纯净的对象,不包含什么原型链等等.一般创建空对象最直接方式通过字面量{},但这个对象中依然存在proto属性来指向Object.prototype等等.
letdict=Object.create(null); dict.__proto__==="undefined"
合并对象
在JavaScript中合并多个对象的需求一直存在,比如在传参时需要把表单参数和分页参数进行合并后在传递给后端
constpage={
current:1,
pageSize:10
}
constform={
name:"",
sex:""
}
constparams={...form,...page};
/*
{
name:"",
sex:"",
current:1,
pageSize:10
}
*
利用ES6提供的扩展运算符让对象合并变得很简单.
函数参数必须
ES6中可以给参数指定默认值,确实带来很多便利.如果需要检测某些参数是必传时,可以这么做
constisRequired=()=>{thrownewError('paramisrequired');};
consthello=(name=isRequired())=>{console.log(`hello${name}`)};
//这里将抛出一个错误,因为名字时必须
hello();
//这也将抛出一个错误
hello(undefined);
//正常
hello(null);
hello('David');
解构赋值时使用别名
解构赋值是一个非常受欢迎的JavaScript功能，但有时我们更喜欢用其他名称引用这些属性，所以我们可以利用别名来完成:
constobj={x:1};
//Grabsobj.xas{x}
const{x}=obj;
//Grabsobj.xas{otherName}
const{x:otherName}=obj;
获取查询参数
多年来，我们编写粗糙的正则表达式来获取查询字符串值，但那些日子已经一去不复返了;现在我们可以通过URLSearchParamsAPI来获取查询参数
在不使用URLSearchParams我们通过正则的方式来完成获取查询参数的,如下:
functiongetQueryString(name){
varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");
varr=window.location.search.substr(1).match(reg);
returnr?r[2]:null;
}
使用URLSearchParams之后:
//假设地址栏中查询参数是这样"?post=1234&action=edit"
varurlParams=newURLSearchParams(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"
相比之前使用起来更加容易了
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。