当前位置:首页 > 技术文章 > 正文内容

JavaScript 数组的常用方法(javascript数组的常用方法)

zonemu3个月前 (07-10)技术文章43

在我们前端来说数组作为一个常用的类型,今天我们讲一下在实际使用中经常用到的方法和使用场景。

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]

相关文章

7 款最佳 Linux 桌面发行版,颜值天花板

一、elementary OS二、Deepin三、Pop!_OS四、Manjaro Linux五、KDE Neon六、Zorin OS七、Nitrux OS想必大家都知道三大常用操作系统:Linux、...

Win+Ubuntu缝合怪:第三方开发者推出“Wubuntu”Linux发行版

IT之家 2 月 26 日消息,一位第三方开发者推出了一款名为“Wubuntu”的缝合怪 Linux 发行版,系统本身基于 Ubuntu,但界面为微软 Windows 11 风格,甚至存在微软 Win...

Vue基础(vue基础组件文件名符合规范的是)

Vue 是什么,它的核心特点有哪些?Vue 是一款渐进式 JavaScript 框架,它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助开发者用...

Python 实现 | 通过 Gitlab API 获取项目工程、分支、commit 提交记录

前提在 gitlab 中你的工程创建 Access Token然后你会得到一个 21 位 access token,代码中需要用到。代码''' 说明: 1.登录gitlab的r...

15款测试html5响应式的在线工具(测试类h5)

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面...

简析html5、html的13条区别(html5和html的突出优点)

html5的流行近一两年,在国内主要是移动端和html5游戏的发展,国外也是最近纷纷使用html5,如谷歌,全面的停止flash的广告的投放量,用html5取代之,那么html5较html的区别在哪里...