ECMAScript 2015(ES6)有用的提示与技巧
栏目: JavaScript · 发布时间: 6年前
内容简介:EcmaScript 2015(ES6)已经出来好几年了,可以巧妙地使用各种新功能。列出并讨论其中一些,你会发现它们很有用。如果你知道其他好方法,请在评论中回复,共同学习。ES6提供了默认参数值,没有该参数的情况下调用函数时使用的默认值。
EcmaScript 2015(ES6)已经出来好几年了,可以巧妙地使用各种新功能。列出并讨论其中一些,你会发现它们很有用。如果你知道其他好方法,请在评论中回复,共同学习。
1.必传参数
ES6提供了默认参数值,没有该参数的情况下调用函数时使用的默认值。
在以下示例中,将required()函数设置为 a 和 b 参数的默认值。 这意味着如果未传递a或b,则调用required()函数,将收到错误。
const required = () => {throw new Error('Missing parameter')}; //The below function will trow an error if either "a" or "b" is missing. const add = (a = required(), b = required()) => a + b; add(1, 2) //3 add(1) // Error: Missing parameter.
2.强大的“reduce”
Array的reduce方法非常通用。它通常用于将项目数组转换为单个值,但是你可以用它做更多的事情。
大多数这些技巧都依赖于初始值是数组或对象而不是像字符串或变量这样的简单值。
2.1 使用reduce同时进行 map 和 filter 操作
假设有一个项目列表的情况,并且想要更新每个项目(即 Array.map 操作),然后只过滤几个项目(即 Array.filter ),这意味着需要两次循环遍历列表!
在下面的示例中,我们希望将数组中的项的值加倍,然后选择大于50的项。我们使用强大的 reduce 方法高效的同时做到:
const numbers = [10, 20, 30, 40]; const doubledOver50 = numbers.reduce((finalList, num) => { num = num * 2; //double each number (i.e. map) //filter number > 50 if (num > 50) { finalList.push(num); } return finalList; }, []); doubledOver50; // [60, 80]
2.2 使用 “reduce” 代替是 “map” 或 “filter”
如果仔细查看上面的示例(2.1),就会知道 reduce 可以代替 map 或 filter !
2.3 使用 reduce 来判断括号是否对称
// 返回 0 表示对称 const isParensBalanced = (str) => { return str.split('').reduce((counter, char) => { if (counter < 0) { // 匹配到 ')' 在 '(' 前面 return counter; } else if ( char === '(') { return ++counter; } else if ( char === ')') { return --counter; } else { return counter; //其它字符 } }, 0) // 初始化值为0 } isParensBalanced('(())') // 0 <---对称 isParensBalanced('(asdfds') // 0 <---对称 isParensBalanced('(()') // 1 <---不对称 isParensBalanced(')(') // 0 <---不对称
2.4 计算重复的数组项(转换数组→对象)
有时你希望复制数组项或将数组转换为对象。 你可以使用 reduce。
在下面的例子中,计算cars 中每个值重复数量,并将这组对应的数据放到一个对象中:
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 属性挑拣
有时候你想挑拣需要的属性排除一些平需要的属性(可能是因为它们包含敏感信息或者太大了)。我们不需要遍历整个对象来挑拣它们,只需将这些不需要的数据提取到对应变量中,并将有用的保存在 rest 参数中。
在下面的示例中,我们不需要的属性如_internal和tooBig属性,我们可以将它们分配给_internal和tooBig变量(名字要一样),并将剩余的保存到在 rest parameter 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附带了一个扩展操作符(由三个点表示)。它通常用于解构数组值,但也可以在对象上使用它。
在下面的示例中,我们使用扩展操作符(...)在新对象中进行扩展。第二个对象中的属性键将覆盖第一个对象中的属性键:
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 转换为数组很简单且在集合上使用所有数组方法!
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; [param1, param2] = [param2, param1]; console.log(param1) // 2 console.log(param2) // 1
5.2 从一个函数接收和分配多个值
在下面的例子中,我们在/post获取一个post,并在/comments 获取相关 comments 。由于使用 async/wait
,该函数以数组的形式返回结果。使用数组析构,我们可以直接将结果赋值到相应的变量中。
async function getFullPost(){ return await Promise.all([ fetch('/post'), fetch('/comments') ]); } const [post, comments] = getFullPost();
原文地址: https://medium.freecodecamp.o...
你的点赞是我持续分享好东西的动力,欢迎点赞!
一个笨笨的码农,我的世界只能终身学习!
更多内容请关注公众号《大迁世界》
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- NPM 一些有用的提示和技巧
- 看的书多,就有用吗?
- 如何绘制有用的技术架构图
- Laravel10个有用的用法
- [译] 50+ 有用的 DevOps 工具(二)
- [译] 50+ 有用的 DevOps 工具(三)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript RIA开发实战
(英)Dennis Odell / 张立浩 / 清华大学出版社 / 2010 / 48.00元
本书介绍如何采用最合理的方式为RIA编写可靠的、易于维护的HTML、CSS和JavaScript代码,以及如何使用Ajax技术在后台实现浏览器与Web服务器的动态通信。本书将介绍您在构建Web应用程序时可能遇到的性能限制,以及如何以最佳的方式克服这些限制。此外,本书提供的提示可以使用户界面响应更加灵敏。 本书也将介绍如何通过添加使用自定义字体的印刷标题、多媒体回放组件、自定义窗体控件和动态绘......一起来看看 《JavaScript RIA开发实战》 这本书的介绍吧!