目录
1.会改变原数组的方法（7种）
1.push()
2.pop()
3.unshift()
4.shift()
5.reverse()
6.sort()
7.splice()
2.不改变原数组的方法（13种，返回的新数组是从原数组浅拷贝来的）
1.concat()
2.join()
3.slice()
4.indexOf()
5.forEach()
6.map()
7.filter()
8.every()
9.some()
10.find()
11.findIndex()
12.includes()
13.reduce()
- 理解一个API最重要的是看它的作用，参数，返回值。
- 每一个API这三个方面我都会先说明，并在后面的例子中体现出来。
- 看完这篇文章，在写代码或者面试的时候你还只会那几种屈指可数的方法吗？
- 赶快学起来吧！
1.会改变原数组的方法（7种）
1.push()
- 作用：尾部添加元素
- 参数：添加的元素
- 返回值：操作完成后数组的长度
let arr = [10, 20, 30, 40];let response = arr.push(20, 50);console.log(arr);console.log(response);
2.pop()
- 作用：尾部删除一个元素
- 参数：无
- 返回值：删除的那个元素
let arr = [10, 20, 30, 40];let response = arr.pop();console.log(arr);console.log(response);
3.unshift()
- 作用：头部添加元素
- 参数：添加的元素
- 返回值：操作完成后数组的长度
let arr = [1, 2, 3, 4];let response = arr.unshift(0, 1, "123", true, { a: 100 });console.log(arr);console.log(response);
4.shift()
- 作用：头部删除一个元素
- 参数：无
- 返回值：删除的那个元素
let arr = [1, 2, 3, 4];let response = arr.shift();console.log(arr);console.log(response);
5.reverse()
- 作用：反转数组
- 参数：无
- 返回值：操作完成后的数组
let arr = [1, 2, 3, 4];let response = arr.reverse();console.log(arr);console.log(response);
6.sort()
- 作用：排序
- 参数：无（默认从小到大排序）或函数
- 返回值：操作完成后的数组
let arr = [-1, 1, 5, 3, 4, 6, 2, 7];//默认let response = arr.sort();console.log(arr);console.log(response);//从小到大排序arr.sort((a, b) => {return a - b;});console.log(arr);//从大到小排序arr.sort((a, b) => {return b - a;});console.log(arr);
7.splice()
- 作用：在指定索引处删除，添加元素
- 参数：（索引，删除元素的个数，添加的元素）。第三个参数可选
- 返回值：删除的元素（数组）
let arr = [-1, 1, 5, 3, 4, 6, 2, 7];let response = arr.splice(2, 2);console.log(arr);console.log(response);let arr2 = [-1, 1, 5, 3, 4, 6, 2, 7];let response2 = arr2.splice(2, 0, 8);console.log(arr2);console.log(response2);
2.不改变原数组的方法（13种，返回的新数组是从原数组浅拷贝来的）
1.concat()
- 作用：合并多个数组
- 参数：（数组）
- 返回值：返回一个新数组
let arr = [1, 2, 3, 4, 5];let arr2 = ["zs", "ls", "ww", 1, 2];let res = arr.concat(arr2);console.log(arr);console.log(res);
2.join()
- 作用：把数组转化成以指定分隔符连接的字符串
- 参数：（分隔符，或无参数（默认的分隔符是' , '））
- 返回值：字符串
let arr = [1, 2, 3, 4, 5];let res = arr.join("--");let res2 = arr.join();console.log(arr);console.log(res);console.log(res2);
3.slice()
- 作用：截取数组
- 参数：（开始索引，结束索引）。截取的元素包括开始索引，不包括结束索引
- 返回值：新数组
let arr = [1, 2, 3, 4, 5];let res = arr.slice(1, 3);console.log(arr);console.log(res);
4.indexOf()
- 作用：查找元素在数组中的索引
- 参数：（查找的元素）
- 返回值：索引值。数组中没有此元素则返回-1
let arr = [1, 2, 3, 4, 5];let res = arr.indexOf(4);let res2 = arr.indexOf(6);console.log(arr);console.log(res);console.log(res2);
5.forEach()
- 作用：遍历数组
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：无
let arr = [1, 2, 3, 4, 5];let res = arr.forEach((item, index) => {console.log(item, "-", index);});console.log(arr);console.log(res);
6.map()
- 作用：映射数组（必须通过return关键字来映射）
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：新数组
let arr = [1, 5, 3, 4, 6];let res = arr.map((item, index) => {let a = item + index;return a;});console.log(arr);console.log(res);
7.filter()
- 作用：过滤筛选数组（必须要用return关键字）
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：新数组
let arr = [1, 5, 3, 4, 6];let res = arr.filter((item, index) => {//第一种方式：// if (item >= 4) {// return true;// }//第二种方式：return item >= 4;//两种方式效果都一样});console.log(arr);console.log(res);
8.every()
- 作用：判断数组中每个元素是否都满足指定的条件（必须要用return关键字）
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：布尔值
let arr = [1, 2, 3, 4, 5];let res = arr.every((item, index) => {return item > 0;});console.log(arr);console.log(res);let res2 = arr.every((item, index) => {return item > 3;});console.log(arr);console.log(res2);
9.some()
- 作用：判断数组中是否有元素满足指定的条件（必须要用return关键字）
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：布尔值
let arr = [1, 2, 3, 4, 5];let res = arr.some((item, index) => {return item > 2;});console.log(arr);console.log(res);let res2 = arr.some((item, index) => {return item > 5;});console.log(arr);console.log(res2);
10.find()
- 作用：获取数组中满足指定条件的第一个元素（必须要用return关键字）
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：满足指定条件的第一个元素。没有满足条件的返回undefined
let arr = [1, 2, 3, 4, 5];let res = arr.find((item, index) => {return item > 3;});console.log(arr);console.log(res);let res2 = arr.find((item, index) => {return item > 5;});console.log(arr);console.log(res2);
11.findIndex()
- 作用：获取数组中满足指定条件的第一个元素的索引（必须要用return关键字）
- 参数：函数（函数中依次传入的参数：数组中的每一项，每一项对应的索引）
- 返回值：索引值。没有满足条件的元素则返回-1
let arr = [1, 2, 3, 4, 5];let res = arr.findIndex((item, index) => {return item > 2;});console.log(arr);console.log(res);let res2 = arr.findIndex((item, index) => {return item > 5;});console.log(arr);console.log(res2);
12.includes()
- 作用：判断数组中是否包含指定的元素
- 参数：指定的元素
- 返回值：布尔值
let arr = [1, 2, 3, 4, "ab", "bd"];console.log(arr.includes(2));console.log(arr.includes(5));console.log(arr.includes("ab"));console.log(arr.includes("c"));
13.reduce()
- 作用：对数组的元素进行叠加操作（必须要用return关键字）
- 参数：函数（函数中依次传入的参数：前一次操作返回的值，当前项，当前项的索引），第二个参数（作为pre的初始值，可选）
- 返回值：最后一次遍历return的值
let arr = [1, 2, 3, 4, 5];//不传第二个参数：pre的初始值是数组第一个元素，cur是第二个元素，index从1开始let res = arr.reduce((pre, cur, index) => {console.log(pre, cur, index);return pre + cur;});console.log(res);//传第二个参数：pre的初始值是传入的第二个参数，cur是第一个元素，index从0开始let res2 = arr.reduce((pre, cur, index) => {console.log(pre, cur, index);return pre + cur;}, -1);console.log(res2);//应用1//计算数组中每个元素出现的次数let arr2 = [1, "b", 1, "a", "b", 1, 2];let num = arr2.reduce((pre, cur, index) => {if (cur in pre) {pre[cur]++;} else {pre[cur] = 1;}return pre;}, {});console.log(num);//应用2//对数组中对象里的属性进行累加let arr3 = [{subject: "math",score: 10,},{subject: "chinese",score: 20,},{subject: "english",score: 30,},];let sum = arr3.reduce((pre, cur, index) => {return pre + cur.score;}, 0);console.log(sum);
文章到这里就结束了，觉得有收获的可以点赞和收藏哦！也欢迎大家评论区留言。
