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 相关文章推荐
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
js获得鼠标的坐标值的方法
Mar 13 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
layui表格实现代码
May 20 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
详解react组件通讯方式(多种)
May 06 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
一个用php3编写的简单计数器
2006/10/09 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
2019/02/15 Javascript
js代码实现轮播图
2020/05/04 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
Python中标准模块importlib详解
2017/04/16 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python对一个数向上取整的实例方法
2020/06/18 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
招聘与培训专员岗位职责
2014/01/30 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
继续教育个人总结
2015/03/03 职场文书
企业工会工作总结2015
2015/05/13 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python