html js 遍历数组,分享几种原生JS数组遍历的方法和应用
数组遍历,对于前后端开发人员,是必须掌握的方法,那么数组遍历有哪些方法呢?
OK,今天就分享几种原生JS方法,从原生开始学习,有助于大家应用到各种框架【小程序、三大框架等】中去,毕竟原生才是基本。一共有这些:for,foreach,some,map,filter,every。
接下来一一说明。
for和for/in
for 循环是您在希望创建循环时常会用到的工具。
基本语法:for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
例子:for (var i=0; i<5; i++)
{
x=x + "The number is " + i + "
";
}
从上面的例子中,您可以看到:
Statement 1 在循环开始之前设置变量 (var i=0)。
Statement 2 定义循环运行的条件(i 必须小于 5)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。
for/in 语句用于循环对象属性。
循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。
基本语法:for (var in object) {
执行的代码块
}
例子:var person = {fname:"John", lname:"Doe", age:25};
var text = "";
var x;
for (x in person) {
text += person[x];
}
结果:
John Doe 25
还有在ES5/6中,我们可以这样的语法来写:
for (let i in arr)
for (const v of arr)
做小程序的时候经常会用到这些语法。
forEach()
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
基本语法:array.forEach(function(currentValue, index, arr), thisValue)参数描述
function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。
函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
thisValue可选。传递给函数的值一般用 "this" 值。
如果这个参数为空, "undefined" 会传递给 "this" 值
例子:
1、计算数组所有元素相加的总和:点我
数组元素总和:
var numbers = [65, 44, 12, 4];
function myFunction(item) {
sum += item;
demo.innerHTML = sum;
}
2、将数组中的所有值乘以特定数字:
乘以:
点我
计算后的值:
function myFunction(item,index,arr) {
arr[index] = item * document.getElementById("multiplyWith").value;
demo.innerHTML = numbers;
}
some
对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true。如果都返回false,则返回false
检查整个数组中是否有满足ck函数的元素。
基本语法:[...].some(ck)函数 ---- 某个一个为true,则为true
例子:var result = [1,5,3,6].some( (v,i) => (v>10) ) //所有元素都不满足,返回result = false
var result = [10,5,30,60].some( (v,i) => (v<10) ) //有一个(多个)满足,返回result = true
map
每个数组元素都执行一次ck函数,最后返回每次元素执行ck函数后返回值的集合(数组)
基本语法:[...].map(ck)函数 ---- 返回每个元素返回值的集合
例子:var newArray = [50,30,40].map( (v,i) => v/10 )
filter
每个数组元素都执行一次ck函数,最后返回每次元素执行ck函数后返回值的为true的元素集合(数组)。
基本语法:[...].filter(ck)函数 ---- 得到返回值为true的元素的集合
例子:var newArray = [50,2,60,4,53,15].filter( (v,i) => (v>10) ) //返回数组中大于10的元素新数组 newArray = [50,60,53,15]
every
每个数组元素都执行一次ck函数,直到某个元素执行函数ck返回false,则直接返回false,如果全部返回true,则返回true
基本语法:[...].every(ck)函数 ---- 某一个为false,则返回false
例子:var result = [5,50,35,12,85].every( (v,i) => v<51 ) //返回有一个(多个)大于等于51,则返回 result = false
var result = [5,50,35,12,85].every( (v,i) => v<100 ) //全部大于51,则返回 result = true
总结
今天主要分享了一些数组遍历的几种方法,下篇文章是关于for数组循环的一些区别和应用,敬请期待吧。
html js 遍历数组,分享几种原生JS数组遍历的方法和应用相关推荐
- js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
- JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局,原生JS实现的瀑布流布局,代 - phpStudy...
原生JS实现响应式瀑布流布局 原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
- 数组属于一种原生类_前端程序员面试你应该懂的原生JS——1
本文梳理出了一些面试中有一定难度的高频原生JS问题,部分知识点可能你之前从未关注过,或者看到了,却没有仔细研究,但是它们却非常重要. 1. 原始类型有哪几种?null 是对象吗?原始数据类型和复杂数据 ...
- 往数组里添加键值对_框架都是花哨的东西!js才是根基,分享一下给原生js数组的操作...
1Array.map()方法 此方法原数组不会改变,会返回一个新数组.必须有返回值: 语法: array 回调函数是必穿的参数,thisValue是可选参数!对象作为该执行回调同时使用,传递给函数用作 ...
- JS基础之数组--概述、创建数组的几种方式、数组的特点、数组的常用方法、数组的解构赋值、数组高级API
一.概述 描述:数组(array)是按照一定顺序排列的一组值,每个值都拥有自己的编号,编号从0开始.整个数组用方括号来表示. 语法:var arr=[item1,item2,item3-] 1.1 注 ...
- html或原生js是单一对应绑定的,原生js数据绑定
双向数据绑定是非常重要的特性 -- 将JS模型与HTML视图对应,能减少模板编译时间同时提高用户体验.我们将学习在不使用框架的情况下,使用原生JS实现双向绑定 -- 一种为Object.observe ...
- js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
- 桌面显示电脑配置的PE_你还用软件看电脑配置?分享三种无需软件查看配置的方法...
大家都知道可以通过下载某些软件来查看电脑的硬件信息,其实系统自带有工具可以查看配置信息,今天给大家分享几种无需下载软件查看电脑配置信息的方法. 方法一:使用命令提示符查看 1.点击"开始&q ...
- Vue.js如何写一个简单的原生js模块,浏览器中的表现如何?
2019独角兽企业重金招聘Python工程师标准>>> 浏览器正在逐步的支持原生JavaScript模块.Safari和Chrome的最新版本已经支持它们了,Firefox和Edge ...
最新文章
- Centos 6.5系统安装配置图解教程
- 常玩手机会导致手指残疾? 专家称没依据
- diskgeniusv4.4.0_.NET Core 3.0及ASP.NET Core 3.0前瞻
- 消息中间件NetMQ结合Protobuf简介
- LINUX下tar.gz包的安装方法
- 剑指企业级云原生,阿里云 CNFS 如何破局容器持久化存储困境
- Ubuntu16.04安装MySQL5.7
- GridView控件 72变(一)
- ARCGIS地理信息系统学习笔记001--认识ARCGIS
- pythondjango是干什么的_python django框架是什么?怎么使用?
- 智能判断图片中是否存在某物体_如果给猫披上象皮,神经网络将作何判断?
- 非阻塞connect用法
- 从古至今的计算机设备,计算器从古至今的发展形成
- ffmpeg视频转码压缩
- 谷歌浏览器好用的复制粘贴插件_好用到炸的谷歌chrome浏览器必备扩展插件(一)...
- 计算机二级程序设计提交,程序设计方法与风格(计算机二级复习指导)
- 构建高并发高可用的电商平台架构实践
- js进栈出栈_JavaScript js调用堆栈(一)
- python去掉字典重复项_从字典列表中删除重复项python
- 通过内容提供者获取手机上的音乐资源
热门文章
- 通达OA协同办公软件怎么样?
- Revit楼板:建筑楼板和结构楼板区别和垫层生成
- SQL2005断电重启数据库置疑修复成功案例
- python socketio例子_Python socket.SocketIO方法代碼示例
- GB/T 17626.2-2018下载网址
- mysql在电脑怎么打开_电脑系统教程_电脑sql文件用什么打开
- 腾讯应用宝:首次上传演示视频需要去腾讯视频进行实名认证的操作
- 使用MATLAB求积分和极限
- 2022电大国家开放大学网上形考任务-机电一体化系统设计基础非免费(非答案)
- “远古帝国2”的片头图片抖动代码