发布于 2026-01-06 1 阅读
0

面向新手的 forEach()、sort() 和 filter()

面向新手的 forEach()、sort() 和 filter()

forEach()

ES6 引入了 `forEach()` 方法,允许你遍历数组。你可能已经知道,数组的类型是 `object`。这与字符串、数字、布尔值、`undefined` 和符号等原始数据类型不同。例如,如果我们使用 `console.log` 输出 ` typeof` 运算符来查找数组的类型,将会输出 `*object*`,如下所示:



const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
console.log(typeof yummies)// will log "object"


Enter fullscreen mode Exit fullscreen mode

那么,在我们正在讨论的 forEach 方法的上下文中,这意味着什么呢?让我们再回顾一下,方法是特定于某个对象的函数。因此,我们可以应用一个名为 'slice()' 的数组方法,它将接受两个参数:

  1. 数组中开始执行切片方法的起始索引
  2. 数组中要结束切片的最后一个索引位置。

对“yummies”数组应用 slice 方法将返回一个包含切片元素的新数组。例如:



const slicedYummies = yummies.slice(0,3);
console.log(slicedYummies);
*/
will console.log["Ice-cream", "Cupcake", "Donut"]
As the slice() method  starts at index 0 and ends just before index 3. Which is index 2,. Therefore, the 2nd Cupcake which is at index 3 isn't present
*/



Enter fullscreen mode Exit fullscreen mode

同样,我们可以对 JavaScript 中的任何数组应用 forEach() 方法。此方法也接受参数。首先,我们来看一下它的语法。

句法:

arr.forEach(function fxnName(currentItem,index,arr),thisArg){
//此处编写一些代码
});

forEach() 方法接受以下参数:

forEach() 方法的第一个参数:

第一个参数是一个函数,它将对数组中的每个元素执行。这被称为回调函数,它本身可以接受 3 个参数:

  1. 当前项:数组中的当前项。必需参数。例如,“冰淇淋”将是数组中的起始/当前项。

替代文字

  1. 索引:数组中当前元素的索引。可选参数。例如,索引为 0。

替代文字

  1. 数组:forEach() 将要处理的数组。可选参数。例如,本例中为 ["Ice-cream", "Cupcake", "Donut", "Cupcake"]。

替代文字

forEach() 方法的第二个参数:

forEach 方法可以接受的第二个参数是:

1. thisArg:执行回调时要用作this的值。可选参数。这将在另一篇文章中详细介绍。

让我们来看一下yummies数组的 forEach() 方法:



yummies.forEach(function logYummies(item,index, yummies){
  console.log(item + ' The index is ' + index +' The whole array is: ' + arr);
});

/*
Console.logs the following:

"Ice-cream The index is 0 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"

"Cupcake The index is 1 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"

"Donut The index is 2 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"

"Cupcake The index is 3 The whole array is: Ice-cream,Cupcake,Donut,Cupcake"


*/


Enter fullscreen mode Exit fullscreen mode

在上面的例子中,`forEach()` 方法通过 `.` 符号应用于 `yummies` 数组,例如 `yummies.forEach()`。`forEach()` 方法接受一个名为`logYummies` 的函数作为参数,而该函数又接受三个参数:元素、索引和整个数组。

我们来看另一个简单的例子。有一个包含 5 个数字类型元素的数组。你想将每个元素乘以 2,也就是将数字翻倍。

使用 for 循环,代码如下所示:



let myMultiplier = [1,2,3,4,5];

for(let i =0; i < myMultiplier.length; i++){
  myMultiplier[i] = myMultiplier[i] * 2;
}
console.log(myMultiplier)// will log to [2, 4, 6, 8, 10]


Enter fullscreen mode Exit fullscreen mode

使用 forEach 方法后,代码将如下所示:




myMultiplier.forEach(function multiply(item, index, myMultiplier){
myMultiplier[index] = item * 2
})

console.log(myMultiplier)// will log to [2, 4, 6, 8, 10]


Enter fullscreen mode Exit fullscreen mode

筛选()

ES6 的 filter() 方法也适用于 JavaScript 中的数组。它会根据一些过滤条件过滤数组,并返回一个 包含过滤后元素的新数组。

句法

与 forEach() 方法类似:

array.filter(function fxnName(currentItem, index, array), thisArg){
//一些代码
});

filter() 方法的第一个参数:

第一个参数是一个函数,它将对数组中的元素执行。这被称为回调函数,它本身可以接受 3 个参数:

  1. 当前项:数组中的当前项。必需参数。例如,“冰淇淋”将是数组中的起始/当前项。

  2. 索引:数组中当前元素的索引。可选参数。例如,索引 0。

  3. 数组:filter() 将作用于其上的数组。可选参数。例如,本例中为 ["Ice-cream", "Cupcake", "Donut", "Cupcake"]。

替代文字

filter() 方法的第二个参数:

过滤器方法可以接受的第二个参数是:

1. thisArg:执行回调时要用作this的值。可选参数。这将在另一篇文章中详细介绍。

让我们筛选“美味”数组,并删除重复的纸杯蛋糕。

替代文字



const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
const  filteredYummies = yummies.filter(function filterYums(currentItem,index,yummies) {
  if (yummies.indexOf(currentItem) === index) {
    return currentItem;
  }
})
console.log(filteredYummies);//will log ["Ice-cream", "Cupcake", "Donut"];

/*
The indexOf() method returns the **index/POSITION** of the first occurrence of a specified string value (example 0,1,2 etc)
The filter() method 'filters' through each index and applies 
the indexOf method on an array item at a particular index
We check if the index of the currentItem in the yummies array is it's first occurrence 
if so then it is part of the filteredYummies array
So during the 4th iteraton , index or  *i* is 3 and the *first* occurrence of *Cupcakes* using yummies.indexOf("Cupcake) was 1.
Therefore 3 === 1 is false
All in All:  the indexOf/position of the item in the array should be equal to *i*
*/



Enter fullscreen mode Exit fullscreen mode

替代文字

种类()

sort() 方法顾名思义,用于对数组中的元素进行排序。默认情况下,数组中的元素将按升序或字母顺序排序。

句法

nameOfArray.sort();

例子:

替代文字



const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
yummies.sort();
console.log(yummies)

/* 
console.log will output the following in alphabetical order:
["Cupcake", "Cupcake", "Donut", "Ice-cream"]
*/


Enter fullscreen mode Exit fullscreen mode

替代文字

您还可以按其他顺序排序,例如降序排列。在这种情况下,您需要将比较函数传递给 sort() 方法。语法如下:

nameOfArray.sort(compareFunction);

让我们来看另一个例子,并按字母顺序降序排列 yummies 数组项,即从 ZA 开始。

例 2



const yummies = ['Ice-cream','Cupcake','Donut','Cupcake'];
function descendingOrder(a,b){
  return b > a;
}
yummies.sort(descendingOrder);
console.log(yummies)// will output ["Ice-cream", "Donut", "Cupcake", "Cupcake"]



Enter fullscreen mode Exit fullscreen mode

替代文字

文章来源:https://dev.to/kauresss/foreach-sort-and-filter-in-javascript-4e