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

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

zonemu2个月前 (07-10)技术文章20

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

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]

相关文章

最美 Linux 发行版之争还在继续,Elementary OS 0.3 发布 0.3 Freya 更新

对于个人终端消费者而言,Linux 发行版们依然希望通过 UI 革新来吸引他们的注意。除了 Ubuntu 这样综合能力强的选手,偏重界面的发行版里,前有 OpenSUSE,后有 Linux Mint,...

Vue3 中,父子组件如何传递参数?(vue父子组件传递数据方法)

在 Vue3 中,组件化开发是非常重要的特征,那么组件之间传值就是开发中常见的需求了。组件之间的传值三种方式:父传子、子传父、非父子组件传值。一、父传子( defineProps )父组件主要通过使用...

零基础开始学 Web 前端开发,有什么建议?(附视频教程)

WEB前端看似简单,其实不然,要学的知识点很多很杂,对于零基础学习前端的小伙伴来说,一份详细的前端学习知识点大纲尤为重要。下面,话不多说,直接上干货(全网最全,没有之一)。PS:文末有福利(全阶段视频...

react hooks自定义组件居然能这样做

前言  这里写一下如何封装可复用组件。首先技术栈 react hooks + props-type + jsx封装纯函数组件。类组件和typeScript在这不做讨论,大家别白跑一趟。接下来会说一下封...

GIT最佳实践,高效提升多团队协同开发效率

多个团队共同维护同一个微服务模块时,经常出现A团队已发布的功能,B团队提交测发布出现冲突或缺失,如何有效解决多团队共同维护的问题呢?常用的版本管理工具有GIT、SVN,这两种版本管理工具,各有千秋;虽...

HTML5学习笔记三:HTML5语法规则(html5语法详解)

1.标签要小写2.属性值可加可不加””或”3.可以省略某些标签 html body head tbody4.可以省略某些结束标签 tr td li例:显示效果:5.单标签不用加结束标签img inpu...