百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

「绍棠」 vuejs中常用的js循环遍历对象的方法列举-案例

ztj100 2024-12-22 22:01 10 浏览 0 评论

const obj = {id:1,name:'绍棠',age:18}
console.log(Object.keys(obj))
console.log(Object.values(obj))

Object.getOwnPropertyNames

Object.getOwnPropertyNames(obj).forEach(function(key){
	console.log(key+ '---'+obj[key])
})

while 循环

同样的遍历 cars 数组,先用 for 循环方法

let cars=["BMW","Volvo","Saab","Ford"];
let i=0;
for (;cars[i];)
{
    console.log(cars[i])
    i++;
};
 
// BMW
// Volvo
// Saab
// Ford 

while 循环方法

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
console.log(cars[i] + "<br>")
i++;
};

它们可以实现同样的效果,事实上它们底层的处理是一样的,不过 for 循环可以把定义、条件判断、自增自减操作放到一个条件里执行,代码看起来方便一些,仅此而已。

do while 循环

let i = 3;
do{
 console.log(i)
 i--;
}
while(i>0)
// 3
// 2
// 1

do while 循环是 while 循环的一个变体,它首先执行一次操作,然后才进行条件判断,是 true 的话再继续执行操作,是 false 的话循环结束。

数组 map()方法 *vue

arr.map(function(i,[index],[arr]){    
// i 代表数组中每一项 必须  index 代表数组中元素的下标 可选  arr 代表当前元素所属的数组对象 可选
..........
})

案例:

let arr = [1,2,3];
let tt = arr.map(function(i){
 console.log(i)
 return i*2;
})
// [2,4,6]

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

注意:map 和 forEach 方法都是只能用来遍历数组,不能用来遍历普通对象。

数组 filter() 方法(VUE中常用到)

arr.filter(function(i,[index],[arr]){    
// i 代表数组中每一项 必须  index 代表数组中元素的下标 可选  arr 代表当前元素所属的数组对象 可选
..........
})

案例:

let arr = [1,2,3];
let tt = arr.filter(function(i){
 return i>1;  //遍历数组中是所有元素返回大于1的元素
})
// [2,3]

filter 方法是 Array 对象内置方法,它会返回通过过滤的元素,不改变原来的数组。

Array some() 方法 (VUE中也用到)

let arr = [1,2,3];
let tt = arr.some(function(i){
 return i>1;
})
// true

some() 方法用于检测数组中的元素(只要有一个满足条件就是true)是否满足指定条件(函数提供),返回 boolean 值,不改变原数组。

数组 every() 方法(VUE中用到)

arr.every(function(i,[index],[arr]){    
// i 代表数组中每一项 必须  index 代表数组中元素的下标 可选  arr 代表当前元素所属的数组对象 可选
..........
})

案例

let arr = [1,2,3];
let tt = arr.every(function(i){
 return i>1;
})
// 检测数组中元素是否都大于1
// false

every() 方法用于检测数组所有元素(或每一个元素都必须满足条件才为true)是否都符合指定条件(通过函数提供),返回 boolean 值,不改变原数组。

Array reduce()方法 *vue

let arr = [1,2,3];
let ad = arr.reduce(function(i,j){
 return i+j;     //就是计算从左到右 1+2+3
})
// 6

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

Array reduceRight()方法

let arr = [1,2,3];
let ad = arr.reduceRight(function(i,j){
 return i+j;
})
// 6

reduceRight()方法,和 reduce() 功能是一样的,它是从数组的末尾处向前开始计算。

相关推荐

配置Java环境变量:(WIN7为例)(java1.7配置环境变量)

1.JAVA_HOME变量的设置2.Path变量的设置3.ClassPath变量的设置二、JDK安装群文件下载好之后,进入文件夹,双击根据提示进行安装,直至安装完成。(建议默认地址,一下以默认...

JDK的下载安装与环境变量的配置(jdk安装教程及环境变量配置win10)

一、JDK下载1.jdk下载地址官网https://www.oracle.com2.选择Products3.选择Java4.选择JavaSE,进入OracleJDK5.根据需要选择版本6.我所...

linux java 项目 设置外部yml 设置jvm 并添加启动停止以及重启脚本

linux安装jdk1.8jdk1.8可私聊我发给你1.在/usr/local下用mkdir新建了一个文件夹java然后把文件上传到java里面...

JDK1.8安装&amp;环境变量配置(jdk怎么安装环境变量)

1、下载并安装JDK1.8链接:https://pan.baidu.com/s/1bfceFjfTQvLylu7a3T7fyg?pwd=ydtm...

Java 技术文档(详细版)(java文档教程)

1.简介Java是一种面向对象的编程语言,由SunMicrosystems于1995年发布,现由Oracle公司维护。其核心特点是“一次编写,到处运行”,这得益于Java虚拟机(...

JavaJDK环境变量配置(javajdk环境变量配置不用配置路径吗)

1.Java环境搭建1.1JDK与JREJDK(JavaDevelopmentKitJava开发工具包)JDK是提供给Java开发人员使用的,其中包含了java的开发工具,也包括了JRE。所...

Java编程从零开始 01Java的安装和配置

点击右上角,加关注,私信“项目课程”,即可获得高并发分布式电商项目以及适合初学者的网盘项目课程视频和源码哦...

《我的世界》服务器搭建(搭建我的世界服务器配置要求)

1.CentOS7环境1.1更改YUM源...

java入门教程1 - 安装和配置(win和linux)

windows安装和配置安装java...

Java基础篇——环境配置(java环境搭建及配置教程)

Java语言简介Java语言源自于Oracle-Sun公司,是当今最通用、最流行的软件开发语言之一。Java是简单的、面向对象的语言,最大的特性是与平台无关,有“writeonce,runeve...

Java路径-02-Java环境配置(java环境变量配置路径)

1Window环境配置1.1下载...

JDK的安装与环境变量的配置(jdk安装好如何配置环境变量?用什么符合隔开?)

JDK的安装与环境变量的配置1.jdk的安装:jdk的安装,傻瓜式安装,一路下一步jdk中的两个文件夹libbin...

Centos8搭建Java环境(JDK1.8+Nginx+Tomcat9+Redis+Mysql)

一、开篇1.1目的每次换新的服务器,都要找资料配下环境,所以我写这篇文章,重新梳理了一下,方便了自己,希望也能给大家带来一些帮助。安装的软件有:JDK1.8+Nginx+Tomcat9+...

Windows系统——配置java环境变量

怎么配置java环境变量呢?首先是安装好jdk然后我的电脑右键选择属性然后选择左侧高级系统设置高级然后点环境变量...

程序员:JDK的安装与配置(完整版)(jdk的安装与配置使用)

对于Java程序员来说,jdk是必不陌生的一个词。但怎么安装配置jdk,对新手来说确实头疼的一件事情。我这里以jdk10为例,详细的说明讲解了jdk的安装和配置,如果有不明白的小伙伴可以评论区留言哦...

取消回复欢迎 发表评论: