javascript中常见的几种循环遍历

项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环。javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历。

一、for循环

for循环应该是最普遍的,使用最多的一种循环遍历方法了,所以也导致其可读性和易维护性比较差,但是它可以及时break出循环。

let arr = [1,2,3,4,5,6,7]
for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}
// 1,2,3,4,5,6,7

二、for...in

for...in循环主要针对于对象的遍历,当想要获取对象的对应键值时,使用for...in还是比较方便的

//针对对象来说
//任何对象都继承了Object对象,或者其它对象,继承的类的属性是默认不可遍历的,
//for... in循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
let obj = {name: ‘xiaohua‘, sex: ‘male‘, age: ‘28‘}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

三、map

map方法将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。循环中途是无法停止的,总是会将所有成员遍历完

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时,map方法向它传入三个参数:当前成员、当前位置和数组本身。

let arrObj = [{
    id: 1,
    name: ‘xiaohua‘
},{
    id:2,
    name: ‘xiaomin‘
},{
    id:3,
    name: ‘xiaobai‘
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

三、forEach

forEach的使用方法和map使用方法差不多,只是forEach方法不返回值,只用来操作数据,且循环中途是无法停止的,总是会将所有成员遍历完

let arrObj = [{
    id: 1,
    name: ‘xiaohua‘
},{
    id:2,
    name: ‘xiaomin‘
},{
    id:3,
    name: ‘xiaobai‘
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

四、filter过滤循环

filter方法用于过滤数组成员,满足条件的成员组成一个新数组返回。它的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

let arrObj = [{
    id: 1,
    name: ‘xiaohua‘
},{
    id:2,
    name: ‘xiaomin‘
},{
    id:3,
    name: ‘xiaobai‘
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === ‘xiaohua‘)
})
console.log(arr2)  // [{id:1,name:‘xiaohua}]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素  (falsenullundefined0NaN or an empty string):

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数,它会对遍历数组中的元素,并根据元素的真假类型,对应返回 true 或 false.

五、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象,返回一个数组。该数组的成员都是该对象自身的(而不是继承的)所有属性名,且只返回可枚举的属性。

let obj = {name: ‘xiaohua‘, sex: ‘male‘, age: ‘28‘}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判断一个对象是否是空对象,可以用Object.keys(obj).length>0

原文地址:https://www.cnblogs.com/layaling/p/11304688.html

时间: 2024-10-12 09:28:52

javascript中常见的几种循环遍历的相关文章

javaScript中常见的几种报错类型

一般我们运行代码的时候,在控制台报错会相应的显示你错误的行数,找到那一行,查找你相应的错误 1.xxx is not defined xxx 没有定义 2.xxx is not a function xxx 不是一个函数 xxx此时是undefined 3.Cannot read property 'xxx' of undefined 不能读取undefined的xxx属性 xxx前面的变量是undefined 4.Cannot set property 'xxx' of null 不能给nul

JavaScript中常见的数组操作函数及用法

昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考.如果恰好你也在准备各种笔试,希望对你有所帮助.同时,也欢迎补充. 1.数组创建 创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下: var array1 = new Array(); var array2 = []; 上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇.其中,

ArrayList和LinkedList的几种循环遍历方式及性能对比分析

主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论.通过本文你可以了解(1)List的五种遍历方式及各自性能 (2)foreach及Iterator的实现 (3)加深对ArrayList和LinkedList实现的了解.阅读本文前希望你已经了解ArrayList顺序存储和LinkedList链式的结构,本文不对此进行介绍. 相关:HashMap循环遍历方式及其性能对

ArrayList和LinkedList的几种循环遍历方式及性能对比分析(转)

主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论. 通过本文你可以了解(1)List的五种遍历方式及各自性能 (2)foreach及Iterator的实现 (3)加深对ArrayList和LinkedList实现的了解. 阅读本文前希望你已经了解ArrayList顺序存储和LinkedList链式的结构,本文不对此进行介绍. 相关:HashMap循环遍历方式及其性

【转】ArrayList和LinkedList的几种循环遍历方式及性能对比分析

原文网址:http://www.trinea.cn/android/arraylist-linkedlist-loop-performance/ 主要介绍ArrayList和LinkedList这两种list的五种循环遍历方式,各种方式的性能测试对比,根据ArrayList和LinkedList的源码实现分析性能结果,总结结论.通过本文你可以了解(1)List的五种遍历方式及各自性能 (2)foreach及Iterator的实现 (3)加深对ArrayList和LinkedList实现的了解.阅

实现JavaScript中继承的三种方式

一.原型链继承  在原型链继承方面,JavaScript与java.c#等语言类似,仅允许单父类继承.prototype继承的基本方式如下: 代码如下: function Parent(){} function Child(){} Child.prototype = new Parent(); 通过对象Child的prototype属性指向父对象Parent的实例,使Child对象实例能通过原型链访问到父对象构造所定义的属性.方法等.  构造通过原型链链接了父级对象,是否就意味着完成了对象的继承

Java中常见的5种WEB服务器介绍

这篇文章主要介绍了Java中常见的5种WEB服务器介绍,它们分别是Tomcat.Resin.JBoss.WebSphere.WebLogic,需要的朋友可以参考下 Web服务器是运行及发布Web应用的容器,只有将开发的Web项目放置到该容器中,才能使网络中的所有用户通过浏览器进行访问.开发Java Web应用所采用的服务器主要是与JSP/Servlet兼容的Web服务器,比较常用的有Tomcat.Resin.JBoss.WebSphere 和 WebLogic 等,下面将分别进行介绍. Tomc

【学习笔记】——原生js中常用的四种循环方式

一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0   网页输出"欢迎下次光临" 在网页中弹出框输入1   网页输出"查询中--" 在网页中弹出框输入2   网页输出"取款中--" 在网页中弹出框输入3   网页输出"转账进行中--" 在网页中弹出框输入其他字符   网页输出"无效按键" 四种循环: for循环 while循环 for  in

JavaScript 中的12种循环遍历方法

题目:请介绍 JavaScript 中有哪些循环和遍历的方法,说说它们的应用场景和优缺点? 1.for 循环 let arr = [1,2,3];for (let i=0; i<arr.length; i++){ console.log(i,arr[i])}// 0 1// 1 2// 2 3 for 循环是 Js 中最常用的一个循环工具,经常用于数组的循环遍历. 2.for in 循环 let obj = {name:'zhou',age:'**'}for(let i in obj){ con