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实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
js实现多张图片每隔一秒切换一张图片
Jul 29 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
Destoon模板制作简明教程
2014/06/20 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
初步理解Python进程的信号通讯
2015/04/09 Python
简单解决Python文件中文编码问题
2015/11/22 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
django中的图片验证码功能
2019/09/18 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
大学自我评价
2014/02/12 职场文书
骨干教师考核方案
2014/05/09 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
设备收款委托书范本
2014/10/02 职场文书
师范生教育见习总结
2015/06/23 职场文书
《失物招领》教学反思
2016/02/20 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
Java实现聊天机器人完善版
2021/07/04 Java/Android