网站首页 > 基础教程 正文
在我们前端来说数组作为一个常用的类型,今天我们讲一下在实际使用中经常用到的方法和使用场景。
concat() 多数组组合
concat() 可以用来连接两个或多个数组,返回要给新的数组并且不会影响之前的数组。
使用方法:arr.concat(arr1,arr2,......,arrn) 他的参数可以是多个数组。实例如下:
var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = [7,8,9];
arr.concat(arr1,arr2)
输出结果:
[1,2,3,4,5,6,7,8,9]
join()将数组元素连接到一起
join()方法是把数组中所有的元素通过指定的分隔符连接成一个统一的字符串。
实例如下:
var arr = ["str1","str2","str3"]
arr.join("#")
输出结果:
str1#str2#str3
pop()删除数组的最后元素
pop() 是用来删除数组的最后一个元素。咱们直接上实例:
var arr = ["str1","str2","str3"]
arr.pop()
输出结果:
["str1","str2"]
push()往数组结尾添加元素
push() 方法适用于向数组的末尾添加一个或多个元素。
使用方法:
arr.push(obj1,obj2,......objn) 我们可以看到这个方法可以添加多个参数。具体实例如下:
var arr = ["str1","str2","str3"]
arr.push("obj1","obj2","obj3")
输出结果:
["str1","str2","str3","obj1","obj2","obj3"]
unshift()往数组开头添加元素
unshift() 方法适用于向数组的末尾添加一个或多个元素。也可以添加多个参数。具体实例如下:
var arr = ["str1","str2","str3"]
arr.unshift("obj1","obj2","obj3")
输出结果:
["obj1", "obj2", "obj3", "str1", "str2", "str3"
forEach() 和for()数组循环遍历
共同点:两者都是用于对数组的循环遍历
var arr = ["str1","str2","str3"]
for (let index = 0; index < this.arr.length; index++) {
const element = this.arr[index];
console.log(element)
}
this.arr.forEach(element => {
console.log(element)
});
输出结果相同:
["str1","str2","str3"]
不同点:for 可以中途中断 但是forEach不行他会执行完整个数组元素
var arr = ["str1","str2","str3"]
for (let index = 0; index < this.arr.length; index++) {
const element = this.arr[index];
console.log(element)
if(index==1){
return
}
}
this.arr.forEach(element => {
console.log(element)
return
});
输出结果:
["str1","str2"]
输出结果:
["str1","str2","str3"]
我们看出for函数只输出了两个值就中断了 但是forEach确将所有的数据都输出了。整个地方是特别容易出错并且不容易找出错误的地方。所以大家一定要区分开两个函数的共同点和区别。
map()函数
map函数可以根据之前的对象根据某个条件进行某种变换,生成另外一个新的对象。
let arr=[1,2,3]
let createArr=arr.map(item=>{
return item*2
})
输出结果:
[2,4,6]
filter() 函数
filter函数用于数组中获取过滤符合条件的所有元素,返回过滤后的数组,如果没有符合条件的元素则返回空数组。
let arr=[1,2,3]
let arr2=arr.filter(item=>{
return item.value>1
})
输出结果:
[2,3]
find()函数
find()函数查找符合条件的值,不过有几点注意事项:
1、返回符合条件的第一个元素的值,多符合也只是返回一个。
2、如果没有符合判断条件的则返回 undefined。
let arr=[1,2,3]
let arr2=arr.find(item=>{
return item.value==1
})
输出结果:
[1]
猜你喜欢
- 2024-11-06 javascript夯实基础-3 javascript基础教程9
- 2024-11-06 JavaScript 数组方法 js数组方法some
- 2024-11-06 JAVASCRIPT数组详解(一) js数组菜鸟教程
- 2024-11-06 JavaScript 数组嵌套对象的排序方法
- 2024-11-06 javascript中的内存管理 js内存条
- 2024-11-06 JS的赋值与深浅拷贝实例 js 深度复制
- 2024-11-06 讲透40个JavaScript数组方法的特点
- 2024-11-06 Javascript 字符串和数组同名的方法有哪些?
- 2024-11-06 使用nginx-http-concat优化网站响应
- 2024-11-06 JavaScript 数据类型——String javascript中数据类型分为哪两大类
- 最近发表
-
- 掌握SpringBoot-2.3的容器探针:实战篇
- kubernetes基础知识之驱逐节点(k8s驱逐节点后恢复)
- Linux环境中制作网络哨兵Sentinel Docker镜像
- k8s之配置CNI网络(k8s 网络配置)
- docker实战之:镜像更新(docker 镜像升级替换)
- 离线在docker镜像方式部署ragflow0.17.2
- Linux日常小技巧Docker打包(docker打包lnmp)
- 使用dockerfile构建docker镜像(docker通过dockerfile构建镜像命令)
- 「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作
- Kylin安装Dify(kylin安装部署)
- 标签列表
-
- jsp (69)
- pythonlist (60)
- gitpush (78)
- gitreset (66)
- python字典 (67)
- dockercp (63)
- gitclone命令 (63)
- dockersave (62)
- pythonif (68)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- console.table (62)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)