解锁 JavaScript 数组的强大功能：常用方法和属性详解（下）

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

三、Array的常用方法

filter()方法：过滤出符合条件的数组元素

filter() 方法是用于过滤出符合条件的数组元素的常用方法。它是 JavaScript 数组的一个内置方法，接受一个回调函数作为参数，并返回一个新的数组，其中包含通过测试的元素。以下是 filter() 方法的一些特点和示例：

1. 回调函数：filter() 方法接受一个回调函数作为参数，该回调函数会被应用到数组的每个元素上。如果回调函数返回 true，则该元素将被包含在过滤后的新数组中。

2. 不改变原始数组：filter() 方法不会改变原始数组本身，而是返回一个新的数组，其中包含通过测试的元素。

3. 示例：

let array = [1, 2, 3, 4, 5];
let filteredArray = array.filter(function(element) {
    return element > 3;
});
console.log(filteredArray); 

在上面的示例中，使用 filter() 方法创建了一个新的数组 filteredArray，其中只包含原始数组中大于 3 的元素。

filter() 方法是一种强大的数组操作工具，可用于根据条件筛选和提取数组中的元素。它常与其他数组方法结合使用，以实现更复杂的数据处理和操作。

map()方法：对数组元素进行操作并返回新的数组

map() 方法是用于对数组元素进行操作并返回新的数组的常用方法。它是 JavaScript 数组的一个内置方法，接受一个回调函数作为参数，并将该回调函数应用到数组的每个元素上。以下是 map() 方法的一些特点和示例：

1. 回调函数：map() 方法接受一个回调函数作为参数，该回调函数会被应用到数组的每个元素上。回调函数接受三个参数：当前处理的元素、当前元素的索引和整个数组本身。

2. 返回新的数组：map() 方法会对每个元素应用回调函数，并将返回值存储在新的数组中。原始数组不会被改变。

3. 示例：

let array = [1, 2, 3, 4, 5];
let mappedArray = array.map(function(element) {
    return element * 2;
});
console.log(mappedArray); 

在上面的示例中，使用 map() 方法将原始数组中的每个元素乘以 2，并将结果存储在新的数组 mappedArray 中。

map() 方法是一种强大的数组操作工具，它允许你对数组进行批量处理和转换操作。它常用于数据处理、数据映射和其他数组元素的操作。

reduce()和reduceRight()方法：聚合数组元素

reduce() 和 reduceRight() 方法是用于聚合数组元素的常用方法。它们是 JavaScript 数组的内置方法，用于将数组中的所有元素进行聚合操作，并返回一个最终结果。以下是这两个方法的简要说明：

1. reduce() 方法：从数组的第一个元素开始，依次将每个元素与一个累积值（初始值）进行聚合操作，将每次操作的结果作为新的累积值，直到处理完整个数组。最终返回累积值的结果。

2. reduceRight() 方法：与 reduce() 方法类似，但它从数组的最后一个元素开始，依次将每个元素与一个累积值（初始值）进行聚合操作，将每次操作的结果作为新的累积值，直到处理完整个数组。最终返回累积值的结果。

这两个方法都接受一个回调函数作为参数，该回调函数接受两个参数：累积值和当前处理的元素。回调函数负责进行聚合操作，并返回新的累积值。以下是一个示例，展示如何使用 reduce() 方法对数组进行求和：

let array = [1, 2, 3, 4, 5];
let sum = array.reduce(function(a, b) {
    return a + b;
});
console.log(sum); 

在上面的示例中，使用 reduce() 方法将数组中的所有元素相加，并将结果存储在变量 sum 中。

reduce() 和 reduceRight() 方法提供了一种简洁的方式来聚合数组元素，并可以应用各种聚合操作，如求和、求平均值、最大值、最小值等。它们在处理数组数据时非常有用。

forEach()方法：遍历数组并对每个元素执行指定的操作

forEach() 方法是用于遍历数组并对每个元素执行指定操作的常用方法。它是 JavaScript 数组的一个内置方法。以下是 forEach() 方法的一些特点和示例：

1. 语法：forEach() 方法接受一个回调函数作为参数，并将该回调函数应用到数组的每个元素上。

2. 不返回值：forEach() 方法本身不返回任何值，它主要用于对数组进行迭代和操作。

3. 示例：

let array = [1, 2, 3, 4, 5];
array.forEach(function(element) {
    console.log(element);
});

在上面的示例中，使用 forEach() 方法遍历数组 array，并在每次迭代时将当前元素打印到控制台上。

forEach() 方法是一种用于遍历数组并对每个元素执行操作的简单方式。它常用于数据处理、事件监听、动画循环等场景。需要注意的是，forEach() 方法无法中途退出循环，并且对原始数组进行的修改可能会影响到遍历过程。如果需要在遍历过程中进行条件判断或提前退出，可以考虑使用其他方法，如 for 循环或 filter() 方法。

四、Array的常用属性

length属性：获取数组中元素的数量

length 属性是用于获取数组中元素数量的属性。它是数组的一个固有属性，返回数组中元素的个数。以下是 length 属性的一些特点和示例：

1. 返回值：length 属性返回一个整数，表示数组中元素的数量。

2. 示例：

let array = [1, 2, 3, 4, 5];
let length = array.length;
console.log(length); 

在上面的示例中，创建了一个包含 5 个元素的数组 array，然后通过 length 属性获取数组中元素的数量，并将结果存储在变量 length 中。

length 属性是一个简洁的方式来获取数组的大小或元素数量。它可以用于确定数组的边界、循环迭代的次数、判断数组是否为空等操作。需要注意的是，length 属性是只读的，你不能通过设置它来改变数组的长度。如果需要修改数组的长度，可以使用其他方法，如 push()、pop()、slice() 等来操作数组。

prototype属性：用于实现继承和共享方法

prototype 属性在 JavaScript 中用于实现继承和共享方法。它是每个构造函数的一个属性，指向一个对象，这个对象包含可以被实例共享的属性和方法。以下是 prototype 属性的一些特点和示例：

1. 作用：通过 prototype 属性，构造函数可以为其创建的实例共享属性和方法，从而实现继承和代码重用。

2. 示例：

function Person(name) {
    this.name = name;
}
// 在 Person 构造函数的prototype对象上添加方法
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};
let person1 = new Person("Alice");
let person2 = new Person("Bob");
person1.sayHello(); 
person2.sayHello(); 

在上面的示例中，创建了一个 Person 构造函数，它接收一个参数 name，并将其赋值给实例的 name 属性。然后，通过在 Person.prototype 对象上添加了一个名为 sayHello 的方法，使得所有通过 new Person() 创建的实例都共享这个方法。

prototype 属性允许你在构造函数的外部定义方法，并使这些方法在所有实例中可用。它提供了一种简洁的方式来实现继承和共享行为，减少代码的冗余。需要注意的是，通过 prototype 共享的方法是在运行时动态绑定到实例上的，而不是在编译时确定的。这意味着，当你在实例上调用共享方法时，JavaScript 会自动查找并调用 prototype 对象上的相应方法。

五、总结

总结Array的常用方法和属性的重要性和用途

JavaScript 中的 Array 是一种常见的数据结构，用于存储多个值。它提供了许多常用的方法和属性，这些方法和属性对于操作和处理数组非常重要。以下是一些 Array 的常用方法和属性的总结：

1. length 属性：length 属性用于获取数组中元素的数量。它是一个可读可写的属性，可以用来动态调整数组的大小。

2. push() 方法：push() 方法用于向数组的末尾添加一个或多个元素。它可以接受任意数量的参数，并将它们依次添加到数组的末尾。

3. pop() 方法：pop() 方法用于删除数组的最后一个元素，并返回被删除的元素。如果数组为空，则返回 undefined。

4. unshift() 方法：unshift() 方法用于向数组的开头添加一个或多个元素。它会将参数添加到数组的开头，并相应地调整数组的长度。

5. shift() 方法：shift() 方法用于删除数组的第一个元素，并返回被删除的元素。如果数组为空，则返回 undefined。

6. slice() 方法：slice() 方法用于创建一个新的数组副本，其中包含从原始数组中选择的元素。它接受两个参数：起始索引和结束索引（不包括结束索引）。

7. concat() 方法：concat() 方法用于将一个或多个数组连接到原始数组的末尾，返回一个新的合并后的数组。

8. indexOf() 方法：indexOf() 方法用于查找数组中第一个出现的指定元素的索引。如果未找到，则返回 -1。

9. filter() 方法：filter() 方法用于创建一个新的数组，其中包含通过提供的函数实现的测试的原始数组的元素。

这些方法和属性在处理数组时非常有用，可以实现对数组的增删改查、连接、截取等操作。它们使数组的操作更加灵活和高效，并且可以根据具体需求选择合适的方法来处理数组数据。

了解和掌握这些方法和属性对于编写有效的 JavaScript 代码处理数组是至关重要的。它们提供了对数组的基本操作和功能，可以帮助你更好地管理和操作数组中的数据。