网站首页 > 技术文章 正文
在我们前端来说数组作为一个常用的类型,今天我们讲一下在实际使用中经常用到的方法和使用场景。
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-09-08 「JavaScript 从入门到精通」10.数组
- 2024-09-08 JS——数组的方法 & 高阶函数
- 2024-09-08 Javascript中的内置对象—数组(javascript内置对象应用的)
- 2024-09-08 js数组方法笔记(js的数组)
- 2024-09-08 JavaScript 数组元素的一些操作(javascript中数组)
- 2024-09-08 Javascript数组应用及场景——创建数组的N种方式详解
- 2024-09-08 详解JS数组API方法重构(js 数组 api)
- 2024-09-08 手把手教你Javascript (6)-数组(javascript10分钟速成)
- 2024-09-08 JS核心基础数组的操作概述(js数组原理)
- 2024-09-08 JavaScript操作数组的方式都有哪些
- 1517℃桌面软件开发新体验!用 Blazor Hybrid 打造简洁高效的视频处理工具
- 594℃Dify工具使用全场景:dify-sandbox沙盒的原理(源码篇·第2期)
- 521℃MySQL service启动脚本浅析(r12笔记第59天)
- 489℃服务器异常重启,导致mysql启动失败,问题解决过程记录
- 489℃启用MySQL查询缓存(mysql8.0查询缓存)
- 477℃「赵强老师」MySQL的闪回(赵强iso是哪个大学毕业的)
- 456℃mysql服务怎么启动和关闭?(mysql服务怎么启动和关闭)
- 454℃MySQL server PID file could not be found!失败
- 最近发表
-
- PS所有滤镜的说明(六)(ps滤镜详解)
- 5款小白也能用的在线图片编辑器!电商效率飙升就靠它!
- Java变量(java变量有什么作用)
- Java面试常见问题:Java注解(java中的面试题)
- Java编程入门第一课:HelloWorld(java编程从入门到实践)
- Java基础教程:Java继承概述(java里继承的概述)
- java基础之——访问修饰符(private/default/protected/public)
- 如何规划一个合理的JAVA项目工程结构
- 将机器指令翻译成 JavaScript -- 终极目标
- Web 服务器基准测试:Go vs. Node.js vs. Nim vs. Bun
- 标签列表
-
- cmd/c (90)
- c++中::是什么意思 (84)
- 标签用于 (71)
- 主键只能有一个吗 (77)
- c#console.writeline不显示 (95)
- pythoncase语句 (81)
- es6includes (73)
- windowsscripthost (67)
- apt-getinstall-y (86)
- node_modules怎么生成 (76)
- c++int转char (75)
- static函数和普通函数 (76)
- el-date-picker开始日期早于结束日期 (70)
- js判断是否是json字符串 (67)
- checkout-b (67)
- c语言min函数头文件 (68)
- asynccallback (71)
- localstorage.removeitem (74)
- vector线程安全吗 (70)
- java (73)
- js数组插入 (83)
- mac安装java (72)
- eacces (67)
- 查看mysql是否启动 (70)
- 无效的列索引 (74)