map()/join()/filter()

一、map（）方法

Array.prototype.map() 是 JavaScript 中数组对象的一个方法，用于对数组中的每个元素执行指定的操作，并返回一个新的数组，该数组包含对原数组中每个元素执行操作后的结果。

语法

array.map(callback(currentValue[, index[, array]])[, thisArg])

• callback: 用来生成新数组元素的函数，接受三个参数：
  • currentValue: 当前正在处理的元素。
  • index (可选): 当前正在处理的元素的索引。
  • array (可选): 调用 map 方法的数组。
• thisArg (可选): 执行 callback 函数时的 this 值。

示例

const numbers = [1, 2, 3, 4, 5];

// 将数组中的每个元素都加倍
const doubledNumbers = numbers.map((num) => num * 2);
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

// 将数组中的每个元素转换为字符串
const stringNumbers = numbers.map((num) => num.toString());
console.log(stringNumbers); // 输出: ["1", "2", "3", "4", "5"]

// 获取数组中每个元素的索引和值
const indexedNumbers = numbers.map((num, index) => `${index}: ${num}`);
console.log(indexedNumbers); // 输出: ["0: 1", "1: 2", "2: 3", "3: 4", "4: 5"]

注意事项

• map() 方法不会修改原始数组，而是返回一个新数组。
• callback 函数中的操作应当是纯函数，即不修改原始数据，而是返回新的值。因为 map() 方法是创建一个新的数组，而不是对原始数组进行更改。
• 如果不需要返回新的数组，而只是想对数组中的每个元素进行操作，可以使用 forEach() 方法。

二、join（）方法

Array.prototype.join() 是 JavaScript 中数组对象的一个方法，用于将数组中的所有元素转换为一个字符串。

array.join([separator])

• separator (可选): 指定一个字符串将数组元素连接在一起。如果省略该参数，则默认使用逗号 , 连接数组元素。

示例

const fruits = ['apple', 'banana', 'orange'];

// 使用默认的逗号分隔符进行连接
const defaultJoin = fruits.join();
console.log(defaultJoin); // 输出: "apple,banana,orange"

// 使用自定义的分隔符进行连接
const customJoin = fruits.join(' - ');
console.log(customJoin); // 输出: "apple - banana - orange"

注意事项

• join() 方法不会修改原始数组。
• 如果数组中的元素是 null 或 undefined，它们在连接后会被转换为空字符串。
• 如果数组中的元素是对象或数组，则会直接调用它们的 toString() 方法并将返回值进行连接，而不会对其属性或元素进行进一步操作。

三、filter()

filter() 是数组对象的一个内置方法，用于过滤数组中的元素，并返回一个符合条件的新数组。

const newArray = array.filter(callback(element[, index[, array]])[, thisArg]);

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});

console.log(evenNumbers); // 输出 [2, 4, 6, 8, 10]

//上面函数体也可以写为一个箭头函数

const evenNumbers= numbers.filter(num=> num % 2 === 0)

• filter() 方法不会改变原始数组，而是返回一个新的数组。
• 如果没有元素满足条件，filter() 将返回一个空数组 []。
• 可以通过传递第二个参数 thisArg 来指定回调函数中的 this 值。