【JS】数组常用方法总结-功能、参数、返回值

数组常用方法总结-功能、参数、返回值

用简单的js示例
运行在线工具：链接: 菜鸟工具
菜鸟工具示意图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/de8589eb1acf42abb0347d8a3a3bbdfa.png

1.会改变原有数组方法

（1）push、pop-最后元素增删

push

-功能：在数组的最后面,添加一个或者多个元素
-参数：array.push(item1, item2, …, itemX),参数可以是字符串、数组、对象等
-返回值:添加元素后数组的长度.

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

pop
-功能：在数组的最后面,删除一个元素
-参数：array.pop()无参数
-返回值:返回的是刚才删除的元素.

let arr = [1,2,3,4,5];
let arrnew=arr.pop()
console.log(arr);//[1, 1, 2, 3, 4]
console.log(arrnew);5

（2）unshif、shif-最前元素增删

unshift
-功能：在数组的最前面,添加一个或者几个元素
-参数：array.unshift(item1,item2, …, itemX),参数可以是字符串、数组、对象等
-返回值:添加元素后数组的长度.

let arr = [1,2,3,4,5];
let arrnew=arr.unshift(1)
console.log(arr);//[1, 1, 2, 3, 4, 5]
console.log(arrnew);6

shift
-功能：在数组的最前面,删除一个元素
-参数：arr.shift()无参数
-返回值:返回的是刚才删除的元素.

let arr = [2,3,4,5];
let arrnew=arr.shift()
console.log(arr);//[3, 4, 5]
console.log(arrnew);//2

（3）splice-元素删除与添加

-功能：添加或删除数组中的元素
-参数：array.splice(index,howmany,item1,…,itemX)
从index下标开始,删除howmany个,并在该位置添加item
（其中index参数必须）
-返回值：含有被删除的元素的数组

//arr.splice(start,deletedCount,item)
let arr = [1,2,4,17,3];
let arrnew=arr.splice(1,3,7)
console.log(arr);//[1,7, 3]
console.log(arrnew);// [2, 4, 17]

//arr.splice(start,deletedCount)
let arr = [1,2,4,17,3];
let arrnew=arr.splice(1,3)
console.log(arr);//[1, 3]
console.log(arrnew);// [2, 4, 17]

//arr.splice(start,0,item)
let arr = [1,2,4,17,3];
let arrnew=arr.splice(1,0,7)
console.log(arr);// [1, 7, 2, 4, 17, 3]
console.log(arrnew);// []

（4）copyWithin-复制元素

-功能：从数组的指定位置拷贝元素到数组的另一个指定位置中
-参数：array.copyWithin(target, start, end)
其中target为必须参数，其余可选
-返回值:返回改变后的新数组

const arr1 = [1,2,3,4,5];
const arrnew = arr1.copyWithin(2, 0, 2);
console.log(arr1);//[1, 2, 1, 2, 5]
console.log(arrnew);//[1, 2, 1, 2, 5]

（5）sort-数组排序

