你点的 ES6一些小技巧,请查收


Posted in Javascript onApril 25, 2018

ES6出来已经有好几年了,同时很多新特性可以被巧妙地运用在项目中。我想要列下其中一些,希望它们对你有用。

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

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();

查看更多我翻译的Medium文章请访问:

项目地址:https://github.com/WhiteYin/translation
SF专栏:https://segmentfault.com/blog/yin-translation

总结

以上所述是小编给大家介绍的你点的 ES6一些小技巧,请查收,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
JavaScript的==运算详解
Jul 20 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
React组件中的this的具体使用
Feb 28 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
vue 组件使用中的一些细节点
Apr 25 #Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 #Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 #Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
You might like
PHP统一页面编码避免乱码问题
2015/04/09 PHP
10个php函数实用却不常见
2015/10/13 PHP
Mozilla中显示textarea中选择的文字
2006/09/07 Javascript
用脚本调用样式的几种方法
2006/12/09 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
bootstrap的3级菜单样式,支持母版页保留打开状态实现方法
2016/11/10 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python实现图片九宫格分割
2021/03/07 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
appium+python adb常用命令分享
2020/03/06 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Bose法国官网:购买耳机、扬声器、家庭影院、专业音响
2017/12/21 全球购物
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
为什么要用EJB
2014/04/17 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
学生个人自我鉴定
2014/03/26 职场文书
先进个人评语大全
2015/01/04 职场文书
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
Go语言特点及基本数据类型使用详解
2022/03/21 Golang
vue特效之翻牌动画
2022/04/20 Vue.js