js数组方法,常用数组Api的基本使用
时间:2022-07-23
本文章向大家介绍js数组方法,常用数组Api的基本使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 => {
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]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringMVC:基本应用
- SpringMVC:进阶
- SpringMVC:SSM 整合
- 12 | Tornado源码分析:BaseIOStream 对象(上)
- 数据一致性校验及数据同步,运维必看
- Windows使用scoop包管理器安装RabbitMQ
- 深入理解web协议(二):DNS、WebSocket
- Elasticsearch:使用 function_score 及 soft_score 定制搜索结果的分数
- Elasticsearch:基于 Vector 的打分
- RocketMQ的发送模式和消费模式
- 实现一个简单的JS效果
- 1000000 / 60S 的 RocketMQ 不停机,扩容,平滑升级!
- Mysql支持远程链接访问
- linux shell编程
- Linux下的I/O复用与epoll详解