JS总结——数组,对象遍历的方法

news2024/11/19 19:26:42

对于数组或者对象的遍历,筛选,提取等操作是前端开发中经常有的需求,不要再只会写普通的for循环了,虽然普通的for循环已经能完成一切的功能的,是一个特殊方法,但是针对各种需求,js给我们提供了许多方法,来更优雅的遍历,来学习一下吧!

1. for in

for in 循环,数组和对象都可以遍历item为array的下标,或者object的key这样的代码,比起for循环可读性能强一些。

2.for of

与for in 不同的是,for of只能遍历数组item为数组元素的值

3.Object.keys/values/entries

上面提到了for of无法遍历对象,那么我们还想通过for of遍历对象怎么办呢
那我们就可以用到以上三个方法了

var obj = {
            a:1,
            b:2,
            c:3,
            d:4,
            e:5
        }
 console.log(Object.keys(obj))
 console.log(Object.values(obj))
 console.log(Object.entries(obj))

在这里插入图片描述
可见,for of无法遍历对象,但我们可以通过Object.keys/values/entries将对象的keys,values或者keys和values转化为数组,借此遍历

  for(var key of Object.keys(obj)){
	  console.log(key)
  }
  for(var value of Object.values(obj)){
      console.log(value)
  }
  for(var [key,value] of Object.entries(obj)){
      console.log(key,value)
  }

在这里插入图片描述
在这里插入图片描述
至此,我们就用for of +Object.keys/values/entries将数组的keys或者values遍历出来了。

以下的forEach,map,filter,some和every可以一起记忆

3.arr.forEach

一下就都是遍历数组的方法了,如果想遍历对象,也同上的for of一样,将对象的keys或values转化为数组再进行遍历。

  • forEach的第一个参数是一个函数,可以是箭头函数,也可以是普通函数,看需求进行选择,该函数将在每一次数组元素被遍历时执行
  • forEach的第二个参数是一个对象,如果指定了第二个参数,则**如果第一个参数是function,**function中的this会指向这个对象,如果第一个参数是箭头函数,那么由于箭头函数的特性,作用域将不会发生改变
  • 重点1: forEach第一个参数的函数中的传入的参数有三个分别为(item,index,arr),即数组当前数组的元素值,元素下标,和当前数组
  • 重点2:forEach没有返回值
  • 重点3:forEach不能使用break或continue关键字进行跳出循环,如果想跳出循环可以使用return
var arr = [1,2,3,4,5]
var obj = {
    a:1
 }
