[译]这些Javascript方法几分钟内提升你的技能

2,165 阅读5分钟

原文地址:These JavaScript methods will boost your skills in just a few minutes

我们今天构建的大多数应用程序都需要进行某种数据收集修改。会经常遇到对集合中的项进行处理。忘记for循环传统方式(let i=0; i < value.length; i++ )

注意,在 使用for-loopconst报出一个错误。是因为它在每次执行期间重新声明了值,因此ii++修改了。所以每当你想到使用const或者let时考虑一下 - 这个值会被重新声明吗?如果答案是肯定的,请选择let ,如果不是,请选择const更多信息

假设您要显示产品列表并对集合进行分类,过滤,搜索,修改或更新。或者您可能希望执行快速计算,例如求和,乘法等。实现这一目标的最佳方法是什么?

也许你不喜欢箭头函数,不想花太多时间学习新东西,或者它们与你无关。别担心,我将向您展示如何在ES5(功能降级)和ES6(箭头函数)中完成它。

请注意:箭头函数和函数声明/表达式不是等效的,不能盲目替换。请注意,this关键字在两者之间的工作方式不同。

我们将要关注的方法:

  1. Spread operator
  2. for…of iterator
  3. includes()
  4. some()
  5. every()
  6. filter()
  7. map()
  8. reduce()

如果您想成为更好的Web开发人员,开始自己的事业,教别人或提高您的开发技能,我将每周发布关于最新Web开发语言的技巧和窍门。

Spread operator

Spread Operator将数组扩展为其元素。它也可以用于对象字面量。

为什么要用它?

  • 这是一种简单快速的方式来显示数组的项
  • 适用于数组和对象字面量
  • 这是一种快速直观的传递参数的方法
  • 它只需要上面三个原因就足以说明问题了......

示例:

假设您想显示喜欢的食物列表而不想创建循环函数。可以使用这样的Spread operator

for ... of iterator

for...of语句循环/遍历集合,并为您提供修改特定项的功能。它取代了传统的for-loop做法。

为什么要用它?

  • 这是添加或更新元素的简单方法
  • 执行计算(求和,乘法等)
  • 使用条件语句时(if,while,switch等)
  • 干净和可读的代码

示例:

假设您有一个工具箱,并且要显示其中的所有工具。for...of迭代器很容易实现。

Includes()

includes()方法用于检查集合中是否存在特定字符串,并返回truefalse。请记住,它区分大小写:如果集合中的项目是SCHOOL,而您搜索school,它将返回false

我为什么要用它?

  • 构建简单的搜索功能
  • 这是一种确定字符串是否存在的直观方法
  • 使用条件语句来修改,过滤等
  • 可读代码

示例:

假设您不知道车库中有哪些车辆,您需要一个系统来检查您想要的车是否存在。includes()来完成!

Some()

some()方法检查数组中是否存在某些元素,并返回truefalse。这有点类似于includes()方法的概念,除了参数是函数而不是字符串。

为什么要用它?

  • 确保某些项目通过测试
  • 使用函数执行条件语句
  • 使代码1清晰

示例:

假设您是俱乐部老板,并不关心谁进入俱乐部。但有些人不允许进入,因为他们喝得太多。查看以下ES5和ES6之间的差异:

ES5:

ES6:

Every()

every()方法遍历数组,检查每个项,并返回truefalse。概念和some()相同。除了每个项必须满足条件语句,否则它将返回false

我为什么要用它?

  • 确保每个项都通过测试
  • 可以使用函数执行条件语句
  • 使您的代码清晰

示例:

最后一次允许some()未成年学生进入俱乐部时,有人报告此事并且警察抓住了您。这次你不会让这种情况发生,你将确保每个人every()都通过了年龄限制。

ES5

ES6

Filter()

filter()方法创建一个包含所有通过条件的元素的新数组。

我为什么要用它?

  • 可以避免更改原数组
  • 可以过滤掉不需要的项
  • 提供更易读的代码

示例:

假设想返回高于或等于30的价格。过滤掉所有其他价格......

ES5

ES6

Map()

map()方法在返回新数组方面类似于filter()方法。但是,唯一的区别是它用于修改项。

我为什么要用它?

  • 可以避免对原数组进行更改
  • 可以修改所需的项
  • 提供更易读的代码

示例:

假设有一个包含价格的产品列表。经理需要一个清单,以便在税率减少25%后显示新价格。map()方法可以完成。

ES5

ES6

Reduce()

reduce()方法可用于将数组转换为其他内容,可以是整数,对象,承诺链(承诺的顺序执行)等。出于实际原因,一个简单的用例是对整数列表求和。简而言之,它将整个数组“减少”为一个值。

我为什么要用它?

  • 执行计算
  • 计算一个值
  • 计算重复数
  • 按属性分组对象
  • 按顺序执行promises
  • 这是一种快速执行计算的方法

示例:

假设您要查找一周的总花销,使用reduce()获得该值。

ES5

ES6