正文

轻松掌握原生JS，学会几招轻松获取数组方法

/0 浏览量
1010

在JavaScript中，数组是一种非常常用的数据结构。掌握数组的方法对于编写高效、简洁的代码至关重要。本文将带你轻松掌握一些原生JS数组方法，让你在实际开发中得心应手。

1. 遍历数组：forEach()

forEach() 方法是对数组的每个元素执行一次提供的函数。这个方法没有返回值。

const arr = [1, 2, 3, 4, 5];
arr.forEach(function(item, index, array) {
  console.log(item); // 输出数组中的每个元素
});

2. 判断数组：Array.isArray()

Array.isArray() 方法用于确定一个由 […] 创建的变量是否为数组。

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出：true

3. 添加元素：push() 和 pop()

push() 方法用于向数组的末尾添加一个或多个元素，并返回新的长度。

pop() 方法用于删除数组的最后一个元素，并返回那个元素。

const arr = [1, 2, 3];
arr.push(4); // 将4添加到数组的末尾
console.log(arr); // 输出：[1, 2, 3, 4]

const lastElement = arr.pop(); // 删除数组的最后一个元素
console.log(lastElement); // 输出：4

4. 添加元素到数组开头：unshift() 和 shift()

unshift() 方法用于在数组的开头添加一个或多个元素，并返回新的长度。

shift() 方法用于删除数组的第一个元素，并返回那个元素。

const arr = [1, 2, 3];
arr.unshift(0); // 将0添加到数组的开头
console.log(arr); // 输出：[0, 1, 2, 3]

const firstElement = arr.shift(); // 删除数组的第一个元素
console.log(firstElement); // 输出：0

5. 数组截取：slice()

slice() 方法用于提取数组的一部分，并返回一个新数组。

const arr = [1, 2, 3, 4, 5];
const subArr = arr.slice(1, 3); // 截取从索引1到索引3（不包括3）的部分
console.log(subArr); // 输出：[2, 3]

6. 数组反转：reverse()

reverse() 方法用于颠倒数组中元素的顺序。

const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // 输出：[5, 4, 3, 2, 1]

7. 数组排序：sort()

sort() 方法用于对数组的元素进行排序。

const arr = [5, 2, 1, 4, 3];
arr.sort(function(a, b) {
  return a - b;
});
console.log(arr); // 输出：[1, 2, 3, 4, 5]

8. 数组查找：indexOf() 和 lastIndexOf()

indexOf() 方法用于返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

lastIndexOf() 方法用于返回指定元素在数组中的最后一个的索引，如果不存在，则返回-1。

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3)); // 输出：2
console.log(arr.lastIndexOf(3)); // 输出：2

9. 数组过滤：filter()

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

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(function(item) {
  return item > 2;
});
console.log(filteredArr); // 输出：[3, 4, 5]

10. 数组映射：map()

map() 方法用于创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

const arr = [1, 2, 3, 4, 5];
const mappedArr = arr.map(function(item) {
  return item * 2;
});
console.log(mappedArr); // 输出：[2, 4, 6, 8, 10]

通过学习这些原生JS数组方法，你可以在实际开发中更加灵活地处理数组数据。希望这篇文章能帮助你轻松掌握这些方法，祝你编程愉快！

-- 展开阅读全文 --