首页 > 前端日志 > javascript > JavaScript 中非常实用的 Array 方法
2018
11-02

JavaScript 中非常实用的 Array 方法

本文不是介绍 JavaScript 的所有 Array 方法,而是选择了一些非常实用和好用的方法,熟练掌握这些知识点,可以让我们在开发的过程中节省很多时间,少写很多代码。

涉及到的方法有:

  • filter : 通过特定测试条件
  • map :操作数组的值创建新数组
  • reduce : 非常适合计算总数
  • forEach : 遍历数组
  • some : 检查数组中的任何元素是否通过该条件
  • every : 检查数组中的所有元素是否通过该条件
  • Array.from : 创建数组的静态方法

 

这些方法主要是ES6新增的,所以本文也的实例代码也是ES6语法下测试通过。

 

.filter()

MDN的解析是:The filter() method creates a new array with all elements that pass the test implemented by the provided function。

意思就是:根据数组元素是否通过特定条件测试来创建新数组。

比如我们需要从数组筛选出大于22的数字。

const arr1 = [56, 16, 33, 19, 5, 17];
const arr2 = arr1.filter( num => num > 22 );
// arr2 将等于 [56, 33]

 

.map()

MDN的解析是:The filter() method creates a new array with all elements that pass the test implemented by the provided function。

意思就是:根据数组元素是否通过特定条件测试来创建新数组。

比如我们需要从数组筛选出大于22的数字。

const arr1 = [56, 16, 33, 19, 5, 17];
const arr2 = arr1.filter( num => num > 22 );
// arr2 将等于 [56, 33]

 

.reduce()

MDN的解析是:The reduce() method executes a reducer function (that you provide) on each member of the array resulting in a single output value.

这是一个非常好用的函数,但是经常被我们忽略了,这里不展开细说了,请到 MDN 里面查看吧,有很多非常酷的用法,在项目中用上,会让别人对你另眼相看的:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

.forEach()

MDN 的解释:The forEach() method executes a provided function once for each array element.

数组中最常用的方法,没有之一,不接受反驳。

比如我们要计算数组中所有超过22数值的和,或者统计购物车的总金额,总数量,都用的上。

下面的代码将打印数组

const arr = ['good', 'boy', 'lady'];
arr.forEach( item => console.log('item: '+ item) );

 

.some()  .every()

这两个方法非常相像,都是检测数组中的数值是否能满足条件,不同的是.some()有一个数值满足条件句可以了,而.every()要求所有数值都满足条件

const arr = ['user', 'user', 'user', 'admin'];
const flag1 = arr.some( element => element === 'admin');
const flag2 = arr.some( element => element === 'admin');
// flag1 将等于 true    flag2 将等于 false

 

Array.from()

MDN 的解释:The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

这是一种基于另一个数组或字符串创建数组的静态方法。 您还可以将 map回调函数作为参数,新数组中的每个元素会执行该回调函数。

从一个字符串创建一个数组。

const newArray = Array.from('hello');
// newArray 将等于 ['h', 'e', 'l', 'l', 'o']

创建一个数组,该数组的值是另一个数组中每个值的两倍。

const doubledValues = Array.from([2, 4, 6], number => number * 2);
// doubleValues 将等于 [4, 8, 12]

 

最后编辑:
作者:eatdao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。