console.log(
	  arr.forEach(function(item,index,arr){
	    console.log(item,index,arr)
	    console.log(this)
},obj)

在这里插入图片描述

4.arr.map

Map与forEach非常的用法非常相似,区别是forEach没有返回值,而Map有,使用Map可以返回一个与原数组有映射关系的数组

var arr = [1,2,3,4,5]
var arr1 = arr.map(function(item,index,arr){
   return item *2  
 })
 console.log(arr1)

在这里插入图片描述

5.arr.filter

作用:过滤掉函数中返回false的元素

 var arr = [1,2,3,4,5]
 var arr1 = arr.filter(function(item,index,arr){
      if (index > 3)
      return true
  })

在这里插入图片描述

6.arr.some

作用:数组中只要有一个元素的返回值为true 返回值就为true,否则返回false

7.arr.every

作用:与arr.some刚好相反,数组中只要有一个元素的返回值为false,返回值就为false,只有全部返回值都为true,才返回true

8.arr.reduce

作用 :对数组进行遍历,返回一个值

  • 重点1:reduce的第一个参数是一个函数,与前五个方法不同的是,此函数并非只有3个参数,而是由4个参数,分别为 (accumulator,currentValue,index,arr)如同其字面意思一样,这4个参数分别是累加器,当前元素值,当前元素下标,和整个数组
  • 重点2:reduce的第二个参数是一个值,该值为累加器的初始值,如果不指定初始值,则默认为0
 var sum = [0,1,2,3,4].reduce(function(accumulator,currentValue,currentIndex,arr){
      return accumulator + currentValue
   })
   console.log(sum)

在这里插入图片描述
在数组的遍历过程中,累加器由每一个则执行的函数处理后传递给下一个执行的函数,最终返回出来。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409122.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp —— 实现左右联动商品分类页面

uniapp —— 实现左右联动商品分类页面 零、前因 我们在日常的开发种,这种页面在项目当中经常会用得到,所以本篇文章会比较注重描述其思路,顺带附上其代码,以便以后在任何代码环境下都能使用上,先介绍一下实现思路&a…

Vue 中 iconfont 使用

图标库的发展过程,iconfont图标库的重要性(项目常用) 对于前端而言,图标的发展可谓日新月异。从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-lo…

npm run 是什么?为什么使用npm run 这一命令,就能够将 webpack 跑起来并进行下一步的操作?

npm run 实际上是衔接 node 和 webpack 的连接点。先看看终端运行的npm是什么,如下图: 图中的关键点是最后一行 C:\Users\***\AppData\Roaming\npm\node_modules\npm。从它可以推断出系统环境变量下配置的npm的路径为C:\Users\***\AppData\Roaming\npm,可以去环境变量中确认…

css实现炫酷充电动画

先绘制一个电池&#xff0c;电池头部和电池的身体 这里其实就是两个div&#xff0c;使用z-index改变层级&#xff0c;电池的身体盖住头部&#xff0c;圆角使用border-radius完成 html部分,完整的css部分在最后 <div class"chargerBox"><div class"ch…

Vue ref获取元素和组件实例

获取元素 获取元素还不简单&#xff1f;直接document.querySelector(“#id”)不就获取到了吗&#xff1f;例如下面的代码。在写Vue的过程中&#xff0c;我们从来不会写这种代码&#xff0c;但是下面的代码在vue里面是可以运行的。 methods:{getEl(){let title document.queryS…

CSS实现: 水平居中 的几种方法

实现方法&#xff1a; 1、添加 margin 值 auto 2、定位 position(子绝父相) 偏移值 left margin-left 回退 [ 需要计算&#xff0c;有点 麻烦 ] 3、定位 position(子绝父相) 偏移值 left CSS-2d transform 4、文字居中 text-align:center; 行内块元素 5、弹性盒子布局 [ 推…

vue之@click绑定的函数,如何实现加不加括号都可执行

这篇文章的由来&#xff0c;其实是朋友在群里好奇click绑定方式的种类&#xff0c;大家七嘴八舌讨论出来的&#xff0c;觉得过程还是比较有意义&#xff0c;就记录下来&#xff1a; 1、原生js绑定点击事件 好久不用原生js绑定事件&#xff0c;基本都已经忘了怎么绑定。还把括号…

es6的some和every方法使用;

文章略长&#xff0c;但比较简单。 es6中的数组方法some()和every()都接收一个回调函数作为参数&#xff0c;该回调函数又接收三个参数&#xff0c;分别是数组元素、数组元素的索引、调用some或every方法的数组本身。它们的区别就是&#xff1a; some方法用于判断数组中是否存…

node-sass安装报错及其解决方案

一、下载依赖报错 这里报错了也就没后面的剧情了&#xff0c;就像电视剧刚开局主角就嗝屁了&#xff0c;看看执行 npm i 的时候报错类容&#xff1a; 二、解决方案 1、下载源在国外&#xff0c;更换中国镜像源&#xff0c;删除package.json中的node-sass,分别下载node包和node-…

你的应用太慢了,给我司带来了巨额损失,该怎么办

记得很久之前看过谷歌官方有这么样的声明&#xff1a;如果一个页面的加载时间从 1 秒增加到3 秒&#xff0c;那么用户跳出的概率将增加 32%。 但是早在 2012 年&#xff0c;亚马逊就计算出了&#xff0c;页面加载速度一旦下降一秒钟&#xff0c;每年就会损失 16 亿美元的销售额…

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…

HTML 基本开发方式,学会常用的 HTML 标签

一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单&#xff0c;语法风格和 Java 之类的差别很大&#xff0c;(并不能表达一些逻辑&#xff0c;而只是能表达 “有哪些东西" 一种信息)&#xff0c;使用记事本创建一个文件&#xff0c;后缀名改成 .html 即可…

Vue报错:Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

背景: 当点击按钮时候&#xff0c;正常情况控制台的Network应该要发送一个变化量&#xff0c;现在控制台的Network不仅不显示&#xff0c;而且还报错&#xff0c;报错信息如下&#xff1a; vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler: "TypeError: …

【React全家桶】Flux与Redux

&#x1f39e;️&#x1f39e;️&#x1f39e;️ 博主主页&#xff1a; 糖 &#xff0d;O&#xff0d; &#x1f449;&#x1f449;&#x1f449; react专栏&#xff1a;react全家桶 &#x1f339;&#x1f339;&#x1f339;希望各位博主多多支持&#xff01;&#xff01;&a…

Vue3.0 项目启动(打造企业级音乐App)

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动&#xff08;打造企业级音乐App&#xff09;Vue3.0项目——打造企业级音乐App&#xff08;一&#xff09;Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App&#xff08;二&#xff09;图片懒加载、…

功能:Session与Vue:登录获取权限,并完成session存储

一、需求说明 1、系统登录&#xff0c;每个账号表示一位用户&#xff0c;每位用户分配有不同的权限&#xff0c;不同的权限有着不同的操作。 2、现需要每位用户登录时都能获取到对应的权限&#xff0c;在登录系统中进行使用&#xff0c;退出时则清空权限。 3、项目框架&#x…

一个非常好看的前端Vue3登录页面

Vue3lessElement Plus <template> <div id"login"><div id"contain"><div id"left_card"><h1>欢迎来到我的Vue3大世界</h1><span>Welcome to my Vue3 world</span></div><div id&quo…

HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办?问题出在这里:HBuilderX外部web服务支撑配置

初学HTML的时候&#xff0c;用的是HBuilderX开发软件 写了一段简单的代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>这是网页的标题</title></head><body><p>这里是网页的内容</p>&l…

解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题描述&#xff1a;重复点击导航时&#xff0c;控制台出现报错 &#xff0c;虽然不影响功能使用&#xff0c;但也不能坐视不管。解决 Vue 重复点击相同路由&#xff0c;出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .报错内容&#…

Nginx部署前端静态网站详细教学(一步步操作)

前言 从零开始使用Xshell、Xftp、Nginx 简单部署静态网站&#xff0c;需准备云服务器(阿里云、腾讯云、华为云等都可) 一.下载安装Xshell和Xftp XShell 用于命令行操作服务器&#xff0c;Xftp 用于对服务器的文件上传和下载 官方下载地址&#xff1a;NetSarang Homepage CN - …