JavaScript常用数组方法以及使用方法

JavaScript中的数组是一种数据结构,可以存储一系列的值,并提供了许多方法来操纵和操作这些值。以下是一些常用的JavaScript数组方法:

  1. push():在数组末尾添加一个或多个元素,并返回新数组的长度。
  2. pop():删除并返回数组的最后一个元素。
  3. unshift():在数组开头添加一个或多个元素,并返回新数组的长度。
  4. shift():删除并返回数组的第一个元素。
  5. slice():从数组中提取指定的部分并返回一个新的数组,原始数组不会被修改。
  6. splice():从数组中删除、添加或替换元素,原始数组将被修改,并返回被删除的元素。
  7. concat():将两个或多个数组连接在一起,并返回新数组。
  8. reverse():反转数组的顺序,并返回修改后的数组。
  9. sort():按照字母顺序对数组进行排序,或者使用自定义函数对其进行排序,并返回修改后的数组。
  10. indexOf():返回指定元素在数组中的位置(从前往后找)。
  11. lastIndexOf():返回指定元素在数组中的位置(从后往前找)。
  12. forEach():遍历数组中的每个元素,并为每个元素执行回调函数。
  13. map():创建一个新数组,其中包含原始数组的所有元素,并对每个元素执行回调函数。
  14. filter():创建一个新数组,其中仅包含通过测试函数的元素。
  15. reduce():通过对数组中所有元素应用一个函数来将其减少为单个值,并返回该值。
  16. join():用指定的分隔符将数组每一项拼接为字符串

  17. find():返回匹配的值

  18. findIndex():返回匹配位置的索引

  19. toLocaleString()、toString():将数组转换为字符串

这些方法只是JavaScript中可用的一部分数组方法,还有很多其他的方法可以使用。push():

push()向数组末尾添加一个或多个元素,并返回新的长度

let fruits = ["apple", "banana"];
fruits.push("orange", "kiwi");
console.log(fruits); // ["apple", "banana", "orange", "kiwi"]

pop()删除数组最后一个元素,并返回被删除元素的值

let fruits = ["apple", "banana", "orange", "kiwi"];
let lastFruit = fruits.pop();
console.log(lastFruit); // "kiwi"
console.log(fruits); // ["apple", "banana", "orange"]

unshift():向数组开头添加一个或多个元素,并返回新的长度 

let fruits = ["apple", "banana"];
fruits.unshift("orange", "kiwi");
console.log(fruits); // ["orange", "kiwi", "apple", "banana"]

 shift():删除数组第一个元素,并返回被删除元素的值

let fruits = ["orange", "kiwi", "apple", "banana"];
let firstFruit = fruits.shift();
console.log(firstFruit); // "orange"
console.log(fruits); // ["kiwi", "apple", "banana"]

splice():从指定位置开始删除/插入若干个元素

let fruits = ["orange", "kiwi", "apple", "banana"];
// 从第二个位置开始删除两个元素,再插入两个元素
fruits.splice(1, 2, "pear", "peach");
console.log(fruits); // ["orange", "pear", "peach", "banana"]

slice():返回一个从开始到结束位置(不包括结束位置)的子数组

let fruits = ["orange", "kiwi", "apple", "banana"];
let subFruits = fruits.slice(1, 3);
console.log(subFruits); // ["kiwi", "apple"]

join():将数组中所有元素转换成字符串,并连接起来

let fruits = ["orange", "kiwi", "apple", "banana"];
let fruitString = fruits.join(", ");
console.log(fruitString); // "orange, kiwi, apple, banana"

indexOf():返回指定元素在数组中第一次出现的位置,如果不存在则返回-1

let fruits = ["orange", "kiwi", "apple", "banana"];
let index = fruits.indexOf("apple");
console.log(index); // 2

concat():合并两个或多个数组,返回一个新数组

let fruits1 = ["orange", "kiwi"];
let fruits2 = ["apple", "banana"];
let allFruits = fruits1.concat(fruits2);
console.log(allFruits); // ["orange", "kiwi", "apple", "banana"]

forEach():对数组中的每个元素执行指定操作

let fruits = ["orange", "kiwi", "apple", "banana"];
fruits.forEach(function(fruit) {
  console.log(fruit.toUpperCase());
});

reverse()反转数组的顺序,并返回修改后的数组。

var arr = [1,2,3,4]
console.log(arr.reverse()) //[4,3,2,1]

sort():按照字母顺序对数组进行排序,或者使用自定义函数对其进行排序,并返回修改后的数组。 

const numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出:[1, 2, 3, 4, 5]

lastIndexOf() 方法返回指定元素在数组中最后出现的位置的索引值,如果没有找到则返回 -1。 

const fruits = ['apple', 'banana', 'orange', 'apple', 'pear'];
const appleIndex = fruits.lastIndexOf('apple');
console.log(appleIndex); // Output: 3

const grapeIndex = fruits.lastIndexOf('grape');
console.log(grapeIndex); // Output: -1

map() 方法可以用于对数组中的每个元素进行操作并返回一个新的数组。map()方法接收一个函数作为参数,在该函数中定义对每个元素进行的操作。 

下面是一个示例,演示了如何使用 map() 方法将数组中的每个元素都平方,并返回一个包含平方后结果的新数组:

const array = [1, 2, 3, 4, 5];
const squaredArray = array.map((num) => num ** 2);

console.log(squaredArray); // Output: [1, 4, 9, 16, 25]

filter()方法用于过滤数组中的元素,只保留符合特定条件的元素,并返回一个新数组。该方法接受一个回调函数作为参数,该回调函数将在数组的每个元素上被调用。 

回调函数接受三个参数:

当前遍历的元素
1、元素索引
2、原始数组
3、回调函数必须返回一个布尔值,表示当前元素是否应该保留在新数组中。如果返回值为true,则该元素将被保留,否则将被过滤掉。

例如,假设有一个包含数字的数组,我们想要过滤出其中所有的偶数。可以使用以下代码:

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // 输出 [2, 4, 6]

reduce() 方法是一个高阶函数,它接受一个回调函数和一个可选的初始值参数。这个回调函数可以用来执行归纳操作,将数组中的所有元素归约成单个值。

回调函数有两个参数:累加器(accumulator)和当前值。累加器是上一次回调函数的返回值,而当前值是数组中正在处理的元素。回调函数必须总是返回一个值,以便在下一次迭代时使用。

以下是一个使用 reduce() 方法计算数组总和的示例:

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15

find():返回匹配的值

var arr = [1,2,3,4,5,6]
var findData = arr.find(item=>{
 return item == 2
})
console.log(findData) // 2
var findData1 = arr.find(item=>{
 return item == 8
})

console.log(findData1) // undefined

findIndex():返回匹配位置的索引

var arr = [1,2,3,4]
var index = arr.find(item=>{
 return item == 2
})
console.log(index) //1

 toLocaleString()、toString():将数组转换为字符串

var arr = [1,2,3,4]
console.log(arr.toString()) //'1,2,3,4'
console.log(arr.toLocaleString()) //'1,2,3,4'