ES6 中可以提升幸福度的小功能

前端之家收集整理的这篇文章主要介绍了ES6 中可以提升幸福度的小功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、变量解构赋值的用途

1)交换变量的值

2)从函数返回多个值

3)提取JSON数据

4)输入模块的指定方法

加载模块时,往往需要指定输入的方法,解构赋值使得输入语句非常清晰

5) 数组复制的功能

在es5中,开发者经常使用 concat() 方法克隆数组:

concat() 方法的设计初衷是连接两个数组,如果调用时不传递参数就会返回当前数组的副本。在es6中可以通过不定元素的语法来实现相同的目标:

6) 结合Set集合,创建一个无重复元素的数组

7) 使用apply 把两个数据合并成一个

二、函数的用处(常见就不多说了)

1)创建立即执行函数表达式

在这段代码中,立即执行函数表达式创建了一个包含getName() 方法的新对象,将参数 name 作为该对象的一个私有成员返回给函数调用者。

只要箭头函数包裹在小括号里,就可以用它实现相同的功能

{ return { getName: function() { return name; } } })('小智2'); console.log(person.getName()); //小智

2.利用参数默认值可以指定某一个参数不得省略,如果省略就抛出一个错误

三、扩展对象的功能性让代码更加简洁

1) 可计算属性

在es6中,使用方括号可以计算属性名称,如

2) 利用 object.assign()合并两个对象

四、结合es6简洁函数写法,高阶函数的应用

1) tab 函数

(fn) => ( typeof(fn) === 'function' && fn(value),console.log(value) )

tab函数用处:假设你在遍历一个来自服务器的数组,并发现数据错了,因此你想调试一下,看看数组包含了什么,就可以用 tab函数

{ tap(a)((a)=> { console.log(a) }) }); #### 2) once 函数

在很多情况下,我们只需要运行一次给定的函数,发起一次银行支付请求等,这时就可以用到 once 函数

{ let done = false; return function () { return done?undefined:((done=true),fn.apply(this,arguments)) } } const doPayment = once(()=>{ console.log('payment is done') }) doPayment(); // payment is done console.log(doPayment()); //undefined #### 3) 函数柯里化的应用

开发者编写代码的时候应用的不同阶级编写很多日志,我们可以编写一个如下的日志函数:

{ if (mode === 'DEBUG') { console.debug(initialMessage,errorMessage + 'at line:' + lineNo) } else if (mode === 'ERROR') { console.error(initialMessage,errorMessage + 'at line:' + lineNo) } else if (mode === 'WARN') { console.warn(initialMessage,errorMessage + 'at line:' + lineNo) } else throw "Wrong mode" }

当开发者需要向控制台打印Stats.js文件中的错误时,可以用如下方式:

这样对于 我们追求完美可读的程序员来说,可能是不太能接受的,现在用柯里来优化以上代码, 先简要说明什么是函数柯里化

柯里化是把一个多参数函数转换成一个嵌套的一元函数过程。

封装一个把把多参数函数转制为一元函数的curry函数

{ if (typeof fn !== 'function') { throw Error('No function provided'); } return function curriedFn(...args) { // 传入参数是否小于函数参数列表长度, if (args.length < fn.length) { return function() { return curriedFn.apply(null,args.concat([].slice.call(arguments))); } } return fn.apply(null,args) } } let errorLogger = curry(loggerHelper)("ERROR")("ERROR At Stats.js"); let debugLogger = curry(loggerHelper)("DEBUG")("ERROR")("Debug At Stats.js"); let warnLogger = curry(loggerHelper)("WARN")("Warn")("At Stats.js"); // 用于错误 errorLogger("Error message",21) // 用于调试 debugLogger('Debug message',233) // 用于警告 warnLogger("Warn message",34);

现在我们能够轻松引用上面的柯里化并在各自的上下文中使用它们了。

总结

以上所述是小编给大家介绍的ES6 中可以提升幸福度的小功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/31198.html

猜你在找的JavaScript相关文章