ES6的7个实用技巧

时间: 2018-01-17阅读: 1697标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

使用ES6让你的React代码提升到一个新档次

ES6使您的代码更具表现力和可读性。而且它与React完美配合!现在您已了解更多基础知识:现在是时候将你的ES6技能提升到一个新的水平!嵌套props解构、 传下所有props、props解构、作为参数的函数、列表解构

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

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

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

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

Rest/Spread 属性_探索 ES2018 和 ES2019

Rest/Spread 属性:rest操作符在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。

node可以用es6语法吗?

Node本身已经支持大部分ES6语法,但是import export,以及async await(Node 8 已经支持)等一些语法,我们还是无法使用。为了能使用这些新特性,我们就需要使用babel把ES6转成ES5语法。

九个超级实用的 ES6 特性

展开操作符顾名思义,用于对象或数组之前的展开操作符(…),将一个结构展开为列表。剩余参数将剩余的参数收入数列。JavaScript 的特性是参数数目很灵活

ES6 Iterators

本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,

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

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

es6 Reflect对象

Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有:将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法。如:Object.defineProperty,修改某些object方法返回的结果。让Object的操作都变成函数行为。

对ES6的yield示例分析

这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知道javascript函数执行是顺序的,中途没有暂停,等待消息只能通过回调或者settimeout等延迟检查来完成。

点击更多...

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