ES6的7个实用技巧

更新日期: 2018-01-17阅读量: 1902标签: es6
来源:7 Hacks for ES6 Developers


1 交换元素

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

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


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}});


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


4 数组拼接

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

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

const result = [...one, ...two, ...three]


5 制作副本

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

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


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 })


7 Async/Await结合数组解构

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

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/364

你真的了解ES6的Set,WeakSet,Map和WeakMap吗?

之前在学习 ES6 的时候,看到 Set 和 Map,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构。

ES6新特性:JavaScript中的Reflect对象

Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ;

ES6中的函数(函数参数、默认值、箭头函数)

数参数也可以解构赋值。函数参数可以设置默认值,可以预设实参。函数参数的默认值可以是函数调用。箭头函数的语法:参数=>函数体箭头函数的this是固定的,指向了父级作用域的this。箭头函数没有arguments,可以用rest参数代替。

ES6的Map和Set的使用,以及weakMap的一点理解

Map可以用来存储键值对,在一定程度上扩展了Object的内容。在插入内容时,map实例会维护插入顺序,遍历出来的顺序是插入顺序,而object的遍历顺序可能不是插入顺序。所以下面三个方法作用是合object中一样的

ES6中对象新增了哪些扩展?

ES6中,当对象键名与对应值名相等的时候,可以进行简写;ES6 允许字面量定义对象时,将表达式放在括号内;this 关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字 super ,指向当前对象的原型对象

ES6常见题

ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化ECMAScript6,即ES6,是ECMAScript的第六次修订,于2015年完成,也称ES2015ES6是继ES5之后的一次改进

基于ES6的tinyJquery

Query作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落。用ES6写了一个基于class简化版的jQuery,包含基础DOM操作,支持链式操作...

Js ES6代理的实际用例

元编程是一种强大的技术,使你能够编写可以创建其他程序的程序。ES6借助代理和许多类似功能,使在JavaScript中利用元编程变得更加容易。ES6 Proxy(代理) 有助于重新定义对象的基本操作,从而为各种可能性打开了大门。

es6 class

构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。

ES5和ES6对象导出和导入

如果模块中使用 export default {},只能通过 import 对象名称 from 模块路径 ,不能通过 import {对象名称} from 模块路径。如果使用 import {对象名称} from 模块路径 导出具体某个对象或者方法名称

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!