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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
深入Javascript函数、递归与闭包(执行环境、变量对象与作用域链)使用详解
May 08 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 Javascript
Vuex的热更替如何实现
Jun 05 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
vue+springboot+element+vue-resource实现文件上传教程
2020/10/21 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
详解python对象之间的交互
2020/09/29 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
销售找工作求职信
2013/12/20 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
2015年党总支工作总结
2015/05/25 职场文书
SpringBoot项目中控制台日志的保存配置操作
2021/06/18 Java/Android