网站首页 > 技术文章 正文
在我们前端来说数组作为一个常用的类型,今天我们讲一下在实际使用中经常用到的方法和使用场景。
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操作数组的方式都有哪些
- 02-21走进git时代, 你该怎么玩?_gits
- 02-21GitHub是什么?它可不仅仅是云中的Git版本控制器
- 02-21Git常用操作总结_git基本用法
- 02-21为什么互联网巨头使用Git而放弃SVN?(含核心命令与原理)
- 02-21Git 高级用法,喜欢就拿去用_git基本用法
- 02-21Git常用命令和Git团队使用规范指南
- 02-21总结几个常用的Git命令的使用方法
- 02-21Git工作原理和常用指令_git原理详解
- 最近发表
- 标签列表
-
- cmd/c (57)
- c++中::是什么意思 (57)
- sqlset (59)
- ps可以打开pdf格式吗 (58)
- phprequire_once (61)
- localstorage.removeitem (74)
- routermode (59)
- vector线程安全吗 (70)
- & (66)
- java (73)
- org.redisson (64)
- log.warn (60)
- cannotinstantiatethetype (62)
- js数组插入 (83)
- resttemplateokhttp (59)
- gormwherein (64)
- linux删除一个文件夹 (65)
- mac安装java (72)
- reader.onload (61)
- outofmemoryerror是什么意思 (64)
- flask文件上传 (63)
- eacces (67)
- 查看mysql是否启动 (70)
- java是值传递还是引用传递 (58)
- 无效的列索引 (74)