分享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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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者的疑难问答(1)
2006/10/09 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
js判断上传文件后缀名是否合法
2016/01/28 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python列表(list)常用操作方法小结
2015/02/02 Python
python实现分析apache和nginx日志文件并输出访客ip列表的方法
2015/04/04 Python
Python日志模块logging简介
2015/04/13 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python玩转Excel的读写改实例
2019/02/22 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Django实现跨域的2种方法
2019/07/31 Python
python多线程同步之文件读写控制
2021/02/25 Python
python 实现性别识别
2020/11/21 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
项目施工员岗位职责
2014/03/09 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
学生退学证明
2015/06/23 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python