人一懒起来啊,简直是………上一次发文章都是两个月前了
这次就收集一些ES6中的HACK吧!讲真的(会不会是..)…掌握这些技巧。能让我们少写很多行代码哦
1. 变量交换
let a = 'world', b = 'hello'[a, b] = [b, a]console.log(a) // -> helloconsole.log(b) // -> world// 双击666
2. 接收函数返回的多个结果
使用async/await,函数会把返回值放在一个数组中。使用数组解构后就可以把返回值直接赋给相应的变量。
const [user, account] = await Promise.all([fetch('/user'),fetch('/account')])
3. 字符串拼接
let a = 'hello',b = 'world';let _string = `${a} ${b}`console.log(_string); // "hello world"
4. 函数参数默认值
const notify = (msg, {type='info', timeout, close=true} = {}) => {// display notificationconsole.log(msg, type, timeout, close)}notify('Hi!'); // Hi! info undefined truenotify('Hi!', {type: 'error'}); // Hi! error undefined truenotify('Hi!', {type: 'warn', close: false}); // Hi! warn undefined false
5. 数组
代码不多一行搞定
// 最大值const max = (arr) => Math.max(...arr);max([1, 2, 3]) // outputs: 321// 求和const sum = (arr) => arr.reduce((a, b) => (a + b), 0)sum([1, 2, 3, 4]) // output: 10// 拷贝let array1 = [1, "3", { a: 1}, 666];let copyArray = [ ...array1 ];console.log(copyArray) // [1, "3", {…}, 666]// 数组连接const one = ['a', 'b', 'c']const two = ['d', 'e', 'f']const three = ['g', 'h', 'i']// Old way #1const result = one.concat(two, three)// Old way #2const result = [].concat(one, two, three)// Newconst result = [...one, ...two, ...three]
6. 去重
通过 Set 可以轻易的实现数组去重
function dedupe(array) {return [...new Set(array)];}let noDupes = dedupe([1, 2, "a", "a", { obj1: 999}, 7, 3, 1], { obj1: 999});console.log(noDupes); // [1, 2, "a", { obj1: 999}, 7, 3]
通过数组创建 Set 会删除数组中的重复项,而spread运算符会将 Set 转换为 Array
7. 强制要求参数
const throwIfMissing = () => {throw new Error('Missing parameter');}const func = (requiredParam = throwIfMissing()) => {// some implementation}
8. 删除对象中不需要参数
let { boy1, boy2, ...others } = { boy1: "sunshine", boy2: "sunshine", girl1: "beautiful", girl2: "very beautiful", girl2: "very beautiful", girl2: "very very beautiful" };console.log(others) // { girl1: "beautiful", girl2: "very beautiful", girl2: "very beautiful", girl2: "very very beautiful"}
9. 动态属性名
let name = "mael";let me = {[`my-name-is-${name}`]: name,age: 24};
10. for 循环
let a = ['a', 'b', 'c', 'd' ];// ES6for ( var val of a ) {console.log( val );} // "a" "b" "c" "d"// ES5for ( var idx in a ) {console.log( idx );} // 0 1 2 3
11. 定义抽象基类
抽象基类是一种专门用于继承的类。它不能直接构建。主要用例是继承的类具有公共接口。但是,class 尚未利用abstract关键字来创建抽象基类,我们可以使用new.target来模拟。
class Note {constructor() {if (new.target === Note) {throw new Error('Note cannot be directly constructed.')}}}class ColorNote extends Note {}let note = new Note(); // error!let colorNote = new ColorNote(); // ok
12. 定义惰性范围函数
我们可以使用 generators 来创建一个惰性函数
function* range(start, count) {for (let delta = 0; delta < count; delta++) {yield start + delta;}}for (let teenageYear of range(13, 7)) {console.log(`Teenage angst @ ${teenageYear}!`);}
写于 2018年09月04日Javascript Web 2498
如非特别注明,文章皆为原创。
转载请注明出处: https://www.liayal.com/article/5b8dfc9c7368ac07250bd11a
记小栈小程序上线啦~搜索【记小栈】或【点击扫码】体验


记小栈09-11 2018
当初想拼字符串来着
alsotang09-11 2018
去重那个例子,函数dedupe的参数数量在定义和调用时不一致。
admin09-11 2018
动态属性名那块,不用模板字符串呀,直接 [] 即可,比如文中 [name] === [`${name}`]