分享ES6的7个实用技巧


Posted in Javascript onJanuary 18, 2018

Hack #1 交换元素

利用 数组解构来实现值的互换

let a = 'world', b = 'hello'
[a, b] = [b, a]
console.log(a) // -> hello
console.log(b) // -> world

Hack #2 调试

我们经常使用 console.log()来进行调试,试试 console.table()也无妨。

const a = 5, b = 6, c = 7
console.log({ a, b, c });
console.table({a, b, c, m: {name: 'xixi', age: 27}});

Hack #3 单条语句

ES6时代,操作数组的语句将会更加的紧凑

// 寻找数组中的最大值
const max = (arr) => Math.max(...arr);
max([123, 321, 32]) // outputs: 321
// 计算数组的总和
const sum = (arr) => arr.reduce((a, b) => (a + b), 0)
sum([1, 2, 3, 4]) // output: 10

Hack #4 数组拼接

展开运算符可以取代 concat的地位了

const one = ['a', 'b', 'c']
const two = ['d', 'e', 'f']
const three = ['g', 'h', 'i']
const result = [...one, ...two, ...three]

Hack #5 制作副本

我们可以很容易的实现数组和对象的 浅拷贝

const obj = { ...oldObj }
const arr = [ ...oldArr ]

Hack #6 命名参数???

解构使得函数声明和函数的调用更加可读

// 我们尝尝使用的写法
const getStuffNotBad = (id, force, verbose) => {
 ...do stuff
}
// 当我们调用函数时, 明天再看,尼玛 150是啥,true是啥
getStuffNotBad(150, true, true)
// 看完本文你啥都可以忘记, 希望够记住下面的就可以了
const getStuffAwesome = ({id, name, force, verbose}) => {
 ...do stuff
}
// 完美
getStuffAwesome({ id: 150, force: true, verbose: true })

Hack #7 Async/Await结合数组解构

数组解构非常赞!结合 Promise.all和 解构和 await会使代码变得更加的简洁

const [user, account] = await Promise.all([
 fetch('/user'),
 fetch('/account')
])

总结

以上所述是小编给大家介绍的分享ES6的7个实用技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
JS 的应用开发初探(mootools)
Dec 19 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
TypeScript开发Node.js程序的方法
Apr 30 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
vue 动态修改a标签的样式的方法
Jan 18 #Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 #Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
Nuxt.js实战详解
Jan 18 #Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 #Javascript
ajax请求data遇到的问题分析
Jan 18 #Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 #Javascript
You might like
php去除字符串换行符示例分享
2014/02/13 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
python实现百度关键词排名查询
2014/03/30 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
详解python中init方法和随机数方法
2019/03/13 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
软件测试面试题
2015/10/21 面试题
工业设计专业推荐信
2013/10/29 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
银行求职信个人范文
2013/12/16 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
论文评语大全
2014/04/29 职场文书
学校端午节活动总结
2015/02/11 职场文书
新教师教学工作总结
2015/08/14 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS