JS中数组常用的方法

最新推荐文章于 2023-07-05 17:49:49 发布

fantasy JJ

最新推荐文章于 2023-07-05 17:49:49 发布

阅读量229

点赞数 2

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/CharliePuthJJ/article/details/130555282

版权

关于js中数组的操作还蛮多的，有时候我知道某些方法，但是用起来又忘记某些语法和某些参数项，所以我打算根据归纳一下js常见的数组arr的方法，以便以后的使用起来更加熟练。

一.数组的方法：

join()：用指定的分隔符将数组每一项拼接为字符串
push()：向数组的末尾添加新元素
pop()：删除数组的最后一项
unshift()：向数组首位添加新元素
shift()：删除数组的第一项
slice()：按照条件查找出其中的部分元素
splice()：对数组进行增删改
filter()：过滤功能
concat()：用于连接两个或多个数组
indexOf()：检测当前值在数组中第一次出现的位置索引
lastIndexOf()：检测当前值在数组中最后一次出现的位置索引
every()：判断数组中每一项都是否满足条件
some()：判断数组中是否存在满足条件的项
includes()：判断一个数组是否包含一个指定的值
sort()：对数组的元素进行排序
reverse()：对数组进行倒序
forEach()：es5及以下循环遍历数组每一项
map()：es6循环遍历数组每一项
find()：返回匹配的项
findIndex()：返回匹配位置的索引
reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值
reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值
toLocaleString()、toString()：将数组转换为字符串
entries()、keys()、values()：遍历数组

二.以上是目前了解到的数组的方法，接下来是如何去使用，以及适用的解决什么问题

1.arr.join() --把数组中的所有元素转换一个字符串，默认使用逗号作为分隔符

一般是用于将数组转成字符串使用，join()括号里面是你需要分隔的字符

2.push()和pop() --

push()方法就是往数组末尾的地方添加元素，可以添加多个元素并且返回新的数组的长度。

pop()方法是从末端删除最后一个元素，并且返回那个被删除了的元素。

3.unshift()和shift() --和push()和pop()类似，只不过是变成了从数组的开始位置变化

unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度
shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

4.sort() --用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序，默认排序顺序为按字母升序

5.reverse() --用于颠倒翻转数组中元素的顺序，原数组改变，如果不希望修改原数组，可以先复制一份再进行反转操作

6.slice() --用法是arr.slice(start,end) ，该方法是对数组的一个截取方法，里面包含两个参数，一个是开始截取的数组索引，第二个是结束截取的数组索引，注意这个截取是左闭右开，也就是说索引为end的数据不会被截取进来

7.concat() --用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本

8.splice() --用于修改数组，可以删除数组中的元素，或向数组中添加新的元素。

用法：array.splice(start, deleteCount, item1, item2, ...);

start：表示要修改的起始索引位置，必须是一个非负整数，如果是负数，则表示从数组末尾开始计算索引位置。
deleteCount：表示要删除的元素数量，如果省略该参数，则删除从起始位置开始之后的所有元素。
item1, item2, ...：表示要添加到数组中的元素，如果省略该参数，则不添加新的元素。

9.forEach() --一种遍历数组的方法，可以对数组中的每个元素执行指定的操作。

array.forEach(function(currentValue, index, array) {
  // 在此处执行对数组元素的操作
});

currentValue：表示数组中当前正在被操作的元素。
index：表示当前元素在数组中的索引位置。
array：表示当前正在被操作的数组。

forEach() 方法的回调函数可以有三个参数：当前正在被操作的元素、该元素在数组中的索引位置和当前正在被操作的数组。回调函数中的参数可以根据需求选择性地使用。

10.map() --与foreach不同，map()返回一个新数组，会按照原始数组元素顺序依次处理元素

它也有三个参数和foreach一样的。

11.every() --判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

12.some() --判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

13.includes() --用来判断一个数组、字符串是否包含一个指定的值，使用===运算符来进行值比较，如果是返回true，否则false，参数有两个，第一个是(必填)需要查找的元素值，第二个是(可选)开始查找元素的位置

14.reduce()和reduceRight() --都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值，需要注意的是，由于 reduce() 和 reduceRight() 方法的迭代顺序不同，因此它们的结果也有所不同。在这个示例中，由于数组中的元素都是数字，因此两个方法的结果是相同的。但是，如果数组中的元素不是数字，而是字符串或对象等，那么使用 reduce() 和 reduceRight() 方法的结果可能会有所不同。

它们的参数是一个回调函数和一个可选的初始值。这个回调函数接收四个参数：

累加器（accumulator）：它是一个累计值，从初始值开始，在每次迭代中都会被更新。
当前值（currentValue）：它是数组中当前被处理的元素。
当前索引（currentIndex）：它是当前元素在数组中的索引值。
原数组（array）：它是当前正在被处理的数组。

15.toLocaleString()和toString() --都是将数组转换为字符串

toString() 方法会将数组中的每个元素转换为字符串，并用逗号分隔，然后将它们拼接在一起，最终返回一个以逗号分隔的字符串。

toLocaleString() 方法则会根据当前环境的语言环境，将数组中的每个元素转换为本地化字符串，并用逗号分隔，最终返回一个以逗号分隔的字符串。例如，在美国， toLocaleString() 方法会使用美国英语的格式将数字转换为字符串，而在法国，它会使用法语的格式将数字转换为字符串。

16. find()和findIndex() --

都接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数：数组的某个元素、该元素对应的索引位置、数组本身，在回调函数第一次返回true时停止查找。

二者的区别是：find()方法返回匹配的值，而findIndex()方法返回匹配位置的索引

17. entries()、keys()和values() --

entries() 方法返回一个由数组元素的索引值和对应的元素值组成的迭代器对象。每个元素都以 [index, element] 的形式返回，其中 index 是元素的索引，element 是元素的值

const fruits = ['apple', 'banana', 'orange'];

const iterator = fruits.entries();

console.log(iterator.next().value); // [0, 'apple']
console.log(iterator.next().value); // [1, 'banana']
console.log(iterator.next().value); // [2, 'orange']

keys() 方法返回一个由数组索引值组成的迭代器对象。每个索引值都以整数形式返回

const fruits = ['apple', 'banana', 'orange'];

const iterator = fruits.keys();

console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2

values() 方法返回一个由数组元素值组成的迭代器对象

const fruits = ['apple', 'banana', 'orange'];

const iterator = fruits.values();

console.log(iterator.next().value); // 'apple'
console.log(iterator.next().value); // 'banana'
console.log(iterator.next().value); // 'orange'

18.indexOf() --