百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 文章教程 > 正文

JavaScript 数组的常用方法_js数组的一些方法

yund56 2025-02-25 00:35 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]

相关推荐

今日起,办理游戏版号这么做就行了!真的太方便了

  在“大众创业,万众创新”的浪潮下,我国很多创业者也看到了游戏的前景,准备在游戏行业分一杯羹。  但根据国家新闻出版广电总局颁布的《关于移动游戏出版服务管理的通知》,游戏需要通过国家新闻出版广电总局...

给大家推荐些好的c语言代码的网站

C语言,那就来推荐几个吧,部分含有C++:1、TheLinuxKernelArchives(kernel.org)Linux内核源码,仅限于C,但内核庞大,不太适合新手;2、redis(redi...

手游平台没有源码的三大危害

搭建一款属于自己的手游平台可以直接和游戏研发商对接游戏,既减少中介的差价,还能根据自己需求去选择游戏。对于玩家而言,手游平台给予了玩家更多的选择机会,对于运营者而言,借助平台可以更好地服务玩家,通过对...

游戏源代码开发时需要什么,需要哪些团队成员?

游戏由于她轻松娱乐,对战刺激,寓教于乐等特点,吸引住了一大批不一样年龄阶段的用户,例如喜爱竞技游戏的年轻群体,需要益智游戏的儿童等。游戏源代码是游戏构建的基础,尽管将开发时分成开发软件和游戏开发2个概...

育碧经典游戏《孤岛惊魂1》源代码遭泄露,玩家表示可以运行

IT之家7月3日消息,一份名为“FarCry1.34Complete”的游戏源代码已经出现在了互联网档案网站“Archive.org”上,并且在Reddit论坛和各种社交媒体上得到...

神秘网站倒数结束 令人一头雾水

还记得那个疑似小岛秀夫作品的《黑色猎犬》倒计时网站吗?现在该网站已经停止倒计时,仅剩一段话“这里原来有一个倒计时,现在没了”……点击这句话会跳转到国外网站Funhaus的一个莫名其妙的视频,然而评论的...

LOL源代码娜美免费领取地址 LOL源代码娜美领取活动网址分享

[海峡网]在英雄联盟中近日国服的服务器一直不稳定,繁出现卡顿和功能错误等问题,官方现在正在努力维护,为表歉意将免费赠送给玩家一款“源代码·娜美”的皮肤,那么这个皮肤要怎么领取呢,小编相信小伙伴们一定都...

个人网站集成js小游戏《圈小猫》教程及源码

今天在某网站浏览帖子的时候,发现帖子被删除了,然后弹出了404页面,页面上集成了一个小游戏,小游戏长什么样子呢?看下面这个图!第一步查看小游戏源码,发现这个小游戏完全是由JavaScript编写的,因...

Scratch创意编程-数学问答游戏

项目名称:数学问答游戏目标年龄群体:8-12岁项目简介:在这个Scratch创意编程项目中,学生们将扮演数学家,通过解答数学题目来挑战自己的数学技能。游戏中包含了加法、减法、乘法和除法等基本算术题,以...

少时不努力长大程序猿 酷比魔方AI百变编程套件体验测评

本文产品为厂家送测,坚持独立的评价观点是笔者创作的基本底线,绝不会因商品来源不同而有所偏颇,请各位放心。写在开始讲讲今天男主的故事这篇体验到的目标群体是跟我一样,家中有个在上小学二年级的小学生。首先...

孩子的scratch作品只能演示?教你把它三步变为电脑软件

随着少儿编程的发展,越来越多的家长和孩子开始投身其中。对于初学者来说,最好的编程工具就是Scratch,它是麻省理工学院的“终身幼儿园团队”开发的图形化编程工具,主要面对青少年开放。这是对孩子最好的编...

打地鼠小游戏制作教程

打地鼠这个小游戏貌似比我的年龄都要大,这次我们使用scratch3.0图形化编程软件来制作一款我们自己的“打地鼠”。我们先准备4样角色,分别是:地鼠角色、锤子角色、地洞角色、草地角色。地鼠→使用猫...

Scratch2.0接苹果小游戏讲义整理

Scratch2.0接苹果小游戏概貌见动图:这又是一款经典的Scratch小游戏,是孩子们学习Scratch编程软件的良好载体,不容错过。(一)玩法说明接到慢速的红苹果一个加1分;接到中速的红苹果一个...

少儿编程太难?原来可以闯关玩游戏啊

随着编程学习全球化的趋势,国内编程学习热潮日盛,越来越多的家长开始让孩子接触学习编程。然而我们都不了解这个少儿编程是到底是什么,近年来,许多家长开始给小孩报编程学习班。最小的从幼儿园开始就在学习...

如何在Scratch中创建一个两人赛艇游戏

本分步指南将教您如何使用Scratch程序创建划船游戏。完成对这个简单游戏的编程后,两条船将使用按键命令一起竞赛。步骤1.打开Scratch。2.删除名为“Sprite1”的猫。您可以通过右键单击它...