js数组方法，常用数组Api的基本使用
原创
yooooo
修改
于
2020-11-02 11:16:48
修改
于
2020-11-02 11:16:48
1
concat()
连接数组， 返回值是一个添加后的数据， 原数组没改变
场景1 直接添加数据
var arr = [10,20,30,40]
var arr2 = arr.concat(40,50)
console.log(arr) // [10,20,30,40]
console.log(arr2) // [10,20,30,40,40,50]
场景2 添加数组
var arr = [10,20,30,40]
var arr2 =arr.concat([50,60])
console.log(arr3) // [10,20,30,40,50,60]
2
join()
将数组所有元素连接成一个字符串并返回这个字符串，不会改变原数组
var arr = [10,20,30,40]
var arr2 = arr.join('=')
console.log(arr) // [10,20,30,40]
console.log(arr2) // 10=20=30=40
3
pop()
删除数组的最后一个元素 返回值就是最后被删除的元素 会改变原数组
var arr = [10,20,30,40]
var arr2 = arr.pop()
console.log(arr2) // 40
console.log(arr) // [10,20,30]
4
reverse()
翻转数组 将数组进行翻转 最后一项变为第一项 倒数第二项变为第二项 以此类推 会改变原数组
var arr = [10,20,30,40]
arr.reverse()
console.log(arr) [40,30,20,10]
5
shift()
删除数组的第一个元素 返回值是被删除的元素 会改变原数组
var arr = [10,20,30,40]
var arr2 = arr.shift()
console.log(arr2) 10
console.log(arr) [20,30,40]
6
slice()
查找数组中选定范围的值 返回值是一个数组 不会改变原来的数组
该方法有两个参数 slice( start , end )
第一个参数：start：从那一个下标开始查找 如果为负数则倒着查找
第二个参数： end ： 结束位置 start <= 范围 < end
场景一 从下标 1 开始查找 到 下标 2 （不包含下标2）所以返回的就是 【20】
var arr = [10,20,30,40]
var arr2 = arr.slice(1,2)
console.log(arr2) // [20]
console.log(arr) // [10,20,30,40]
场景2 不写结束位置 会返回原数组
var arr = [10,20,30,40]
var arr2 = arr.slice(0)
console.log(arr2) // [10,20,30,40]
console.log(arr) // [10,20,30,40]
场景3 起始位置为负数 会倒着找 下面代码 从 尾数 开始找 结果如下
var arr = [10,20,30,40]
var arr2 = arr.slice(-2) // 从倒数第2个字符起一直到结束
var arr3 = arr.slice(0,-3) // 从开始一直到倒数第3个字符的前一个字符
console.log(arr2) // [30,40]
console.log(arr3) // [10,20]
7
splice()
方法用于添加或删除数组中的元素 会改变原来的数组
splice( index , howmany )
该方法有两个必填参数
参数 1
index
表示从什么位置开始添加或删除数组元素
参数 2
howmany
表示删除的元素数量，如果为0，则表示不删除数组元素
其他参数
item1,.....,itemX
添加的参数 可以不写
场景1 删除情况 下面代码 从下标 0 开始删除 删除 1 个元素
var arr = [10,20,30,40]
var arr2 = arr.splice(0,1)
console.log(arr2); // [10]
console.log(arr); // [20,30,40]
场景 2 添加情况 下面代码从 2 开始 删除 0 所以没有进行删除 然后从 2 开始进行添加
var arr = [10,20,30,40]
var arr2 = arr.splice(2,0,50,60,70)
console.log(arr2) // []
console.log(arr) // [10,20,50,60,70,30,40]
场景 3 删除添加情况 从 0 开始参数 删除2为 之后从0 添加
var arr = [10,20,30,40];
var arr2 = arr.splice(0,2,50,60,70);
console.log(arr2); // [10,20]
console.log(arr) // [50,60,70,30,40]
8
shift()
删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined
方法会改变原数组
var arr = [1,2,3,4]
arr.shift() // [1]
console.log(arr) // [2,3,4]
9
unshift()
: 将参数添加到原数组开头，并返回数组的长度 , 会改变原数组
var arr = [1,2,3,4]
arr.unshift(0) // 5
console.log(arr) // [0,1,2,3,4]
10
sort()
对数组进行排序，从小到大或从大到小 会改变原数组
let arr = [2, 10, 50, 5, 4]
arr.sort((a, b) => {
return a - b // 从小到大
console.log(arr) // [2, 4, 5, 10, 50]
arr.sort((a,b)=>{
return b-a // 从大到小
console.log(arr) // [50, 10, 5, 4, 2]
11
indexOf()
有
两个参数：1 要查找的项, 2查找的起点索引。其中， 从数组的开头（位置 0）开始向后查找 存在返回位置索引，不存在返回-1
var arr = [2, 10, 50, 5, 4]
console.log(arr.indexOf(50)) // 2
console.log(arr.indexOf(60)) // -1
12
forEach()
对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值
var arr = [10,20,30,40]
arr.forEach((item,index)=>{
console.log(item,index) // item 为每一项 index 为对应下标
})
13
map()
对数组每一项一个给定的函数 返回一个新数组
1 每一项都有return
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
console.log(arr2) // [1, 4, 9, 16, 25]
2 如果某一项没有return 默认为
undefined
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
if(item>2) return item
console.log(arr2) // [undefined, undefined, 3, 4, 5]
14
filter()
对数组符合条件的每一项进行过滤， 返回一个新数组
var arr = [10, 20, 30, 40]
var arr2 = arr.filter(item => {