ECMAScript 2015（ES6）有用的提示与技巧

lwx12525 发布于2019-08-23 13:52 / 1928人阅读

摘要：必传参数提供了默认参数值，没有该参数的情况下调用函数时使用的默认值。这意味着如果未传递或，则调用函数，将收到错误。由于使用，该函数以数组的形式返回结果。使用数组析构，我们可以直接将结果赋值到相应的变量中。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

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...

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总如下，觉得不错点个Star，欢迎加群互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，即可看到福利，你懂的。

私有云混合云使用心得与技巧 ECMAScript ECMAScript 6 ECMAScript6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99713.html

前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

?xiaoxiao, 2019-08-05 12:00 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
[翻译]你点的ES6小技巧，请查收

摘要：如果你还知道其他一些小技巧，欢迎留言。下面的代码将统计每一种车的数目然后把总数用一个对象表示。由于我们使用的是，函数把返回值放在一个数组中。而我们使用数组解构后就可以把返回值直接赋给相应的变量。查看更多我翻译的文章请访问项目地址专栏原文地址：https://medium.freecodecamp.org/check-out-these-useful-ecmascript-2015-e...

MadPecker 2019-08-22 15:43 评论0 收藏0
Javascript 打包工具

摘要：所以，打包工具就出现了，它可以帮助做这些繁琐的工作。打包工具介绍仅介绍款主流的打包工具，，，，以发布时间为顺序。它定位是模块打包器，而属于构建工具。而且在其他的打包工具在处理非网页文件比如等基本还是需要借助它来实现。本文当时写在本地，发现换电脑很不是方便，在这里记录下。前端的打包工具打包工具可以更好的管理html，css，javascript，使用可以锦上添花，不使用也没关系...

Sleepy 2019-08-23 18:03 评论0 收藏0