js数组方法，常用数组Api的基本使用
原创
yooooo
修改于 2020-11-02 03:16:48
修改于 2020-11-02 03:16:48
代码可运行
运行总次数：0
代码可运行
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=403 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 => {
if (item >= 20) {
return item
}
})
console.log(arr2) // [20, 30, 40]15 flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
方法最基本的作用就是数组降维
var arr1 = [1, 2, [3, 4,5,[6,7]];
arr3.flat(Infinity); // [1,2,3,4,5,6,7]原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
前端学习(40)~js学习(十七)：数组的常见方法&数组的遍历
更多 >
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
