原生JavaScript 遍历
　　1、for 循环遍历&
<span style="color: # let array1 = ['a','b','c'];
<span style="color: #
<span style="color: # for (let i = 0;i & array1.i++){
<span style="color: #
console.log(array1[i]);
<span style="color: # }
　　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){
//do something
　　3、 for ··· in ···&&&& /&&&&& for ··· of ···
　　　　　for...in&语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。每次迭代时，分配的是属性名　　
　　　　　补充 : 因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。&因此当迭代那些访问次序重要的 arrays 时用整数索引去进行&&循环&(或者使用&&或&&循环) 。
let array2 = ['a','b','c']
let obj1 = {
name : 'lei',
age : '16'
for(variable
in array2){
//variable
console.log(variable )
for(variable
//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
console.log(variable )
//'a','b','c'
for(variable
//普通对象不能这样用
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
阅读(...) 评论()js for循环 遍历数组
遍历对象属性
1、js for循环 遍历对象属性
var person = {fname:"John",lname:"Doe",age:25};
for (x in person) {
console.log(x + "=" + person[x]);
控制台输出结果：
fname=John
2、js for循环 遍历数组
var mycars = new Array("Saab","Volvo","BMW");
for (x in mycars){
console.log(x + "=" + mycars[x])
控制台输出结果：
没有更多推荐了，js如何遍历对象属性和值
[问题点数：30分，结帖人qingwadaxia_1]
本版专家分：20
结帖率 93.99%
CSDN今日推荐
本版专家分：19021
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
本版专家分：19021
2016年12月 Web 开发大版内专家分月排行榜第二2016年10月 Web 开发大版内专家分月排行榜第二
2017年11月 Web 开发大版内专家分月排行榜第三2017年6月 Web 开发大版内专家分月排行榜第三2017年3月 Web 开发大版内专家分月排行榜第三2017年2月 Web 开发大版内专家分月排行榜第三2017年1月 Web 开发大版内专家分月排行榜第三2016年11月 Web 开发大版内专家分月排行榜第三
本版专家分：121789
2017年 总版技术专家分年内排行榜第七
2018年5月 Web 开发大版内专家分月排行榜第一2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年6月 Web 开发大版内专家分月排行榜第二2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
本版专家分：20
结帖率 93.99%
本版专家分：20
结帖率 93.99%
本版专家分：121789
2017年 总版技术专家分年内排行榜第七
2018年5月 Web 开发大版内专家分月排行榜第一2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年6月 Web 开发大版内专家分月排行榜第二2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2016年12月 Web 开发大版内专家分月排行榜第三2016年10月 Web 开发大版内专家分月排行榜第三2016年1月 Web 开发大版内专家分月排行榜第三2015年12月 Web 开发大版内专家分月排行榜第三2015年11月 Web 开发大版内专家分月排行榜第三2015年10月 Web 开发大版内专家分月排行榜第三2015年5月 Web 开发大版内专家分月排行榜第三2015年1月 Web 开发大版内专家分月排行榜第三2014年12月 Web 开发大版内专家分月排行榜第三
本版专家分：395997
2017年 总版技术专家分年内排行榜第三
2013年 总版技术专家分年内排行榜第五
2018年5月 总版技术专家分月排行榜第一2018年4月 总版技术专家分月排行榜第一2018年2月 总版技术专家分月排行榜第一2017年8月 总版技术专家分月排行榜第一
2018年3月 总版技术专家分月排行榜第二2017年11月 总版技术专家分月排行榜第二2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
本版专家分：20
结帖率 93.99%
本版专家分：395997
2017年 总版技术专家分年内排行榜第三
2013年 总版技术专家分年内排行榜第五
2018年5月 总版技术专家分月排行榜第一2018年4月 总版技术专家分月排行榜第一2018年2月 总版技术专家分月排行榜第一2017年8月 总版技术专家分月排行榜第一
2018年3月 总版技术专家分月排行榜第二2017年11月 总版技术专家分月排行榜第二2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
匿名用户不能发表回复！|
CSDN今日推荐深入JS对象的遍历 - 简书
深入JS对象的遍历
在Javascript编程时，经常需要遍历对象的键、值，ES5提供了for...in用来遍历对象，然而其涉及对象属性的“可枚举属性”、原型链属性等，总会让人多少摸不着头脑。
本文将由Object对象本质探寻各种遍历对象的方法，并区分常用方法的特点。
本文所提的对象，特指Object的实例，不包含Set、Map、Array等数据集对象。
剥开Object的“伪装”
Javascript的对象，每一个属性都有其“属性描述符”，主要有两种形式：数据描述符和存取描述符。
可以通过 Object.getOwnPropertyDescriptor 与 Object.getOwnPropertyDescriptors两个方法获取对象的属性描述符。
以下通过示例说明：
var obj = {
name: '10',
get age(){
return this._
set age(age){
if(age&1){
throw new Error('Age must be more than 0');
this._age =
var des = Object.getOwnPropertyDescriptors(obj);
console.log(des);
configurable: true,
enumerable: true,
value: "10",
writable: true,
__proto__: Object
configurable: true,
enumerable: true,
value: 25,
writable: true,
__proto__: Object
configurable: true,
enumerable: true,
get: f age(),
set: f age(age),
__proto__: Object
__proto__: Object
name、_age拥有 'configurable'、'enumerable'、'value'、'writable'四个属性描述符，统称数据描述符
age拥有'configurable'、'enumerable'、'get'、'set'四个属性描述符，统称存取描述符
configurable
enumerable
数据描述符
存取描述符
对象的属性描述符，可以通过Object.defineProperty和Object.defineProperties来修改(configurable为true的条件下)
详细内容可以参考：
了解了这个之后，与今天主题相关的，也就是 'enumerable'这个属性描述符啦，其值为 true 时，我们称其为“可枚举的”，属性是否可枚举影响了我们在使用原生方法遍历对象时的结果，在本文后面，将详细说明。
掌握属性描述符，无论是对自己以后的代码编写，还是学习开源框架源码，都是十分基础而且重要的，在此处仅作介绍，并着重关注与本文主题相关的属性。
常用遍历方法
for..in..遍历
遍历自身及原型链上所有可枚举的属性
示例代码：
var Person = function({name='none', age=18, height=170}={}){
this.name =
this.age =
this.height =
Person.prototype = {
type: 'Animal'
var qiu = new Person()
// 将height属性设置为 不可枚举
Object.defineProperty(qiu, 'height', {
enumerable: false
for(let n in qiu){
console.log(n);
// output: name age type
如以上代码所示，使用for..in..遍历，会将对象自身及其原型链上的所有可枚举属性全部遍历出来。
而往往我们并不需要将原型链上的属性也遍历出来，因此常常需要如下处理：
for(let n in qiu){
// 判断是否实例自身拥有的属性
if(qiu.hasOwnProperty(n)){
console.log(n)
因为for..in..在执行的时候，还进行了原型链查找，当只需要遍历对象自身的时候，性能上会收到一定影响。
Object.keys遍历
返回一个数组,包括对象自身的(不含继承的)所有可枚举属性
示例代码：
var Person = function({name='none', age=18, height=170}={}){
this.name =
this.age =
this.height =
Person.prototype = {
type: 'Animal'
var qiu = new Person()
// 将height属性设置为 不可枚举
Object.defineProperty(qiu, 'height', {
enumerable: false
var keys = Object.keys(qiu);
console.log(keys)
// output: ['name', 'age']
通过上述代码，我们可以看到，Object.keys仅遍历对象本身，并将所有可枚举的属性组合成一个数组返回。
在很多情况下，其实我们需要的，也就是这样一个功能。
例如以下，将键值类型的查询param转换成url的query，不仅代码量少、逻辑清晰，而且可以通过链式的写法使得整体更加优雅。
const searchObj = {
title: 'javascript',
author: 'Nicolas',
publishing: "O'RELLY",
language: 'cn'
let searchStr = Object.keys(searchObj)
.map(item =& `${item}=${searchObj[item]}`)
.join('&');
let url = `localhost:8080/api/test?${searchStr}`
遍历键值对的数据时，使用Object.keys真是不二之选。
Object.getOwnPropertyNames遍历
返回一个数组，包含对象自身（不含继承）的所有属性名
示例代码：
var Person = function({name='none', age=18, height=170}={}){
this.name =
this.age =
this.height =
Person.prototype = {
type: 'Animal'
var qiu = new Person()
// 将height属性设置为 不可枚举
Object.defineProperty(qiu, 'height', {
enumerable: false
var keys = Object.getOwnPropertyNames(qiu);
console.log(keys)
// output: ['name', 'age', 'height']
与Object.keys的区别在于Object.getOwnPropertyNames会把不可枚举的属性也返回。除此之外，与Object.keys的表现一致。
说好的for..of..，为什么无效
在ES6中新增了迭代器与for..of..的循环语法，在数组遍历、Set、Map的遍历上，十分方便。然而当我应用在对象(特指Object的实例 )上时（如下代码），浏览器给我抛了一个异常：Uncaught TypeError: searchObj is not iterable。
const searchObj = {
title: 'javascript',
author: 'Nicolas',
publishing: "O'RELLY",
language: 'cn'
for(let n of searchObj){
console.log(n)
// Uncaught TypeError: searchObj is not iterable
没错...这是一个错误的演示，在ES6中，对象默认下并不是可迭代对象，表现为其没有[Symbol.iterator]属性，可以通过以下代码对比：
const searchObj = {
title: 'javascript',
author: 'Nicolas'
const bookList = ['javascript', 'java', 'c++'];
const nameSet = new Set(['Peter', 'Anna', 'Sue']);
console.log(searchObj[Symbol.iterator]); // undefined
console.log(bookList[Symbol.iterator]); // function values(){[native code]}
console.log(nameSet[Symbol.iterator]); // function values(){[native code]}
// 注，Set、Map、Array的[Symbol.iterator]都是其原型对象上的方法，而非实例上的，这点需要注意
而for..of..循环，实际上是依次将迭代器(或任何可迭代的对象，如生成器函数)的值赋予指定变量并进行循环的语法，当对象没有默认迭代器的时候，当然不可以进行循环，而通过给对象增加一个默认迭代器，即[Symbol.iterator]属性，就可以实现，如下代码：
Object.prototype[Symbol.iterator] = function *keys(){
for(let n of Object.keys(this)){ // 此处使用Object.keys获取可枚举的所有属性
const searchObj = {
title: 'javascript',
author: 'Nicolas',
publishing: "O'RELLY",
language: 'cn',
for(let key of searchObj){
console.log(key)
// output: title author publishing language
以上代码确实获得了对象的所有键名，在生成器函数内，我们使用的是Object.keys获得所有可枚举的属性值，然而这并不是所有人都期望的，也许小明期望不可枚举的属性值也被遍历，而小新可能连[Symbol.iterator]也希望遍历出来，于是，这里产生了一些分歧，如何遍历有以下几种因素：
总结起来，对象的property至少有三个方面的因素：
属性是否可枚举，即其 enumerable属性描述符 的值；
属性的类型，是字符串类型、还是Symbol类型；
属性所属，包含原型，还是仅仅包含实例本身；
鉴于各方意见不一，并且现有的遍历方式可以满足，于是标准组没有将[Symbol.iterator]加入。
关于ES6迭代器、生成器的更多知识，可以参考：
1.属性的简洁表示法 允许直接写入变量和函数 上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。下面是另一个例子。 除了属性简写，方法也可以简写。 实际的例子： 这种方法用于函数的返回值，将会非常方便。 CommonJS模块输出一组...
官方中文版原文链接 感谢社区中各位的大力支持，译者再次奉上一点点福利：阿里云产品券，享受所有官网优惠，并抽取幸运大奖：点击这里领取 在第一和第二章中，我们讲解了this绑定如何根据函数调用的调用点指向不同的对象。但究竟什么是对象，为什么我们需要指向它们？这一章我们就来详细探...
属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法 ES6允许在对象之中，只写属性名，不写属性值。这时，属性值等于属性名所代表的变量 ES6允许在对象之中,简写方法 如果某个方法的值是一个Generator函数，前面需要加上星号 属性名表达式 ES5中只能...
属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 上面代码表明，ES6允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。下面是另一个例子。 除了属性简写，方法也可以简写。 下面是一个实际的例子。 这种写法用于函数...
别因为某一段爱情的消逝，就不再相信爱情。所谓真爱，是一条流动的长河， 而我们，是跨河而过的人。
白百何出轨的消息震惊了整个微博，出轨队再得一分，还有跑到王珞丹微博下留言，“终于没有人和你抢小妞电影啦”的。《失恋33天》剧组有毒，集齐了张子萱，文章，白百何，马伊俐，陈羽凡...
多久没有出去旅游了？怕是自己大概也不记得了，工作之后的自己，仿佛每一次休假心里都会有负罪感，可明明工作日天天加班到很晚，每周单休。 周二轮休，许是心血来潮，想想鼋头渚的樱花大概是要开了，便突然萌生了赏樱的冲动，忆起流年，读书时，约上三俩好友，穷游一番。说走就走。一觉睡至日上...
1.我们经常使用的摇头风扇的工作原理图 2.点钞机的工作原理图 3.缝纫机的工作原理图 4.手雷的工作原理图 5.硬币分类机的工作原理图 6.心脏的工作原理图 7.节日用的小号的工作原理图 8.洗衣机的工作原理图 9.锁与钥匙的工作原理图 10.手枪的工作原理图 11.汽车...
凯风西吹自楚来，铭诸肺腑当年谊。 厚情连绵十一年，霖沥共悯故乡情。 青山依旧颜未改，霞云孤鹜共秋水。 晓月清风半里路，君见斜阳一片红。 筱竹片林存诗意，斐然鸟鸣成文章。 阳春归故登祝融，峰顶相聚忆往昔。 英朗少年出家门，俊秀文采半点仁。 千般讫戏入学堂，艺林深处弄彷徨。 刘...