es6中比较有用的7个技巧小结


Posted in Javascript onJuly 12, 2019

前言

ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用。

如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来。

es6有用的7个技巧

数组去重

var arr = [1, 2, 3, 3, 4];
console.log(...new Set(arr))
>> [1, 2, 3, 4]

数组和布尔

有时我们需要过滤数组中值为 false 的值. 例如(0, undefined, null, false), 你可能不知道这样的技巧

var myArray = [1, 0 , undefined, null, false];
myArray.filter(Boolean);
> > [1]
//是不是很简单, 只需要传入一个 Boolean 函数即可.

创建一个空对象

有时我们需要创建一个纯净的对象, 不包含什么原型链等等. 一般创建空对象最直接方式通过字面量 {}, 但这个对象中依然存在 proto 属性来指向 Object.prototype 等等.

let dict = Object.create(null);
 
dict.__proto__ === "undefined"

合并对象

在JavaScript中合并多个对象的需求一直存在, 比如在传参时需要把表单参数和分页参数进行合并后在传递给后端

const page = {
 current: 1,
 pageSize: 10
}
 
const form = {
 name: "",
 sex: ""
}
 
const params = {...form, ...page};
 
/*
 {
  name: "",
  sex: "",
  current: 1,
  pageSize: 10
 }
*

利用ES6提供的扩展运算符让对象合并变得很简单.

函数参数必须

ES6中可以给参数指定默认值,确实带来很多便利. 如果需要检测某些参数是必传时,可以这么做

const isRequired = () => { throw new Error('param is required'); };
 
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
 
// 这里将抛出一个错误,因为名字时必须
hello();
// 这也将抛出一个错误
hello(undefined);
 
// 正常
hello(null);
hello('David');

解构赋值时使用别名

解构赋值是一个非常受欢迎的JavaScript功能,但有时我们更喜欢用其他名称引用这些属性,所以我们可以利用别名来完成:

const obj = { x: 1 };
 
// Grabs obj.x as { x }
const { x } = obj;
 
// Grabs obj.x as { otherName }
const { x: otherName } = obj;

获取查询参数

多年来,我们编写粗糙的正则表达式来获取查询字符串值,但那些日子已经一去不复返了; 现在我们可以通过 URLSearchParams API 来获取查询参数

在不使用 URLSearchParams 我们通过正则的方式来完成获取查询参数的, 如下:

function getQueryString(name) {
 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 return r ? r[2] : null;
 }

使用 URLSearchParams 之后:

// 假设地址栏中查询参数是这样 "?post=1234&action=edit"
 
var urlParams = new URLSearchParams(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"

相比之前使用起来更加容易了

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
浅谈React高阶组件
Mar 28 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
javascript实现简易聊天室
Jul 12 #Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
微信小程序简单的canvas裁剪图片功能详解
Jul 12 #Javascript
小程序实现分类页
Jul 12 #Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
You might like
用PHP读取RSS feed的代码
2008/08/01 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP实现WebService的简单示例和实现步骤
2015/03/27 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
jQuery webuploader分片上传大文件
2016/11/07 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
Vuex的初探与实战小结
2018/11/26 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
解决pandas.DataFrame.fillna 填充Nan失败的问题
2018/11/06 Python
python sort、sort_index方法代码实例
2019/03/28 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
创业计划书的写作技巧及要点
2014/01/31 职场文书
中学家长会邀请函
2014/02/03 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
文明礼仪标语
2014/06/13 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书