-功能：对数组的元素进行排序。
-参数1：无参数
-返回值:将按照ASCII字符顺序进行排序
(如果数组元素是数字，sort方法会调用每一个数组项的toString()方法，获得字符串，而后再对获得的字符串进行排序);
(如下实例数组元素是数字，无参数，所以17会排在2的前面）

//无参数，17在2的前面
let arr = [1,2,4,17,3];
let arrnew=arr.sort();
console.log(arr);//[1, 2, 3, 4, 17]
console.log(arrnew);//[1, 2, 3, 4, 17]

-参数2：arr.sort(function(a,b){}）回调函数，其中b值在a值前面
-返回值:
如果返回值大于 0，则位置互换。
如果返回值小于 0，则位置不变。
a-b输出从小到大排序
b-a输出从大到小排序。

//有参数
let arr = [1,2,4,17,3];
let arrnew=arr.sort(function(a,b){return a-b;
});
console.log(arr);//[1, 2, 3, 4, 17]
console.log(arrnew);// [1, 2, 3, 4, 17]

（6）reverse-数组排序

-功能：对数组的元素进行翻转。
-参数：array.reverse()无参数
-返回值:颠倒顺序的数组

let arr = [1,2,4,7,3];
let arrnew=arr.reverse();
console.log(arr);//[3, 7, 4, 2, 1]
console.log(arrnew);//[3, 7, 4, 2, 1]

2.不会改变原有数组方法

2.1 判断方法

（1）isArray() -判断是否是数组

-功能：判断是否是数组。
-参数：Array.isArray(arr)，参数为要判断的对象
-返回值:如果对象是数组返回 true，否则返回 false。

let arr = [1,2,4,7,3];
let arrnew=Array.isArray(arr);
console.log(arr);//[3, 7, 4, 2, 1]
console.log(arrnew);//true

2.2 操作方法

（1）concat-拼接数组

-功能：连接两个或更多的数组
-参数：array1.concat(array2, array3,…, arrayX)
-返回值:返回拼接后的新数组
-concat和push的区别：push是将参数作为整体直接加到数组最后一个，并且返回值是新数组长度，如下例子push后的结果应为[1,2,3,4,5,[a,b]]所以返回的长度为6）

const arr1 = [1,2,3,4,5];
const arr2 = ['a','b'];
const arrnew = arr1.concat(arr2);
const arr3 = arr1.push(arr2);
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arr2);
console.log(arrnew);//[1, 2, 3, 4, 5, 'a', 'b']
console.log(arr3);//6

（2）slice-截取数组

-功能：从数组中截取指定的字段
-参数1：arr.slice(start,end)从start下标开始截取,一直到end结束,不包括end
-返回值:返回截取的新数组

let arr = [1,2,3,4,5];
let arrnew=arr.slice(2,3)
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew);//[3]

-参数2：arr.slice(start) ;从start下标开始截取,一直到最后

let arr = [1,2,3,4,5];
let arrnew=arr.slice(3)
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew);//[4, 5]

-参数3：arr.slice( ) ;全部截取

let arr = [1,2,3,4,5];
let arrnew=arr.slice()
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew);//[1, 2, 3, 4, 5]

2.4 查询方法

（1.1）indexOf-查找元素第一次出现

-功能：查找元素在数组中第一次出现的位置，可以用来判断数组是否含有该元素
-参数1：arr.indexOf (element,fromIndex),从fromIndex这个下标开始，（从左往右）元素第一次出现的位置
-返回值：查找到的元素的下标（若无此元素，返回-1）

let arr = [1,2,4,6,3];
let arrnew=arr.indexOf(4)
if (arr.indexOf(4) === -1){console.log('元素不存在')
} else {console.log(' 元素存在!')
}
console.log(arr);// [1,2,4,6,3];
console.log(arrnew);// 2

（1.2）lastIndexOf-查找元素最后一次出现

-功能：查找元素在数组中最后出现的位置
-参数1：arr.lastIndexOf (element,fromIndex),从fromIndex这个下标开始,（从右往左）元素最后一次出现的位置
（这里最后一项是按照数组从左往右的最后一项）
（虽然是从右往左搜索，但返回的位置是从左往右数的）
-返回值：查找到的元素的下标（若无此元素，返回-1）

let arr = [1,2,4,6,4,3];
let arrnew=arr.lastIndexOf(4)
let arrnew2=arr.lastIndexOf(4,1)
console.log(arr);// [1, 2, 4, 6, 4, 3]
console.log(arrnew);// 4
console.log(arrnew2);// -1

（2）includes-查找元素

-功能：判断一个数组是否包含一个指定的值
-参数1：arr.includes (searchElement,fromIndex)
searchElement:必须；fromIndex可选
-返回值：如果是返回 true，否则false

let arr = [1,2,3,4,5];
let arrnew=arr.includes(1)
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//true

（3.1）find-匹配元素

-功能：find找到符合条件的项，
-参数：array.find(function(currentValue, index, arr),thisValue)
-返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。

let arr = [1,2,3,4,5];
let arrnew=arr.find(function(item){return item < 4
})console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//1

（3.2）findfindIndex-匹配元素

-功能：findIndex找到符合条件的项的下标
-参数：array.findIndex(function(currentValue, index, arr), thisValue)
-返回值：返回第一项下标，如果没有符合条件的则返回 -1

let arr = [1,2,3,4,5];
let arrnew=arr.findIndex(function(item){return item < 4
})console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//0

