让功力迅速升级的几个JavaScript方法

让功力迅速升级的几个JavaScript方法
0

目前绝大多数的软件都会涉及数据收集和处理,在日常工作里,处理数组是再平常不过了的操作。忘掉 for 循环吧,别再使用老套的 (let i=0; i < value.length; i++ ) 了。

小提示:如果在 for 循环中使用了const ,你会被报错。因为在循环的时候, i 会递增,被"i++"重新赋值,所以每次在letconst之间犹豫不决的时候,你就问自己这个问题:这个值会不会被重新赋值?如果会,就选择let;如果不会,就选择const更多

打个比方,你需要展示一系列产品,并且对数组进行分类、筛选、修改、更新等操作,又或者说你需要对数组做一些简单的计算,比如加法乘法等等。那么,要怎么操作才是上策呢?

可能你听到箭头函数就摇头,可能你不是一个喜欢花很多时间学新东西的人,可能你觉得这些都与你无关,相信我,你不是唯一一个这样想的人。接下来请先看我用ES5(普通函数) 和ES6(箭头函数)来实现这些操作。

注意: 箭头函数和普通函数不完全是一回事儿,不能随意相互替换改写,记住,关键词this在箭头函数和普通函数里是两个不同的东西。

本文涉及到的JavaScript方法列表:

  1. 展开操作符
  2. for…of 循环
  3. includes()
  4. some()
  5. every()
  6. filter()
  7. map()
  8. reduce()

如果你想成为一名更好的Web开发,或者是开创自己的事业,或者是教他人编程,抑或是想要精进自身的编程能力,请关注我的周更系列,我会分享关于最新Web开发语言的技巧要点。

1. 展开操作符

展开操作符能用来将数组 (array) 内的元素 展开 ,也可以用在对象常量 (object literals) 里。

使用展开操作符的好处有哪些?

  • 是一个展示数组元素的简单、直接的方式
  • 适用于数组 (array) 和对象常量 (object literals)
  • 是一个传递参数的快速、直接的方式
  • 只用写三个点…

举个例子: 不写循环来展示最喜欢的食物列表中的元素,通过展开操作符来实现:

2. for…of 循环

for...of 语句可以用来遍历数组,也可以用来改写元素,可以基本替换传统的for-loop循环。

使用for…of循环的好处有哪些?

  • 是一个更新元素的简单方式
  • 可以用来完成加法乘法等计算操作
  • 可以和条件语句配合使用,比如 if,while,switch 等
  • 写出简洁优雅的代码

举个例子: 你想展示工具箱里的工具,那么就可以使用 for...of 循环语句来轻松实现。

for...of 语句

3. Includes() 方法

includes() 方法用于检查一个数组中是否含有某个字段,会返回 true 或者 false值。用来检验的字段要注意大小写,如果你得检验字段是 school,而数组中只有 SCHOOL,那么返回值就是false

使用 includes() 的好处有哪些?

  • 是一个简易的搜索功能
  • 是一个快速判断某字段是否存在的简洁方式
  • 可以使用条件语句来进行修改、筛选等操作
  • 写出可读性更强的代码

**举个例子:**假设你想不起你车库里存放着哪些车了,你需要一个系统来帮你判断你想要的车存不存在,那么 includes() 可以帮到你!

带箭头函数的 includes()

4. Some() 方法

some() 方法用来检验数组中是否存在某些元素,返回值为 true 或者 false ,和 includes() 方法的一些核心思想很相近,但是必须注意的是,传进some()方法里 的参数必须是函数,而不能是字符串。

使用 some() 的好处有哪些?

  • 用来验证数组中是否元素满足检验条件
  • 以函数形式来做条件判定
  • 陈述式代码
  • 检验有无即可

举个例子: 打个比方,你是一家俱乐部的老板,你不想限制客人进店,但对于明显喝多了的客人你不想让他们进来(原谅我贫瘠的想象力)。下面看看如何用ES5和ES6写这个函数:

ES5:

some() 方法

ES6:

带箭头函数的 some() 方法

5. Every() 方法

every() 来遍历数组,挨个元素检查,最后返回 true 或者 false值,和 some() 的核心思想是一样的,不同点在于一旦有某个元素不满足检验条件,返回值即为 false

使用 every() 的好处有哪些?

  • 用来验证数组中是否所有元素都满足检验条件
  • 以函数形式来做条件判定
  • 陈述式代码

举个例子: 上次你用 some() 方法,让一些年龄不满的学生混进来了,结果被人举报,警察找上了门。所以,这次你要用 every() 来做检验,保证每一个人都满足年龄要求,才能进俱乐部。

ES5

every() 方法

ES6

带箭头函数的 every() 方法

6. Filter() 方法

filter() 会将通过检验条件的所有元素放进一个新的数组。

使用 filter() 的好处有哪些?

  • 不会改动原始数组
  • 剔除掉不需要的元素
  • 可读性更强的代码

举个例子: 你只想要价格等于30或者30以上的,其他的价格剔除掉…

ES5

filter()

ES6

带箭头函数的 filter()

7. Map() 方法

filter() 一样,map() 也会返回一个新的数组,但不同的是,map() 可以用来修改元素。

使用 map() 的好处有哪些?

  • 不会改动原始数组
  • 修改数组内元素
  • 可读性更强的代码

举个例子: 你手头上有一些产品的价格,经理要求你把加25%税后的价格报给他,这个时候你就可以使用 map() 方法。

ES5

map()

ES6

带箭头函数的 map()

8. Reduce() 方法

reduce() 可以将一个数组变成一个数字,一个对象,一系列promises等。一个使用 reduce() 的简易场景就是将一系列数字相加求和,将一个数组“浓缩”成一个数值。

使用 reduce() 的好处有哪些?

  • 进行计算操作
  • 求值
  • 重复值数量计数
  • 按照属性对对象进行分组
  • 按顺序执行promises
  • 快速计算

举个例子: 你想知道这一周花了多少钱,你可以使用 reduce() 求值。

ES5

reduce()

ES6

带箭头函数的 reduce()

原文链接:https://www.freecodecamp.org/news/7-javascript-methods-that-will-boost-your-skills-in-less-than-8-minutes-4cc4c3dca03f/

2赞

已经校对了,翻译~不错

1赞

谢谢校对,会在公众号发布的时候注明翻译者和校对者的名字 :clap::clap:

正式发布的文章:《 让功力迅速升级的几个 JavaScript 方法》

1赞

谢谢Chengjun!

图片都挂了。。。

PC 端和手机端都看了,没问题啊

:rofl:难道是我挂了