js中常用的数组方法

136 阅读6分钟

1、push() 向数组的末尾添加新内容

参数:要添加的项。传递多个用逗号隔开

返回值:新增后数组的长度

是否改变原数组:改变

let arr = [1, 2, 3];
arr.push(4); 
// 返回一个新的长度length = 4
console.log(arr)
// 结果为 [1, 2, 3, 4]

2、pop() 删除数组的最后一项

参数:无

返回值:被删除的项

是否改变原数组:改变

let arr = [1, 2, 3, 4];
arr.pop();
// 删除的最后一项为 4
console.log(arr);
// [1, 2, 3]

3、shift() 删除数组的第一项

参数:无

返回值:被删除的项

是否改变原数组:改变

let arr = [1, 2, 3, 4];
arr.shift();
// 删除的第一项为 1 
console.log(arr);
//[2, 3, 4]

4、unshift() 向数组首位添加新内容

参数:要添加的项,多项用逗号隔开

返回值:新数组的长度

是否改变原数组:改变

let arr = ['c','d'];
arr.unshift('a','b');
console.log(arr);
// ["a", "b", "c", "d"]`

5、slice() 按照条件查找出其中的部分内容

参数:

array.slice(n, m),从索引n开始查找到m处(不包含m)

array.slice(n) 第二个参数省略,则一直查找到末尾

array.slice(0)原样输出内容,可以实现数组克隆

array.slice(-n,-m) slice支持负参数,从最后一项开始算起,-1为最后一项,-2为倒数第二项

返回值:返回一个新数组

是否改变原数组:不改变

let arr = [1, 2, 3 ,4, 5, 6, 7, 8, 9];
console.log(arr.slice(2, 8));
// 从索引2开始查找到索引为8的内容,结果为[3, 4, 5, 6, 7, 8]

console.log(arr.slice(-2, -1));
// [8]

6、splice() 对数组进行增删改

增加:arr.splice(n, 0, m) 从索引n开始 删除0项,把m或者更多的内容插入到索引n的前面

返回空数组

修改:arr.splice(n, x, m) 从索引n开始 删除x个,m替换删除的部分

把原有内容删除掉,然后用新内容替换掉

删除:arr.splice(n,m) 从索引n开始删除m个内容(如果第二个参数省略,则从n删除到末尾)

返回删除的新数组,原有数组改变

// 增加  
let arr = [33, 44, 55 ,66, 77, 88];
arr.splice(2, 0, 'a', 'b')
console.log(arr);
// [33, 44, "a", "b", 55, 66, 77, 88]

//修改  
let arr = [33, 44 ,55 ,66, 77, 88];
arr.splice(1 ,2, 'x', 'y')
console.log(arr);
// [33, "x", "y", 66, 77, 88]

//删除
let arr = [33, 44, 55, 66, 77, 88];
//console.log(arr.splice(3, 2))
// [66, 77]
console.log(arr.splice(3));
// [66, 77, 88] 

7、join() 用指定的分隔符将数组每一项拼接为字符串

参数:指定的分隔符(如果省略该参数,则使用逗号作为分隔符)

返回值:拼接好的字符串

是否改变原数组:不改变

let arr = [1, 2, 3];
console.log(arr.join('、'));
// 1、2、3

8、concat() 用于连接两个或多个数组

参数:参数可以是具体的值,也可以是数组对象。可以是任意多个

返回值:返回连接后的新数组

是否改变原数组:不改变

let arr_1 = [1, 2];
let arr_2 = [3, 4]
let arr8 = arr_1.concat(arr_2);
console.log(arr8);
//1, 2, 3, 4]

9、indexOf() 检测当前值在数组中第一次出现的位置索引

参数:arr.indexOf(item, start) item: 查找的元素 start: 字符串中开始检索的位置

返回值:第一次查到的索引,未找到返回-1

是否改变原数组:不改变

 let arr = ['a', 'b', 'c', 'd', 'e', 'a', 'f'];  
 console.log(arr.indexOf('c'));
 // 2
 console.log(arr.indexOf('a', 3))
 // 5
 console.log(arr.indexOf('z'))
 // -1

10、lastIndexOf() 检测当前值在数组中最后一次出现的位置索引

参数:arr.lastIndexOf(item, start) item: 查找的元素 start: 字符串中开始检索的位置

返回值:最后一次查到的索引,未找到返回-1

