js数组中的map、filter、slice方法详解

map

map() 方法可以对数组中每个元素执行一次提供的函数，并将结果放入一个新的数组中返回。我们来看一下它的语法和参数：

array.map(function(currentValue, index, arr), thisValue)
其中，function 参数接收三个参数：当前元素的值、当前元素的序号、当前的数组。thisValue 为 function 函数执行时this的值(可选)。

map() 方法会调用 function 函数一次，对数组的每个元素执行一次。执行的结果会收集到一个新的数组返回。下面举个例子吧：

const arr = [1, 2, 3, 4];
const doubles = arr.map(function(num) {
  return num * 2;
});

console.log(doubles); // [2, 4, 6, 8]

在上面的例子中，我们使用 map() 方法将原始数组中的每个元素翻倍。

filter

filter() 方法可创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。看看它的语法和参数：

array.filter(function(currentValue, index, arr), thisValue)
其中，function 的参数和 map() 方法相同。thisValue 为 function 的值(可选)。

filter() 方法返回一个数组，其中的元素都会通过一个指定的测试函数。这个指定的函数，会作为单独的参数进行调用：数组的值、元素的索引和数组自身。下面来一组简单的例子：

const fruits = ["apple", "banana", "grapes", "mango", "orange"];
const filteredFruits = fruits.filter(function(fruit) {
  return fruit.includes("a");
});

console.log(filteredFruits); // ["apple", "banana", "mango", "orange"]

在上面的例子中，我们对水果数组进行了过滤，只返回包含字母 “a” 的水果。不错吧~

slice

slice() 方法从数组中选取一个部分并将其作为新数组返回。我们来看一下它的语法和参数：

array.slice(start, end)
其中，start 和 end 参数是可选的。如果省略 end 参数，slice() 方法会选取从 start 到数组结尾的所有元素。如果 end 为负数，则返回值包括从 start 到 end 的元素，但是不包括 end 对应的元素。下面给大家展示一部分代码：

const arr = ["apple", "banana", "grapes", "mango", "orange"];

const slicedArr = arr.slice(1, 4);

console.log(slicedArr); // ["banana", "grapes", "mango"]

在上面的例子中，我们使用 slice() 方法将原始数组的第二个到第四个元素放入了一个新数组中，第一个元素是 0，所以 1 到4 对应的是 “banana”，“grapes” 和 “mango”。是不是很简单呢！