JavaScript遍历对象-总结一

原生JavaScript 遍历

  1、for 循环遍历

1 let array1 = [‘a‘,‘b‘,‘c‘];
2
3 for (let i = 0;i < array1.length;i++){
4   console.log(array1[i]);  // a  b  c
5 }

  2、JavaScript 提供了 foreach()  map() 两个可遍历 Array对象 的方法

    forEach和map用法类似,都可以遍历到数组的每个元素,而且参数一致;   

Array.forEach(function(value , index , array){ //value为遍历的当前元素,index为当前索引,array为正在操作的数组
  //do something
},thisArg)      //thisArg为执行回调时的this值

    不同点:

forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined;

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。返回值是一个新的数组;

例子如下:

    var array1 = [1,2,3,4,5];

    var x = array1.forEach(function(value,index){

        console.log(value);   //可遍历到所有数组元素

        return value + 10
    });
    console.log(x);   //undefined    无论怎样,总返回undefined

    var y = array1.map(function(value,index){

        console.log(value);   //可遍历到所有数组元素

        return value + 10
    });
    console.log(y);   //[11, 12, 13, 14, 15]   返回一个新的数组

  

  对于类似数组的结构,可先转换为数组,再进行遍历

  

let divList = document.querySelectorAll(‘div‘);   //divList不是数组,而是nodeList

//进行转换后再遍历
[].slice.call(divList).forEach(function(element,index){
  element.classList.add(‘test‘)
})

Array.prototype.slice.call(divList).forEach(function(element,index){
  element.classList.remove(‘test‘)
})

[...divList].forEach(function(element,index){   //ES6写法
  //do something
})

  3、 for ··· in ···     /      for ··· of ···

     for...in 语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。每次迭代时,分配的是属性名  

     补充 : 因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。 因此当迭代那些访问次序重要的 arrays 时用整数索引去进行 for 循环 (或者使用 Array.prototype.forEach() 或 for...of 循环) 。

let array2 = [‘a‘,‘b‘,‘c‘]
let obj1 = {
  name : ‘lei‘,
  age : ‘16‘
}

for(variable  in array2){   //variable  为 index
  console.log(variable )   //0 1 2
}

for(variable  in obj1){   //variable 为属性名
  console.log(variable)   //name age
}

  

      ES6新增了 遍历器(Iterator)机制,为不同的数据结构提供统一的访问机制。只要部署了Iterator的数据结构都可以使用 for ··· of ··· 完成遍历操作  ( Iterator详解 :  http://es6.ruanyifeng.com/#docs/iterator ),每次迭代分配的是 属性值

   原生具备 Iterator 接口的数据结构如下:

      Array   Map Set String TypedArray 函数的arguments对象 NodeList对象

let array2 = [‘a‘,‘b‘,‘c‘]
let obj1 = {
  name : ‘lei‘,
  age : ‘16‘
}

for(variable  of array2){   //variable  为 value
  console.log(variable )   //‘a‘,‘b‘,‘c‘
}

for(variable  of obj1){  //普通对象不能这样用
  console.log(variable)   // 报错 : main.js:11Uncaught TypeError: obj1[Symbol.iterator] is not a function
}

let divList = document.querySelectorAll(‘div‘);

for(element of divlist){  //可遍历所有的div节点  //do something }

  如何让普通对象可以用for of 进行遍历呢?  http://es6.ruanyifeng.com/#docs/iterator  一书中有详细说明了!

  除了迭代时分配的一个是属性名、一个是属性值外,for in 和 for of 还有其他不同    (MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of)

    for...in循环会遍历一个object所有的可枚举属性。

      for...of会遍历具有iterator接口的数据结构

      for...in 遍历(当前对象及其原型上的)每一个属性名称,而 for...of遍历(当前对象上的)每一个属性值

  

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

    

  

时间: 2024-10-09 03:37:15

JavaScript遍历对象-总结一的相关文章

javaScript遍历对象、数组总结

javaScript遍历对象总结 1.使用Object.keys()遍历 var obj = {'0':'a','1':'b','2':'c'}; Object.keys(obj).forEach(function(key){ console.log(key,obj[key]); }); 2.使用for..in..遍历 var obj = {'0':'a','1':'b','2':'c'}; for(var i in obj) { console.log(i,":",obj[i]);

JQuery $.each遍历JavaScript数组对象实例

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q

javascript . 05 json的组成、for...in 遍历对象、简单数据类型与复杂数据类型的传值与传址、内置对象

对象字面量  JSON var obj = { aaa :999}; var json={"aaa":999,"bbb":888}; "kay":value 对象字面2??定义方法和json很像,只有一点不同,json的key 必须加"" : 对象,数组也可以作为键值 JSON的组成 Javascript Object Notation 对象字面量的一种表现形式 : 键名必须有双引号""包围 : 为什么用J

js 获取函数的所有参数和遍历JavaScript某个对象所有的属性名称和值的方法

获取所有参数 function test(){ for(var i=0;i<arguments.length;i++)  document.write(arguments[i]); } 遍历某个对象所有的属性名称和值的方法 <script language="javascript"> var obj = new Object(); obj.myname = "我是对象"; obj.pro2 = "23"; obj.pro3 = 

高性能 javaScript 之遍历对象属性

在面向对象的开发工作中,经常会遇到检查对象属性和遍历对象属性的情况. JavaScript 不包含如 java.C 等语言的传统类继承模型,而是使用 prototype 原型模型. JavaScript 原型链继承中属性查找过程 当查找一个对象的属性时,JavaScript 会向上遍历原型链,直到找到给定名称的属性为止.到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性,就会返回 undefined. 使用 for in 循环可以遍历对象所有的属

javaScript for in循环遍历对象

for循环常被我们用来遍历数组,而如何遍历对象呢? 这时就需要用到for in循环了 写一个遍历对象名简写如下: for(var xxx in ooo){console.log(xxx)} 其中xxx是由用户自定名称,即指向每次遍历到的对象的指针 ooo是要遍历的对象,现把先前写的对象哪来遍历一下,代码 如下: 1 Person.prototype.Lname = 'xiaohuang'; 2 Person.prototype.modd = 'unhappy'; 3 function Perso

javascript 的对象

所有事物都是对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 布尔型可以是一个对象. 数字型可以是一个对象. 字符串也可以是一个对象 日期是一个对象 数学和正则表达式也是对象 数组是一个对象 甚至函数也可以是对象 JavaScript 对象 对象只是一种特殊的数据.对象拥有属性和方法. 访问对象的属性 属性是与对象相关的值. 访问对象属性的语法是: objectName.propertyName 这个例子使用了

javascript获取对象直接量中的属性和属性值

javascript获取对象直接量中的属性和属性值:所谓的对象直接量简单来说就是,由大括号包裹的键值对列表,例如: var antzone={ webName:"蚂蚁部落", address:"青岛市南区", age:2 } 下面介绍一下如何获取对象直接量中的属性和属性值,代码如下: var antzone={ webName:"蚂蚁部落", address:"青岛市南区", age:2 } for(var prop in a

jQuery遍历对象/数组/集合

转载自: 网络 1.jquery 遍历对象 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script language="javascript" type="text/javascript" src="