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


Posted in Javascript onAugust 06, 2018

一、变量解构赋值的用途

1)交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x]

2)从函数返回多个值

// 返回一个数组
function example(){
  return [1, 2, 4];
}
let [a, b, c] = example() 
// 返回一个对象
function example(){
  return {
    foo:1,
    bar: 2
  }
}
let {foo, bar} = example(); 或者 ( {foo, bar} = example() )

3)提取JSON数据

let jsonData = {
 id:42,
 status: "OK",
 data: [867, 5309]
};
let { id, status, data: number} = jsonData;

4)输入模块的指定方法

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

const { SourceMapConsumer, SourceNode } = require("source-map")

5) 数组复制的功能

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

// 在 es5 中克隆数组
var colors = [ 'red', 'green', 'blue' ];
var clonedColors = colors.concat();
console.log(clonedColors); // "[red, green, blue]"

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

let colors = [ 'red', 'green', 'blue' ]
let [ ...clonedColors ] = colors;
console.log(clonedColors); // "[red, green, blue]"

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

function eliminateDuplicates(items) {
  return [...new Set(items)]
}
let numbers = [1, 2, 3, 3, 3, 4, 5];
let noDuplicates = eliminateDuplicates(numbers );
console.log(noDuplicates ); // [1,2,3,4,5]

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

var arra1 = [{
 name: '小智',
 age: 26
}]
var arra2 = [{
 name: '大智',
 age: 27
}]
arra1.push.apply(arra1, arra2)
console.log(arra1)

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

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

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

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

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

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

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

function throwEmptyError() {
  throw new Error('参数不能为空');
}
function foo(mustBeParams = throwEmptyError() ){
  return mustBeParams();
}
foo() // 参数不能为空

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

1) 可计算属性名

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

let lastName ='last name';
let person = {
  "first name": 'Nicholas',
  [lastName]: 'Zakas'
}
console.log(person['first name']); // "Nicholas"
console.log(person[lastName]); // Zakas

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

function request(options) {
 let defaultOptions = {
  port: 8000,
  type: 'get'
 }
 Object.assign(options,defaultOptions);
 console.log(options)
}
request({url: 'http://www.baidu.com'})

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

1) tab 函数

// 此处tap函数接受一个 vaule 并返回一个包含value 闭包函数,该函数被执行
const tap = (value) => (fn) => (
 typeof(fn) === 'function' && fn(value),
 console.log(value)
)

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

[1, 2 ,3, 4].forEach((a) => {
 tap(a)((a)=> {
  console.log(a)
 })
});
#### 2) once 函数

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

const once = (fn) => {
  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) 函数柯里化的应用

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

const loggerHelper = (mode, initialMessage, errorMessage, lineNo) => {
 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文件中的错误时,可以用如下方式:

loggerHelper("ERROR", "ERROR At Stats.js", "Invalid argument passed", 23);

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

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

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

let curry = (fn) => {
 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 中可以提升幸福度的小功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 创建对象和构造类实现代码
Jul 30 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
javascript如何写热点图
Dec 08 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
JS前端广告拦截实现原理解析
Feb 17 Javascript
原生JS实现的轮播图功能详解
Aug 06 #Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 #Javascript
animate.css在vue项目中的使用教程
Aug 05 #Javascript
iconfont的三种使用方式详解
Aug 05 #Javascript
vue-content-loader内容加载器的使用方法
Aug 05 #Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
Aug 05 #Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
禁止选中文字兼容IE、Chrome、FF等
2013/09/04 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
layui layer select 选择被遮挡的解决方法
2019/09/21 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现对PPT文件进行截图操作的方法
2015/04/28 Python
Python语法快速入门指南
2015/10/12 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python动态赋值的陷阱知识点总结
2019/03/17 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
自荐书模板
2013/12/19 职场文书
高一生物教学反思
2014/01/17 职场文书
任命书怎么写
2015/03/02 职场文书
节约用水广告语60条
2019/11/14 职场文书
Python可视化学习之matplotlib内置单颜色
2022/02/24 Python