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 相关文章推荐
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
JsRender实用入门教程
Oct 31 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 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学习之字符串比较和查找
2011/04/17 PHP
php查看当前Session的ID实例
2015/03/16 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
重命名批处理python脚本
2013/04/05 Python
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
微信跳一跳python辅助软件思路及图像识别源码解析
2018/01/04 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
python实现周期方波信号频谱图
2018/07/21 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
python 实现&quot;神经衰弱&quot;翻牌游戏
2020/11/09 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
法学专业应届生求职信
2013/10/16 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
解除合同协议书
2014/04/17 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
党员学习正风肃纪思想汇报
2014/09/12 职场文书
2015年手术室工作总结
2015/05/11 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers