JavaScript 教程 join()、reduce() 、filter()、slice()、 splice()

大家好，欢迎来到IT知识分享网。

1、join()：

join() 方法允许我们连接数组的所有元素并返回一个新字符串：

Array.prototype.join([separator])

join() 方法接受一个可选的参数分隔符，它是一个字符串，用于分隔结果字符串中数组的每对相邻元素。

如果我们不将分隔符传递给 join() 方法，则分隔符默认为逗号。

如果数组有一个元素，则 join() 方法将该元素作为字符串返回，而不使用分隔符。

如果数组为空，则 join() 方法返回一个空字符串。

当数组的元素不是字符串时，join() 方法在加入之前将它们转换为字符串。

请注意，join() 方法将 undefined、null 和空数组 [] 转换为空字符串。

JavaScript 数组 join() 方法示例

让我们举一些使用 join() 方法的例子。

1) 使用 JavaScript Array join() 方法加入 CSS 类

以下示例使用 JavaScript Array join() 方法加入 CSS 类：

const cssClasses = ['btn', 'btn-primary', 'btn-active']; const btnClass = cssClasses.join(' '); console.log(btnClass);

输出：

btn btn-primary btn-active

在这个例子中，我们有一个包含 CSS 类列表的数组。我们使用 join() 方法连接 cssClasses 数组的所有元素，并返回一个由空格分隔的 CSS 类字符串。

2) 使用 JavaScript Array join() 方法替换所有出现的字符串

此示例使用 JavaScript Array join() 方法将所有出现的空格 ‘ ‘ 替换为连字符 (-)：

const title = 'JavaScript array join example'; const url = title.split(' ') .join('-') .toLowerCase(); console.log(url);

输出：

javascript-array-join-example

程序是怎么运行的：

首先，使用 split() 字符串方法将标题字符串按空格分割成一个数组。

其次，使用 join() 方法将结果数组中的所有元素连接成一个字符串。

第三，使用 toLowerCase() 方法将结果字符串转换为小写。

2、reduce()

JavaScript Array reduce() 方法介绍

假设我们有一个数字数组，如下所示：

let numbers = [1, 2, 3];

并且我们想要计算数组元素的总数。

通常，我们使用 for 循环遍历元素并将它们相加，如以下示例所示：

let numbers = [1, 2, 3]; let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } console.log(sum);

输出：

6

该程序简单明了：

• 首先，声明了一个包含三个数字 1、2 和 3 的数组。
• 其次，声明 sum 变量并将其值设置为零。
• 第三，在 for 循环中，将 numbers 数组的元素加到 sum 变量中。循环之后，sum变量的值为6。

我们所做的是将一个数组归约为一个值。

Array.prototype 允许我们使用 reduce() 方法将数组缩减为单个值，如下所示：

let numbers = [1, 2, 3]; let sum = numbers.reduce(function (previousValue, currentValue) { return previousValue + currentValue; }); console.log(sum);

这很简单，不是吗？

让我们详细看一下reduce()方法。

JavaScript Array reduce() 方法详解

下面说明了 reduce() 方法的语法：

array.reduce(callbackFn [, initialValue])

reduce() 方法有两个参数：

回调函数 callbackFn。该函数通常被称为reducer。

一个可选的初始值。

reduce() 方法为数组中的每个元素调用 callbackFn() 函数。

reducer() 函数返回一个值，该值是在整个数组上执行 callbackFn 以完成的结果。

1) callbackFn() 函数参数

callbackFn 函数具有以下语法：

function callbackFn(previousValue, currentValue, currentIndex, array) { //}

callbackFn 函数有四个参数：

• previousValue

上一次调用 callbackFn 函数返回的值。在第一次调用时，如果您传递了 initialValue，则 initialValue 是 previousValue。否则，其值为数组[0]。

• currentValue

当前数组元素的值。在第一次调用时，如果您传递了 initialValue，则为 array[0]，否则为 array[1]。

• currentIndex

当前值在数组中的索引。在第一次调用时，如果您传递了 initialValue，则为 0，否则为 1。

• array

要循环的数组。

2) 初始值参数

initialValue 参数是可选的。

如果我们指定了 initialValue，callbackFn 函数将在第一次调用时将 previousValue 初始化为 initialValue，并将 currentValue 初始化为第一个数组的元素。

如果不指定 initialValue，callbackFn 函数会将 previousValue 初始化为数组中的第一个数组元素（array[0]），并将 currentValue 初始化为第二个数组的元素（array[1]）。

下表说明reduce()方法根据initialValue参数第一次执行callbackFn()函数时的逻辑：

以下示例显示了 reduce() 函数的进度，initialValue 为 100：

let numbers = [1, 2, 3]; function getOrdinalSuffix(i) { let j = i % 10, k = i % 100; if (j == 1 && k != 11) return i + 'st'; if (j == 2 && k != 12) return i + 'nd'; if (j == 3 && k != 13) return i + 'rd'; return i + 'th'; } let call = 1; let sum = numbers.reduce(function (previousValue, currentValue, currentIndex, array) { let result = previousValue + currentValue; // show the 1st call, 2nd call, etc. console.log(`${getOrdinalSuffix(call)} call`); call++; // show the immediate values console.table({ previousValue, currentValue, currentIndex, result }); return result; },100); console.log(`Result: ${sum}`);

输出：

下面说明了没有 initialValue 参数的 reduce() 方法：

更多 JavaScript 数组 reduce() 示例

假设我们有以下产品对象的 shoppingCart 数组：

let shoppingCart = [ { product: 'phone', qty: 1, price: 500, }, { product: 'Screen Protector', qty: 1, price: 10, }, { product: 'Memory Card', qty: 2, price: 20, }, ];

要计算购物车中产品的总金额，可以使用 reduce() 方法，如下所示：

let total = shoppingCart.reduce(function (previousValue, currentValue) { return previousValue + currentValue.qty * currentValue.price; }, 0);

输出：

550

请注意，在此示例中，我们将 initialValue 参数传递给 reduce() 方法。

如果我们不这样做，reduce() 方法会将作为对象的 shoppingCart 数组的第一个元素作为初始值，并对这个对象执行计算。因此，它会导致错误的结果。

JavaScript 数组 reduceRight() 方法

reduceRight() 方法的工作方式与 reduce() 方法相同，但方向相反。

reduce() 方法从第一个元素开始并向最后一个元素移动，而 reduceRight() 方法从最后一个元素开始并向后移动第一个元素。

请参见以下示例：

let numbers = [1, 2, 3]; let sum = numbers.reduceRight(function (previousValue, currentValue) { console.log({ previousValue, currentValue }); return previousValue + currentValue; }); console.log(`Result:${sum}`);

输出：

{ previousValue: 3, currentValue: 2 } { previousValue: 5, currentValue: 1 } Result:6

下图说明了 reduce() 和 reduceRight() 方法的区别：

3、filter()

使用数组时最常见的任务之一是创建一个包含原始数组元素子集的新数组。

假设您有一个城市对象数组，其中每个对象包含两个属性：name和population。

let cities = [ {name: 'Los Angeles', population: }, {name: 'New York', population: }, {name: 'Chicago', population: }, {name: 'Houston', population: }, {name: 'Philadelphia', population: } ];

要查找人口超过 300 万的城市，通常使用 for 循环遍历数组元素并测试 population 属性的值是否满足条件，如下所示：

let bigCities = []; for (let i = 0; i < cities.length; i++) { if (cities[i].population > ) { bigCities.push(cities[i]); } } console.log(bigCities);

输出：

[ { name: 'Los Angeles', population:  }, { name: 'New York', population:  } ]

JavaScript Array 提供了 filter() 方法，允许您以更短、更简洁的方式完成此任务。

以下示例返回与上述示例相同的结果：

let bigCities = cities.filter(function (e) { return e.population > ; }); console.log(bigCities);

在本例中，我们调用了城市数组对象的 filter() 方法，并将其传递给一个测试每个元素的函数。

在函数内部，我们检查了数组中每个城市的人口是否大于 300 万。

如果是这种情况，则函数返回true；否则，它返回 false。如果元素满足我们传入的函数中的测试，则 filter() 方法仅包含结果数组中的元素。

在 ES6 中，使用箭头函数 (=>) 会更加简洁。

let bigCities = cities.filter(city => city.population > ); console.log(bigCities);

JavaScript Array filter() 方法详解

下面说明了 filter() 方法的语法：

arrayObject.filter(callback, contextObject);

filter() 方法创建一个新数组，其中包含所有通过 callback() 函数实现的测试的元素。

在内部，filter() 方法遍历数组的每个元素并将每个元素传递给回调函数。如果回调函数返回 true，则它将元素包含在返回数组中。

filter() 方法接受两个命名参数：回调函数和可选对象。

与Array对象的其他迭代方法如every()、some()、map()和forEach()一样，回调函数有如下形式：

function callback(currentElement, index, array){ // ... }

回调函数接受三个参数：

• currentElement 参数是回调函数正在处理的数组中的当前元素。
• 回调函数正在处理的 currentElement 的索引。
• 被遍历的数组对象。

索引和数组参数是可选的。

filter() 方法的 contexObject 参数是可选的。如果传递 this 值，则可以在回调函数中使用 this 关键字来引用它。

需要注意的是 filter() 方法不会改变原始数组。

更多 JavaScript Array filter() 方法示例

因为 filter() 方法返回一个新数组，所以您可以将结果与其他迭代方法（例如 sort() 和 map() ）链接起来。

例如，以下说明如何链接三个方法：filter()、sort() 和 map()：

cities .filter(city => city.population < ) .sort((c1, c2) => c1.population - c2.population) .map(city => console.log(city.name + ':' + city.population));

输出：

Philadelphia: Houston: Chicago:

程序是怎么运行的。

首先，filter() 方法返回人口少于 300 万的城市。

第二、sort()方法按人口降序对得到的城市进行排序。

第三，map() 方法在 Web 控制台中显示结果数组中的每个元素。

以下示例说明了 contextObject 参数的使用，该参数指定可以在 callback() 函数中使用 this 关键字引用的对象。

function isInRange(value) { if (typeof value !== 'number') { return false; } return value >= this.lower && value <= this.upper; } let data = [10, 20, "30", 1, 5, 'JavaScript filter', undefined, 'example']; let range = { lower: 1, upper: 10 }; let numberInRange = data.filter(isInRange, range); console.log(numberInRange); // [10, 1, 5]

输出：

[ 10, 1, 5 ]

程序是怎么运行的。

• 首先，定义一个isInRange()函数来检查它的参数是否是一个数字并且是否在对象的lower和upper属性指定的范围内。
• 接下来，定义一个包含numbers、strings和undefined的混合数据数组。
• 然后，定义range具有两个属性的对象lower和upper。
• 之后，调用数组的filter()方法data并传入isInRange()函数和range 对象。因为我们传入range对象，在isInRange()函数内部，this关键字引用range对象。
• 最后，在 Web 控制台中显示结果数组。

在本教程中，您已经学习了如何filter()根据回调函数提供的测试，使用 JavaScript Array方法过滤数组中的元素。

程序是怎么运行的。

• 首先，定义 isInRange() 函数，该函数检查其参数是否为数字并且是否在对象的下限和上限属性指定的范围内。
• 接下来，定义一个包含数字、字符串和未定义的混合数据数组。
• 然后，使用两个属性lower 和upper 定义范围对象。
• 之后调用数据数组的filter()方法，传入isInRange()函数和range对象。因为我们传入范围对象，在 isInRange() 函数内部， this 关键字引用了范围对象。
• 最后，在 Web 控制台中显示结果数组

4、slice()

slice() 方法接受两个可选参数，如下所示：

slice(start, stop);

start和stop参数都是可选的。

start 参数确定从零开始提取的索引。如果start是undefined， slice() 从 0 开始。

stop参数，顾名思义，是一个从零开始的索引，在该索引处结束提取。slice() 方法提取到 stop-1。这意味着 slice() 方法不包含新数组中停止位置的元素。如果省略 stop 参数，slice() 方法将使用数组的长度作为 stop 参数。

slice() 返回一个包含原始数组元素的新数组。重要的是要记住，slice() 方法只执行元素到新数组的浅拷贝。此外，它不会更改源数组。

克隆一个数组

slice() 用于克隆一个数组，如下例所示：

var numbers = [1,2,3,4,5]; var newNumbers = numbers.slice();

在此示例中，newNumbers 数组包含 numbers 数组的所有元素。

复制数组的一部分

slice() 方法的典型用途是在不修改源数组的情况下复制数组的一部分。下面是一个例子：

var colors = ['red','green','blue','yellow','purple']; var rgb = colors.slice(0,3); console.log(rgb); // ["red", "green", "blue"]

rgb 数组包含colors数组的前三个元素。源阵列colors保持不变。

将类数组对象转换为数组

slice() 方法用于将类数组对象转换为数组。例如：

function toArray() { return Array.prototype.slice.call(arguments); } var classification = toArray('A','B','C'); console.log(classification); // ["A", "B", "C"]

在这个例子中， toArray() 函数的参数是一个类似数组的对象。在 toArray() 函数内部，我们调用 slice() 方法将参数对象转换为数组。

我们传递给 toArray() 函数的每个参数都将是新数组的元素。

您经常看到的另一个典型示例是将 NodeList 转换为数组，如下所示：

var p = document.querySelectorAll('p'); var list = Array.prototype.slice.call(p);

在这个例子中，首先，我们使用document.querySelectorAll()来获取pHTML 文档的所有P的节点。这个方法的结果是一个NodeList对象，它是一个类似数组的对象。然后，我们调用slice()方法将NodeList对象转换为数组。

有时，您会看到以下语法：

var list = [].slice.call(document.querySelectorAll('p'));

在这个例子中，我们实例化了一个空数组[]，并通过空数组间接访问了Array.prototype方法的slice()方法。效果和直接使用 Array.prototype 一样

5、splice()

使用 JavaScript Array 的 splice() 方法删除元素

要删除数组中的元素，您可以将两个参数传递给 splice() 方法，如下所示：

Array.splice(position,num);

position 指定要删除的第一个项目的位置，num 参数确定要删除的元素数。

splice() 方法更改原始数组并返回一个包含已删除元素的数组。

让我们看看下面的例子。

假设您有一个包含从 1 到 5 的五个数字的数组分数。

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

以下语句从scores 数组的第一个元素开始删除三个元素。

let deletedScores = scores.splice(0, 3);

scores数组现在包含两个元素。

console.log(scores); // [4, 5]

而deletedScores数组包含三个元素。

console.log(deletedScores); // [1, 2, 3]

下图说明了scores.splice(0,3)上面的方法调用。

使用 JavaScript Array splice() 方法插入元素

您可以通过将三个或更多参数传递给 splice() 方法，其中第二个参数为零，从而将一个或多个元素插入到数组中。

考虑以下语法。

Array.splice(position,0,new_element_1,new_element_2,...);

在这个语法中：

位置指定新元素将在数组中插入的起始位置。

• 第二个参数为零 (0)，指示 splice() 方法不删除任何数组元素。
• 第三个参数、第四个参数等是插入到数组中的新元素。

注意 splice() 方法实际上改变了原始数组。此外， splice() 方法不会删除任何元素，因此它返回一个空数组。例如：

假设您有一个名为 colors 的数组，其中包含三个字符串。

let colors = ['red', 'green', 'blue'];

以下语句在第二个元素之后插入一个元素。

colors.splice(2, 0, 'purple');

colors数组现在有四个元素，新元素插入在第二个位置。

console.log(colors); // ["red", "green", "purple", "blue"]

下图演示了上面的方法调用。

您可以通过将第四个参数、第五个参数等传递给 splice() 方法来插入多个元素，如下例所示。

colors.spli ce(1, 0, 'yellow', 'pink'); console.log(colors); // ["red", "yellow", "pink", "green", "purple", "blue"]

使用 JavaScript Array splice() 方法替换元素

splice() 方法允许您在删除现有元素的同时将新元素插入到数组中。

为此，您至少传递三个参数，第二个参数指定要删除的项目数，第三个参数指定要插入的元素。

请注意，要删除的元素数不必与要插入的元素数相同。

假设您有一组包含四个元素的编程语言，如下所示：

let languages = ['C', 'C++', 'Java', 'JavaScript'];

以下语句将第二个元素替换为一个新元素。

languages.splice(1, 1, 'Python');

语言数组现在仍然有四个元素，新的第二个参数是“Python”而不是“C++”。

console.log(languages); // ["C", "Python", "Java", "JavaScript"]

下图说明了上面的方法调用。

您可以通过向 splice() 方法传递更多参数来将一个元素替换为多个元素，如下所示：

languages.splice(2,1,'C#','Swift','Go');

该语句从第二个元素（即 Java）中删除一个元素，并将三个新元素插入到语言数组中。结果如下。

console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]