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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 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批量删除数据
2007/01/18 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
jQuery的promise与deferred对象在异步回调中的作用
2016/05/03 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
社区工作者先进事迹
2014/01/18 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
评职称个人总结
2015/03/05 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS