正文

用原生JS轻松获取数组方法详解

/0 浏览量
0915

在JavaScript中，数组是处理数据的一种非常常见的数据结构。JavaScript为数组提供了许多方便的内置方法，使得数组操作变得轻松高效。这些方法可以极大地提升我们编写代码的效率。本文将详细介绍如何在原生JS中获取和使用这些数组方法。

数组方法分类

JavaScript中的数组方法主要分为以下几类：

  1. 创建和初始化数组：Array.of()、Array.from()、Array()等。
  2. 访问元素：indexOf()、lastIndexOf()、includes()等。
  3. 操作元素：push()、pop()、shift()、unshift()、splice()等。
  4. 迭代：forEach()、map()、filter()、reduce()、reduceRight()等。
  5. 排序和搜索：sort()、find()、findIndex()等。
  6. 归并和复制：concat()、slice()等。
  7. 其他：join()、toString()、toLocaleString()等。

常用数组方法的详解

以下是一些常用数组方法的详细说明：

1. 创建和初始化数组

  • Array.of(element1, [element2, ..., elementN]): 创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
  • Array.from(object)[[iterable]]: 从类数组或可迭代对象创建一个新数组实例。
let arr1 = Array.of(1, 2, 3);
let arr2 = Array.from([1, 2, 3]);

2. 访问元素

  • indexOf(item, fromIndex): 返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
  • lastIndexOf(item, fromIndex): 返回指定元素在数组中的最后一位索引。
  • includes(item): 判断数组是否包含一个指定的值，根据情况返回true或false。
let arr = [1, 2, 3, 4];
let index = arr.indexOf(3);
console.log(index); // 输出 2

let lastIndex = arr.lastIndexOf(3);
console.log(lastIndex); // 输出 2

let isInclude = arr.includes(5);
console.log(isInclude); // 输出 false

3. 操作元素

  • push(element1, ..., elementN): 向数组的末尾添加一个或多个元素，并返回新的长度。
  • pop(): 删除数组的最后一个元素，并返回该元素。
  • shift(): 删除数组的第一个元素，并返回该元素。
  • unshift(element1, ..., elementN): 向数组的开头添加一个或多个元素，并返回新的长度。
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // 输出 [1, 2, 3, 4]

let poped = arr.pop();
console.log(poped); // 输出 4
console.log(arr); // 输出 [1, 2, 3]

arr.shift();
console.log(arr); // 输出 [2, 3]

let unshifted = arr.unshift(1);
console.log(arr); // 输出 [1, 2, 3]
console.log(unshifted); // 输出 3

4. 迭代

  • forEach(callback(currentValue, index, array), thisValue): 对数组的每个元素执行一次提供的函数。
  • map(callback(currentValue, index, array), thisValue): 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。
  • filter(callback(currentValue, index, array), thisValue): 创建一个新数组，包含通过所提供函数实现的测试的所有元素。
  • reduce(callback(accumulator, currentValue, currentIndex, array), initialValue): 对数组中的每个元素执行一个由您提供的reducer函数，将其结果汇总为单个返回值。
  • reduceRight(callback(accumulator, currentValue, currentIndex, array), initialValue): 类似reduce()，但是从数组的末尾开始累加。
let arr = [1, 2, 3, 4];

arr.forEach(function(value) {
  console.log(value); // 输出 1, 2, 3, 4
});

let mappedArr = arr.map(function(value) {
  return value * 2;
});
console.log(mappedArr); // 输出 [2, 4, 6, 8]

let filteredArr = arr.filter(function(value) {
  return value > 2;
});
console.log(filteredArr); // 输出 [3, 4]

let reducedArr = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(reducedArr); // 输出 10

let reducedRightArr = arr.reduceRight(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(reducedRightArr); // 输出 10

5. 排序和搜索

  • sort([compareFunction]): 对数组的元素进行排序。
  • find(callback(element, index, array), thisValue): 找到第一个满足测试函数的元素。
  • findIndex(callback(element, index, array), thisValue): 找到第一个满足测试函数的元素的索引。
let arr = [1, 2, 3, 4];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // 输出 [1, 2, 3, 4]

let found = arr.find(function(value) {
  return value === 3;
});
console.log(found); // 输出 3

let indexFound = arr.findIndex(function(value) {
  return value === 3;
});
console.log(indexFound); // 输出 2

6. 归并和复制

  • concat(...arrays): 将多个数组连接成一个新的数组并返回。
  • slice(start, end): 返回一个新数组，包含从开始到结束（不包括结束）的原数组中的元素。
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let mergedArr = arr1.concat(arr2, arr3);
console.log(mergedArr); // 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]

let slicedArr = arr1.slice(1, 3);
console.log(slicedArr); // 输出 [2, 3]

7. 其他

  • join(separator): 将所有数组成员连接成一个字符串并返回。
  • toString(): 返回一个字符串，表示指定数组中的元素。
let arr = [1, 2, 3];
let str = arr.join(", ");
console.log(str); // 输出 "1, 2, 3"

let arrStr = arr.toString();
console.log(arrStr); // 输出 "1,2,3"

总结

通过以上介绍，我们可以看出原生JavaScript的数组方法非常丰富且实用。熟练掌握这些方法将有助于我们更高效地处理数组数据。在实际应用中，我们可以根据具体需求选择合适的方法来完成操作。希望本文能帮助你更好地理解和运用原生JS数组方法。

-- 展开阅读全文 --