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 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
JQuery显示隐藏DIV的方法及代码实例
Apr 16 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 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
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
Vue实现手机计算器
2020/08/17 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python输入错误后删除的方法
2019/10/12 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python 随机按键模拟2小时
2020/12/30 Python
介绍一下Make? 为什么使用make
2013/12/08 面试题
硕士研究生求职自荐信范文
2014/03/11 职场文书
销售团队获奖感言
2014/08/14 职场文书
法人委托书的范本格式
2014/09/11 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
死亡证明书样本说明
2014/10/18 职场文书
功夫熊猫观后感
2015/06/10 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Python机器学习之基础概述
2021/05/19 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
canvas 中如何实现物体的框选
2022/08/05 Javascript