js数组(Array, arr)常用的方法

snows_l

已于 2024-05-11 10:04:03 修改

阅读量2.4k

点赞数 3

分类专栏： js 前端开发文章标签： javascript 前端

于 2023-05-11 15:32:15 首次发布

本文链接：https://blog.csdn.net/snows_l/article/details/130622838

版权

前端开发同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

一、arr的常用方法如下

1. arr.push() ==> 向数组末尾添加

2. arr.pop() ==> 删除数组末尾的一项

3. arr.unshift() ==> 向数组首位添加

4. arr.shift() ==> 删除数组首位的一项

5. arr.forEach() ==> 循环数组

6. arr.map() ==> 循环数组

7. arr.reverse() ==> 颠倒数组中元素的顺序

8. arr.concat() ==> 拼接两个数组

9. arr.splice() ==> 删除、插入和替换数组

10. arr.slice() ==> 截取数组

11. arr.sort() ==> 排序数组

12. arr.join(',') ==> 将数组改为，（逗号分割）的字符串

13. arr.toString() ==> 将数组改为字符串

14. arr.find() ==> 查找数组中满足条件的一项

15. arr.findIndex() ==> 查找数组中满足条件的第一项的index

16. arr.includes() ==> 查找数组是否存在某一项

17. arr.reduce() ==> 可用作累加器

二、详细介绍

1. arr.push()

- 功能：向末尾添加

- 是否接受参数：支持传入多位参数，传入一个就添加一个，传入多位就添加多位

- 是否操作源数组：是

- 返回：返回添加的数据

- eg:

let arr = [1,2,3]

arr.push(4)
console.log(arr) // [1,2,3,4]

arr.push(5,6)
console.log(arr) // [1, 2, 3, 4, 5, 6]

arr.push(7,8,9)
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2. arr.pop()

- 功能：删除数组末尾的一项

- 是否接受参数：不接受参数

- 是否操作源数组：是

- 返回：返回删除掉的最后一项数据

- eg:

let arr = [1, 2, 3]

arr.pop()

console.log(arr) //[1, 2]

3. arr.unshift()

- 功能：向首位添加

- 是否接受参数：支持传入多位参数，传入一个就添加一个，传入多位就添加多位

- 是否操作源数组：是

- 返回：返回添加的数据

- eg:

let arr = [1, 2, 3]

arr.unshift(5, 6)

console.log(arr) // [5, 6, 1, 2, 3]

4. arr.shift()

- 功能：向删除数组首位的一项

- 是否接受参数：不接受参数

- 是否操作源数组：是

- 返回：返回删除的第一项的数据

- eg:

let arr = [1, 2, 3]

arr.shift()

console.log(arr) //  [2, 3]

5. arr.forEach()

- 功能：循环数组（针对数组的每一项进行操作）

- 是否接受参数：接受一个函数（item, index, arr）=> {console.log('item, i, arr', item, i, arr);}

item：循环的当前项

i：循环的当前项的索引

arr：数组本身

- 是否操作源数组：是

- 返回：undefined

- eg:

let arr = [1, 2, 3];

let result = arr.forEach((item, i, arr) => {
  console.log('item, i, arr', item, i, arr);
  // item, i, arr 1 0 [1, 2, 3]
  // item, i, arr 2 1 [1, 2, 3]
  // item, i, arr 3 2 [1, 2, 3]
  item = item + 1;
});

console.log(arr); // [2, 3, 4]
console.log(result); // undefined

6. arr.map()

- 功能：循环数组（针对数组的每一项进行操作）

- 是否接受参数：接受一个函数（item, index, arr）=> {console.log('item, i, arr', item, i, arr);}

item：循环的当前项

i：循环的当前项的索引

arr：数组本身

- 是否操作源数组：否

- 返回：***返回处理过后的新数组（必须用return 返回）

- eg:

let arr = [1, 2, 3];

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

console.log(arr); // [1, 2, 3]
console.log(result); // [2, 3， 4]

7. arr.reverse()

- 功能：颠倒数组中元素的顺序

- 是否接受参数：否

- 是否操作源数组：是

- 返回：***返回处理过后的新数组

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.reverse();

console.log('arr', arr);  // [5, 4, 3, 2, 1]
console.log('result', result); // [5, 4, 3, 2, 1]

8. arr.concat()

- 功能：拼接两个数组

- 是否接受参数：接受数组,可多个

- 是否操作源数组：否

- 返回：***返回处理过后的新数组

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.concat([6, 7], [8, 9]);

console.log('arr', arr);  // [1, 2, 3, 4, 5]
console.log('result', result);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]

9. arr.splice()

- 功能：删除、插入和替换数组都可以(两个参数就是截取, 三个参数以上就是替换,三个参数以上时,第二参数截取长度为0, 就是添加)

- 是否接受参数：接受至少两个参数arr.splice(index, len, ...others)

index:索引,从那个索引开始替换

len:截取的长度

...others:截取之后要添加进去的内容(可以是无数个参数,添加参数就添加几个)

