不得不知的ES6小技巧


Posted in Javascript onJuly 28, 2018

如果你还知道其他一些小技巧,欢迎留言~ 很高兴把它们补充进来。

1. 强制要求参数

ES6提供了默认参数值机制,允许你为参数设置默认值,防止在函数被调用时没有传入这些参数。

在下面的例子中,我们写了一个required()函数作为参数a和b的默认值。这意味着如果a或b其中有一个参数没有在调用时传值,会默认required()函数,然后抛出错误。

const required = () => {throw new Error('Missing parameter')};

const add = (a = required(), b = required()) => a + b;

add(1, 2) //3
add(1) // Error: Missing parameter.

2. 强大的reduce

数组的reduce方法用途很广。它一般被用来把数组中每一项规约到单个值。但是你可以利用它做更多的事。

2.1 使用reduce同时实现map和filter

假设现在有一个数列,你希望更新它的每一项(map的功能)然后筛选出一部分(filter的功能)。如果是先使用map然后filter的话,你需要遍历这个数组两次。

在下面的代码中,我们将数列中的值翻倍,然后挑选出那些大于50的数。有注意到我们是如何非常高效地使用reduce来同时完成map和filter方法的吗?

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => { 
 num = num * 2;  
 if (num > 50) {
  finalList.push(num);
 } 
 return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 使用reduce取代map和filter

如果你认真阅读了上面的代码,你应该能理解reduce是可以取代map和filter的。

2.3 使用reduce匹配圆括号

reduce的另外一个用途是能够匹配给定字符串中的圆括号。对于一个含有圆括号的字符串,我们需要知道(和)的数量是否一致,并且(是否出现在)之前。

下面的代码中我们使用reduce可以轻松地解决这个问题。我们只需要先声明一个counter变量,初值为0。在遇到(时counter加一,遇到)时counter减一。如果左右括号数目匹配,那最终结果为0。

//Returns 0 if balanced.
const isParensBalanced = (str) => {
 return str.split('').reduce((counter, char) => {
  if(counter < 0) { //matched ")" before "("
   return counter;
  } else if(char === '(') {
   return ++counter;
  } else if(char === ')') { 
   return --counter;
  } else { //matched some other char
   return counter;
  }
  
 }, 0); //<-- starting value of the counter}
isParensBalanced('(())') // 0 <-- balanced
isParensBalanced('(asdfds)') //0 <-- balanced
isParensBalanced('(()') // 1 <-- not balanced
isParensBalanced(')(') // -1 <-- not balanced

2.4 统计数组中相同项的个数

很多时候,你希望统计数组中重复出现项的个数然后用一个对象表示。那么你可以使用reduce方法处理这个数组。

下面的代码将统计每一种车的数目然后把总数用一个对象表示。

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
  obj[name] = obj[name] ? ++obj[name] : 1;
 return obj;
}, {});
carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }

reduce的其他用处实在是太多了,建议阅读MDN的相关代码示例。

3. 对象解构

3.1 删除不需要的属性

有时候你不希望保留某些对象属性,也许是因为它们包含敏感信息或仅仅是太大了(just too big)。你可能会枚举整个对象然后删除它们,但实际上只需要简单的将这些无用属性赋值给变量,然后把想要保留的有用部分作为剩余参数就可以了。

下面的代码里,我们希望删除_internal和tooBig参数。我们可以把它们赋值给internal和tooBig变量,然后在cleanObject中存储剩下的属性以备后用。

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};

console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 在函数参数中解构嵌套对象

在下面的代码中,engine是对象car中嵌套的一个对象。如果我们对engine的vin属性感兴趣,使用解构赋值可以很轻松地得到它。

var car = {
 model: 'bmw 2018',
 engine: {
  v6: true,
  turbo: true,
  vin: 12345
 }
}
const modelAndVIN = ({model, engine: {vin}}) => {
 console.log(`model: ${model} vin: ${vin}`);
}
modelAndVIN(car); // => model: bmw 2018 vin: 12345

3.3 合并对象

ES6带来了扩展运算符(...)。它一般被用来解构数组,但你也可以用它处理对象。

接下来,我们使用扩展运算符来展开一个新的对象,第二个对象中的属性值会改写第一个对象的属性值。比如object2的b和c就会改写object1的同名属性。

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {…object1, …object2} //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

4. Sets

4.1 使用Set实现数组去重

在ES6中,因为Set只存储唯一值,所以你可以使用Set删除重复项。

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 对Set使用数组方法

使用扩展运算符就可以简单的将Set转换为数组。所以你可以对Set使用Array的所有原生方法。

比如我们想要对下面的Set进行filter操作,获取大于3的项。

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 数组解构

有时候你会将函数返回的多个值放在一个数组里。我们可以使用数组解构来获取其中每一个值。

5.1 数值交换

let param1 = 1;
let param2 = 2;
//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 接收函数返回的多个结果

在下面的代码中,我们从/post中获取一个帖子,然后在/comments中获取相关评论。由于我们使用的是async/await,函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。

async function getFullPost(){
 return await Promise.all([
   fetch('/post'),
   fetch('/comments')
 ]);
}
const [post, comments] = getFullPost();

注:原文作者rajaraodv ,白吟灵译。

Javascript 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
Oct 15 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
Aug 04 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 #Javascript
Angular6笔记之封装http的示例代码
Jul 27 #Javascript
Vue 中axios配置实例详解
Jul 27 #Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 #Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 #Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 #Javascript
JavaScript事件对象event用法分析
Jul 27 #Javascript
You might like
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
PHP Opcache安装和配置方法介绍
2015/05/28 PHP
PHP中余数、取余的妙用
2015/06/29 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JQuery入门——移除绑定事件unbind方法概述及应用
2013/02/05 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
详解JS函数防抖
2020/06/05 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Python中使用SAX解析xml实例
2014/11/21 Python
Python爬虫爬验证码实现功能详解
2016/04/14 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
人事主管的岗位职责
2013/11/16 职场文书
师德师风个人反思
2014/04/28 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
幼儿园欢迎词范文
2015/01/26 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python