是否改变原数组:不改变

let arr = ['a', 'b', 'c', 'd', 'e', 'a', 'f'];
console.log(arr.lastIndexOf('c'));
// 2
console.log(arr.lastIndexOf('a'))
// 5

11、includes() 判断一个数组是否包含一个指定的值

参数:指定的内容

返回值:布尔值

是否改变原数组:不改变

let arr = ['a','b','c','d'];
console.log(arr.includes('c'));
// true
console.log(arr.includes(2));
// false

12、sort() 对数组的元素进行排序(默认是从小到大来排序 并且是根据字符串来排序的)

参数:可选(函数) 规定排序规则 默认排序顺序为按字母升序

返回值:排序后新数组

是否改变原数组:改变

sort在不传递参数情况下,只能处理10以内(个位数)数字排序

let arr = [5, 6, 8, 9, 4];
arr.sort()
// [4, 5, 6, 8, 9]

let arr = [32, 44, 23, 54, 90, 12, 9];
arr.sort(function(a,b){ return a-b });  
// 结果[9, 12, 23, 32, 44, 54, 90]

arr.sort(function(a,b){ return b-a });
// 结果[90, 54, 44, 32, 23, 12, 9]

13、reverse() 把数组倒过来排列

参数:无

返回值:倒序后新数组

是否改变原数组:改变

let arr = [6, 8, 10, 12];
console.log(arr.reverse());
// [12, 10, 8, 6]

14、forEach() 循环遍历数组每一项

参数:函数 arr.forEach((item, index, arr) => {}) item: 每一项 index: 索引 arr: 当前数组

返回值:无

是否改变原数组:改变

forEach中不能使用continue和break,forEach中不能跳出,只能跳过(return跳过)

let arr = [1, 2, 3, 4, 5];
arr.forEach((num, index, arr) => {
return (arr[index] = num * 2);
});
console.log(arr);
// [2, 4, 6, 8, 10]

15、map() 按顺序为数组中的每个元素调用一次提供的函数

参数:函数 arr.map((item, index, arr) => {}) item: 每一项 index: 索引 arr: 当前数组

返回值:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

是否改变原数组:不改变

let arr = [1, 2, 3];
let item = arr.map((item) => {
return item += 1;
});
console.log(item);
// [2, 3, 4]

16、every() 检查数组中的所有元素是否满足条件

参数:函数 arr.every((item, index, arr) => {}) item: 每一项 index: 索引 arr: 当前数组

返回值:布尔值

是否改变原数组:不改变

let arr = [1, 2, 3];
let result = arr.every((item, index, arr) => {
    return item > 2
 })
console.log(result)
// false

let arr = [1, 2, 3];
let result = arr.every((item, index, arr) => {
    return item < 5
 })
console.log(result)
// true

17、some() 检查数组中是否有元素满足条件

参数:函数 arr.some((item, index, arr) => {}) item: 每一项 index: 索引 arr: 当前数组

返回值:布尔值

是否改变原数组:不改变

let arr = [1, 2, 3];
let result = arr.some((item, index, arr) => {
    return item > 2
 })
console.log(result)
// true

18、filter() 过滤满足条件的元素,并返回一个新数组

参数:函数 arr.filter((item, index, arr) => {}) item: 每一项 index: 索引 arr: 当前数组

返回值:返回一个新数组

是否改变原数组:不改变

let arr = [1, 2, 3, 4];
let result = arr.filter((item, index, arr) => {
    return item > 3
 })
console.log(result)
// [4]

19、reduce() 求一个数组的累计和

参数:函数 arr.reduce((pre, value, index) => {}, 0) pre: 代表前面所有的加一起的累积值 value: 数组中的每一项 index: 索引 0:表示初始值

返回值:数组的累计和

是否改变原数组:不改变

let arr = [1, 2, 3, 4];
let result = arr.reduce((pre, value, index) => {
    return pre += value
 }, 0)
console.log(result)
// 10

20、findIndex() 查找满足条件的索引

参数:函数 arr.findIndex(((item, index, arr) => {}) item: 每一项 index: 索引 arr: 当前数组

返回值:返回找满足条件的索引值

是否改变原数组:不改变

let arr = [1, 2, 3, 4];
let result = arr.findIndex((item, index, arr) => {
    return item == 2
 })
console.log(result)
// 1