数组相关函数

这个像夏天的冬天

已于 2022-03-12 09:49:54 修改

阅读量130

点赞数

分类专栏：数组文章标签： javascript 前端 node.js

于 2022-03-11 20:12:59 首次发布

本文链接：https://blog.csdn.net/weixin_48828067/article/details/123432476

版权

数组专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、es6----includes()方法–返回true和false

1）第一个参数是要查找的元素

2）第二个参数表示搜索的起始位置，默认为 0 。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为 -4 ，但数组长度为 3 ），则会重置为从 0 开始。

只有一个参数情况

[1, 2, 3].includes(2); // true
 
[1, 2, 3].includes(4); // false
 
[1, 2, NaN].includes(NaN); // true

两个参数的情况

[1, 2, 3].includes(3, 3); // false
 
[1, 2, 3].includes(3, -1); // true

2、indexOf()-----存在返回索引下标，不存在会返回-1；

不够语义化，indexOf是返回索引下标的意思，如果不存在会返回-1；
无法判断数组中的NaN。而includes方法不存在这两个问题。参考下图：

3、find()
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。
以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：

const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
console.log(v);// 5

没有符合元素，返回undefined:

const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>40);
console.log(v);// undefined

回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。

查找索引值为4的元素：

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
    return index==4
});
console.log(v);// 5

4、findIndex()–方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数，与find()相同。

const bookArr=[
    {
        id:1,
        bookName:"三国演义"
    },
    {
        id:2,
        bookName:"水浒传"
    },
    {
        id:3,
        bookName:"红楼梦"
    },
    {
        id:4,
        bookName:"西游记"
    }
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1

indexOf 与 findIndex 区别（总结）

indexOf ：查找值作为第一个参数，采用 === 比较，更多的是用于查找基本类型，如果是对象类型，则是判断是否是同一个对象的引用

findIndex ：比较函数作为第一个参数，多用于非基本类型(例如对象)的数组索引查找，或查找条件很复杂

5、filter()

filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。filter()返回的是数组，数组内是所有满足条件的元素，而find()只返回第一个满足条件的元素。如果条件不满足，filter()返回的是一个空数组，而find()返回的是undefined

var userArr = [
    { id:1,userName:"laozhang"},
    { id:2,userName:"laowang" },
    { id:3,userName:"laoliu" },
]
console.log(userArr.filter(item=>item.id>1));
//[ { id: 2, userName: 'laowang' },{ id: 3, userName: 'laoliu' } ]

数组去重：

var myArr = [1,3,4,5,6,3,7,4];
console.log(myArr.filter((value,index,arr)=>arr.indexOf(value)===index));
//[ 1, 3, 4, 5, 6, 7 ]

6、数组去重的方法

es6方法

方法一

[...new Set(test)];

方法二

Array.from(new Set(test))

7、map()和forEach()的区别和理解

共同点

1、都是循环遍历数组中的每一项
2、每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input
3、匿名函数中的this都是指window
4、只能遍历数组

能用forEach()做到循环的，map()同样也可以做到循环。反过来也是

差异点
1.map

有返回值，可以return出来一个length和原数组一致的数组(内容可能包含undefined、null等)

const array = [12,24,27,23,26];  
const res = array.map((item,index,input) => {  
       return item*10;   
})  
console.log(res); // [120,240,270,230,260]
console.log(array); // [12,24,27,23,26]不变

参数：item数组中的当前项，index当前项的索引，input原始数组
区别：map的回调函数中支持return返回值，return的是一个数组，相当于把数组中的这一项进行改变（并不影响原来的数组，只是相当于把原数组克隆了一份，把克隆这一份的数组中的对应项改变了）；

2.forEach
没有返回值，返回结果为undefined

const array = [12,24,27,23,26];  
const res = array.forEach((item,index,input) => {  
       return input[index] = item*10;   
})  
console.log(res); // undefined
console.log(array); // [120,240,270,230,260]原数组修改为变动后

参数：item数组中的当前项，index当前项的索引，input原始数组；
数组中有几项，那么传递进去的匿名回调函数就需要执行几次
理论上这个方式是没有返回值的，只是遍历数组中的每一项，不对原来数组进行修改，但是可以自己通过数组的索引来修改原来的数组

数组的操作

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

pop()：删除数组的最后一个元素，数组的长度减1，并且返回新数组(数组为空时，不改变数组，并返回undefined)

unshift()：向数组的头部添加一个或多个元素，返回新的长度

shift()：删除并返回数组的第一个元素

reverse()：颠倒数组中的元素顺序

sort()：对数组元素进行排序（默认按照ASCII）

var arr = [10,5,1000,25,1];
arr.sort(); // [1, 10, 1000, 25, 5]   默认按照首字母顺序排
arr.sort((a, b)=>{
    return a-b;
});   // [1, 5, 10, 25, 1000]  从大到小排序

concat()：链接两个或多个数组

join()：把所有的元素放进一个字符串，通过指定的分隔符分割

splice()：删除元素，并向数组添加新元素

var arr = [1, 2, 3, 4, 5, 6];
arr.splice(2, 3); // [3, 4, 5]   删除第三个元素以后的三个数组元素
 
arr.splice(2, 0, 7, 8);  // []   在第三个元素之前插入7和8
arr; // [1, 2, 7, 8, 9]
 
arr.splice(2, 3, 9, 10);  // [7, 8, 9]  删除第三个元素以后的三个数组元素，并用9和10代替
arr;  // [1, 2, 9, 10]

slice(start, end)：从某个已有的数组返回选定的元素(没有end参数时就到数组结尾)

indexOf(x, start)、lastIndexOf()：查找数组元素的位置，参数：要查的项和起点位置索引
some()：数组中只要有一项满足条件就返回true

filter()：返回满足给定条件的数据项组成的新数组，不改变原数组

reduce()：遍历数组，归并方法详解

arr = [1, 2, 3, 4];
arr.every((item,index,array) => {return item > 2;});  // false
 
arr.some((item,index,array) => {return item > 2;});  //true
 
arr.filter((item,index,array) => {return item > 2});  // [3, 4]
arr; // [1, 2, 3, 4]
 
arr.reduce((prev, cur, index, array) => { return prev + cur});  // 10  
（函数返回的任何值都会作为第一个参数传给下一项）

JS 中使用扩展运算符的10种方法