- 是否操作源数组：是

- 返回：截取的部分

- eg:

// 截取
let arr = [1, 2, 3, 4, 5];

let result = arr.splice(1, 2);
console.log('arr', arr); // [1, 4, 5]

console.log('result', result); // [2, 3]


// 替换
let arr = [1, 2, 3, 4, 5];

let result = arr.splice(1, 2, 9, 9, 9, 9, 9);

console.log('arr', arr); // [1, 9, 9, 9, 9, 9, 4, 5]
console.log('result', result); // [2, 3]


// 添加
let arr = [1, 2, 3, 4, 5];

let result = arr.splice(1, 0, 9, 9, 9, 9, 9);

console.log('arr', arr); // [1, 9, 9, 9, 9, 9, 2, 3, 4, 5]
console.log('result', result); // []

10. arr.slice()

- 功能：截取数组

当只有一个参数时,从startIndex开始,截取到最后;

参数可以是负数

- 是否接受参数：接受至少一个参数 arr.slice(startIndex, endIndex)

startIndex:开始截取的index

endIndex:截取到那个index(截取的不包含endIndex的项)

- 是否操作源数组：否

- 返回：截取后部分组成的数组

- eg:

// eg1
let arr = [1, 2, 3, 4, 5];

let result = arr.slice(1);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // [2, 3, 4, 5]


// eg2
let arr = [1, 2, 3, 4, 5];

let result = arr.slice(1, 3);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // [2, 3]


// eg3
let arr = [1, 2, 3, 4, 5];

let result = arr.slice(-3, -1);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // [3, 4]

11. arr.sort()

- 功能：排序数组(数组, 字符串, 汉字都可以排序)(按照ASCII码排序)

- 是否接受参数：可以接受参数,接受一个上函数(a, b) => a - b

升序: (a, b) => a - b / 不穿参

降序: (a, b) => b - a

- 是否操作源数组：是

- 返回：返回排序后的数组

- eg:

// eg1 升序
let arr = [4, 5, 7, 2, 3, 7, 2, 1];

let result = arr.sort();

console.log('arr', arr); // [1, 2, 2, 3, 4, 5, 7, 7]
console.log('result', result); // [1, 2, 2, 3, 4, 5, 7, 7]


// eg2 升序
let arr = [4, 5, 7, 2, 3, 7, 2, 1];

let result = arr.sort((a, b) => a - b);

console.log('arr', arr); // [1, 2, 2, 3, 4, 5, 7, 7]
console.log('result', result); // [1, 2, 2, 3, 4, 5, 7, 7]


// eg3 降序
let arr = [4, 5, 7, 2, 3, 7, 2, 1];

let result = arr.sort((a, b) => {
    return b - a
});

console.log('arr', arr); // [7, 7, 5, 4, 3, 2, 2, 1]
console.log('result', result); // [7, 7, 5, 4, 3, 2, 2, 1]

12. arr.join(param)

- 功能：将数组改为以任何字符(param)分割的字符串

- 是否接受参数：接受一个字符

- 是否操作源数组：否

- 返回：返回分割后的*字符串*

- eg:

// eg1 逗号分隔
let arr = [1, 2, 3, 4, 5];

let result = arr.join(',');

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 1,2,3,4,5


// eg2 中线
let arr = [1, 2, 3, 4, 5];

let result = arr.join('-');

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 1-2-3-4-5


// eg3 数字1
let arr = [1, 2, 3, 4, 5];

let result = arr.join(1);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 112131415

13. arr.toString()

- 功能：将数组改为字符串

- 是否接受参数：否

- 是否操作源数组：否

- 返回：返回分割后的*字符串*

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.toString();

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 1,2,3,4,5

14. arr.find()

- 功能：查找数组中满足条件的一项

- 是否接受参数：接受一个函数(item) => item == 8

- 是否操作源数组：否

- 返回：找到返回满足的第一项, 找不到返回undefined

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.find(item => item == 8});

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // undefined

15. arr.findIndex()

- 功能：查找数组中满足条件的第一项的index

- 是否接受参数：接受一个函数(item) => item == 8

- 是否操作源数组：否

- 返回：找到返回满足的第一项的index, 找不到返回-1

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.findIndex(item => item == 8});

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // -1

16. arr.includes()

- 功能：查找数组是否存在某一项

- 是否接受参数：接受一个函数

- 是否操作源数组：否

- 返回：找到返回true, 找不到返回false

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.includes(5);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // true

17. arr.reduce()

- 功能：可用作累加器, 去重等

- 是否接受参数：接受两个参数 arr.reduce((pre, curr) => {}, total)

第一个参数:函数(pre, curr) => {}

pre:上次循环返回的值,

curr:当前循环的项

第二个参数:初始化的字

- 是否操作源数组：否

- 返回：返回循环结束处理的值

- eg:

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((per, curr) => {
  return per + curr;
}, 0);

console.log('arr', arr); // [1, 2, 3, 4, 5]
console.log('result', result); // 15