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

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

ztj100 2024-12-22 22:01 35 浏览 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() 功能是一样的,它是从数组的末尾处向前开始计算。

相关推荐

Linux集群自动化监控系统Zabbix集群搭建到实战

自动化监控系统...

systemd是什么如何使用_systemd/system

systemd是什么如何使用简介Systemd是一个在现代Linux发行版中广泛使用的系统和服务管理器。它负责启动系统并管理系统中运行的服务和进程。使用管理服务systemd可以用来启动、停止、...

Linux服务器日常巡检脚本分享_linux服务器监控脚本

Linux系统日常巡检脚本,巡检内容包含了,磁盘,...

7,MySQL管理员用户管理_mysql 管理员用户

一、首次设置密码1.初始化时设置(推荐)mysqld--initialize--user=mysql--datadir=/data/3306/data--basedir=/usr/local...

Python数据库编程教程:第 1 章 数据库基础与 Python 连接入门

1.1数据库的核心概念在开始Python数据库编程之前,我们需要先理解几个核心概念。数据库(Database)是按照数据结构来组织、存储和管理数据的仓库,它就像一个电子化的文件柜,能让我们高效...

Linux自定义开机自启动服务脚本_linux添加开机自启动脚本

设置WGCloud开机自动启动服务init.d目录下新建脚本在/etc/rc.d/init.d新建启动脚本wgcloudstart.sh,内容如下...

linux系统启动流程和服务管理,带你进去系统的世界

Linux启动流程Rhel6启动过程:开机自检bios-->MBR引导-->GRUB菜单-->加载内核-->init进程初始化Rhel7启动过程:开机自检BIOS-->M...

CentOS7系统如何修改主机名_centos更改主机名称

请关注本头条号,每天坚持更新原创干货技术文章。如需学习视频,请在微信搜索公众号“智传网优”直接开始自助视频学习1.前言本文将讲解CentOS7系统如何修改主机名。...

前端工程师需要熟悉的Linux服务器(SSH 终端操作)指令

在Linux服务器管理中,SSH(SecureShell)是远程操作的核心工具。以下是SSH终端操作的常用命令和技巧,涵盖连接、文件操作、系统管理等场景:一、SSH连接服务器1.基本连接...

Linux开机自启服务完全指南:3步搞定系统服务管理器配置

为什么需要配置开机自启?想象一下:电商服务器重启后,MySQL和Nginx没自动启动,整个网站瘫痪!这就是为什么开机自启是Linux运维的必备技能。自启服务能确保核心程序在系统启动时自动运行,避免人工...

Kubernetes 高可用(HA)集群部署指南

Kubernetes高可用(HA)集群部署指南本指南涵盖从概念理解、架构选择,到kubeadm高可用部署、生产优化、监控备份和运维的全流程,适用于希望搭建稳定、生产级Kubernetes集群...

Linux项目开发,你必须了解Systemd服务!

1.Systemd简介...

Linux系统systemd服务管理工具使用技巧

简介:在Linux系统里,systemd就像是所有进程的“源头”,它可是系统中PID值为1的进程哟。systemd其实是一堆工具的组合,它的作用可不止是启动操作系统这么简单,像后台服务...

Red Hat Enterprise Linux 10 安装 Kubernetes (K8s) 集群及高级管理

一、前言...

Linux下NetworkManager和network的和平共处

简介我们在使用CentoOS系统时偶尔会遇到配置都正确但network启动不了的问题,这问题经常是由NetworkManager引起的,关闭NetworkManage并取消开机启动network就能正...

取消回复欢迎 发表评论: