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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
AngularJS指令用法详解
Nov 02 Javascript
JS中的作用域链
Mar 01 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
js分页代码分享
2014/04/28 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Pandas中resample方法详解
2019/07/02 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
致长跑运动员广播稿
2014/01/31 职场文书
高考备战决心书
2014/03/11 职场文书
公证委托书模板
2014/04/03 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
redis中lua脚本使用教程
2021/11/01 Redis