2.3 转换方法

（1）split-字符串拆分成数组

-功能：用指定的分隔符,将字符串分割成数组。
-参数：参数为要分隔的值
-返回值:一个新的数组

const str = 'test-arry';
const arr = str.split('-');
console.log(str);//test-arry
console.log(arr);//['test', 'arry']

（2）join-数组转为字符串整体

-功能：将数组里的元素,通过指定的分隔符,以字符串的形式连接起来
-参数：array.join(separator)
separator指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
-返回值:一个新的字符串

const arr1 = [1,2,3,4,5];
const arrnew = arr1.join('-');
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arrnew);//1-2-3-4-5

（3）toString()-数组转为字符串

-功能：把数组转换为字符串，数组中的元素之间用逗号分隔。
-参数：array.toString()
-返回值:一个新的字符串

const arr1 = [1,2,3,4,5];
const arrnew = arr1.toString()
console.log(arr1);//[1, 2, 3, 4, 5]
console.log(arrnew);//1,2,3,4,5

2.4 迭代方法

（1）forEach

-功能：调用数组的每个元素，并将元素传递给回调函数
-参数：array.forEach(callbackFn(currentValue, index, arr), thisValue)
-返回值：没有返回值

const arr = [1,2,3,4,5];
const arrnew = arr.forEach(function(item,index,arr){item=item+1
});
console.log(arr);//[1, 2, 3, 4, 5]
console.log(arrnew)//undefined

（2.1）some()-检测数组

-功能：some（）检测是否有元素符合指定条件，一旦找到，则不会继续迭代下去。
-参数：array.some(function(currentValue,index,arr),thisValue)
-返回值:符合true；不符合false

let arr = [1,2,3,4,5];
let arrnew=arr.some(function(item){return item < 2
})
let arrnew2=arr.every(function(item){return item < 2
})
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//true
console.log(arrnew2);//false

（2.2） every()-检测数组

-功能：every（）检测每个元素是否都符合条件；一旦有一个不符合条件，则不会继续迭代下去。
-参数：array.every(function(currentValue,index,arr), thisValue)
-返回值:符合true；不符合false

（3）filter()-过滤数组

-功能：通过检查指定数组中符合条件的所有元素
-参数arr.filter(function(currentValue,index,arr), thisValue)
-返回值:返回一个新数组

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

（4）map()-映射

-功能：对数组每一项都运行传入的函数
-参数：array.map(function(currentValue,index,arr), thisValue)
currentValue必须值，表示数组每一项元素
index: 对应的下标索引值
arr: 就是调用该方法的数组本身
thisValue：如果没有默认null或者undefined
-返回值：由每次函数调用的结果构成的数组

let arr = [1,2,3,4,5];
let arrnew=arr.map(function(item,index,arr){return item*2
})
console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//  [2, 4, 6, 8, 10]

（5）reduce-累加元素

-功能：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值；可以作为一个高阶函数，用于函数的 compose
-参数：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
total：必需。初始值, 或者计算结束后的返回值。
-返回值：由每次函数调用的结果构成的数组
-可计算数组总和、扁平化数组、数组去重、计算元素出现次数等

//计算数组总和
let arr = [1,2,3,4,5];
let arrnew=arr.reduce(function(total,item){return total+item
})console.log(arr);// [1, 2, 3, 4, 5]
console.log(arrnew);//15
//二维数组转为一维数组
let arr = [[1, 2], [2, 3], [4, 5], [6, 7]]let arrnew = arr.reduce((a, b) => {return a.concat(b)}, [])console.log(arrnew)//[1,2,2,3,4,5,6,7]//数组去重let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{if(!pre.includes(cur)){return pre.concat(cur)}else{return pre}
},[])
console.log(newArr);// [1, 2, 3, 4]
//计算每个元素出现的次数
let arr = [1,2,1,3,4,3]
let arrnew = arr.reduce((pre,cur) =>{
if( cur in pre){
pre[cur]++
}
else{
pre[cur] = 1
}
return pre
}, {})
console.log(arrnew) // {1: 2, 2: 1, 3: 2, 4: 1}

参考：
1.数组的常用方法大全
2.菜鸟教程: JavaScript Array 对象