JavaScript中的遍历详解(多种遍历)


Posted in Javascript onApril 07, 2017

对象遍历

为了便于对象遍历的测试,我在下面定义了一个测试对象 obj。

测试对象

// 为 Object 设置三个自定义属性(可枚举)
Object.prototype.userProp = 'userProp';
Object.prototype.getUserProp = function() {
 return Object.prototype.userProp;
};
// 定义一个对象,隐式地继承自 Object.prototype
var obj = {
 name: 'percy',
 age: 21,
 [Symbol('symbol 属性')]: 'symbolProp',
 unEnumerable: '我是一个不可枚举属性',
 skills: ['html', 'css', 'js'],
 getSkills: function() {
  return this.skills;
 }
};
// 设置 unEnumerable 属性为不可枚举属性
Object.defineProperty(obj, 'unEnumerable', {
 enumerable: false
});

ES6 之后,共有以下 5 种方法可以遍历对象的属性。

for…in: 遍历对象自身的和继承的可枚举属性(不含 Symbol 类型的属性)

for (let key in obj) {
 console.log(key);
 console.log(obj.key); // wrong style
 console.log(obj[key]); // right style
}

不要使用 for…in 来遍历数组,虽然可以遍历,但是如果为 Object.prototype 设置了可枚举属性后,也会把这些属性遍历到,因为数组也是一种对象。

Object.keys(obj):返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 类型的属性)

Object.keys(obj); 
// ["name", "age", "skills", "getSkills"]

Object.getOwnPropertyNames(obj):返回一个数组,包含对象自身的所有属性(不含 Symbol 类型的属性,不包含继承属性,但是包括不可枚举属性)

Object.getOwnPropertyNames(obj);
// ["name", "age", "unEnumerable", "skills", "getSkills"]

Object.getOwnPropertySymbols(obj):返回一个数组,包含对象自身的所有 Symbol 类型的属性(不包括继承的属性)

Object.getOwnPropertySymbols(obj);
// [Symbol(symbol 属性)]

Reflect.ownKeys(obj):返回一个数组,包含对象自身的所有属性(包含 Symbol 类型的属性,还有不可枚举的属性,但是不包括继承的属性)

Reflect.ownKeys(obj);
// ["name", "age", "unEnumerable", "skills", "getSkills", Symbol(symbol 属性)]

以上的5种方法遍历对象的属性,都遵守同样的属性遍历的次序规则

  • 首先遍历所有属性名为数值的属性,按照数字排序
  • 其次遍历所有属性名为字符串的属性,按照生成时间排序
  • 最后遍历所有属性名为Symbol值的属性,按照生成时间排序

如何判断某个属性是不是某个对象自身的属性呢?
in 操作符(不严谨,它其实判定的是这个属性在不在该对象的原型链上)

'age' in obj;  // true
'userProp' in obj; // true (userProp 是 obj 原型链上的属性)
'name' in Object; // true 
// 上面这个也是 true 的原因是,Object 是一个构造函数,而函数恰巧也有一个 name 属性
Object.name;   // 'Object'
Array.name;   // 'Array'

hasOwnProperty(),这个方法只会检测某个对象上的属性,而不是原型链上的属性。

obj.hasOwnProperty('age');  // true
obj.hasOwnProperty('skills'); // true
obj.hasOwnProperty('userProp'); // false

但是它还是有不足之处的。举例~

// 利用 Object.create() 新建一个对象,并且这个对象没有任何原型链
var obj2 = Object.create(null, {
 name: { value: 'percy' },
 age: { value: 21 },
 skills: { value: ['html', 'css', 'js'] }
});
obj2.hasOwnProperty('name'); // 报错 
obj2.hasOwnProperty('skills'); // 报错

针对上面的情况,我们用一个更完善的解决方案来解决。
使用 Object.prototype.hasOwnProperty.call(obj,'prop'…)

Object.prototype.hasOwnProperty.call(obj2,'name');  // true
Object.prototype.hasOwnProperty.call(obj2,'skills'); // true
Object.prototype.hasOwnProperty.call(obj2,'userProp'); // false

数组遍历

数组实际上也是一种对象,所以也可以使用上面对象遍历的任意一个方法(但要注意尺度),另外,数组还拥有其他遍历的方法。
最基本的 for 循环、while 循环遍历(缺陷是多添加了一个计数变量)
ES6 引入:for…of ,这下就没有这个计数变量了,但是也不够简洁(这里不做详细介绍,以后写)

for(let value of arr){
 console.log(value);
}

下面说几种数组内置的一些遍历方法
Array.prototype.forEach(): 对数组的每个元素执行一次提供的函数

Array.prototype.forEach(callback(currentValue, index, array){
 // do something
}[,thisArg]);
// 如果数组在迭代时被修改了,则按照索引继续遍历修改后的数组
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
 console.log(word);
 if (word === "two") {
 words.shift();
 }
});
// one
// two
// four

Array.prototype.map(): 返回一个新数组,每个元素都是回调函数返回的值

Array.prototype.map(callback(currentValue, index, array){
  // do something 
}[,thisArg]);
``` 
```js
// map 的一个坑
[1,2,3].map(parseInt); // [1, NaN, NaN]
// 提示 map(currentValue,index,array)
//  parseInt(value,base)
  • 一些有用的数组内置方法(类似 map,回调函数的参数都是那 3 个)

    • Array.prototype.every(callback[,thisArg]): 测试数组的各个元素是否通过了回调函数的测试,若都通过,返回 true,否则返回 false(说地本质点儿,就是如果回调函数每次返回的值都是 true 的话,则 every() 返回 true,否则为 false)
    • Array.prototype.filter(callback[,thisArg]): 返回一个新数组,数组的元素是原数组中通过测试的元素(就是回调函数返回 true 的话,对应的元素会进入新数组)
    • Array.prototype.find(callback[,thisArg]): 返回第一个通过测试的元素
    • Array.prototype.findIndex(callback[,thisArg]): 与上面函数类似,只不过这个是返回索引
    • Array.prototype.some(callback[,thisArg]): 类似 find() ,只不过它不返回元素,只返回一个布尔值。只要找到一个通过测试的,就返回 true
  • Array.prototype.reduce(callback,[initialValue]): 习惯性称之为累加器函数,对数组的每个元素执行回调函数,最后返回一个值(这个值是最后一次调用回调函数时返回的值)

    • 这个函数的回调函数有 4 个参数
      • accumulator: 上一次调用回调函数返回的值
      • currentValue: 当前在处理的值
      • currentIndex
      • array
    • initialValue: 可选项,其值用于第一次调用 callback 的第一个参数
  • Array.prototype.reduceRight(callback[, initialValue]): 用法和上面的函数一样,只不过遍历方向正好相反

// 一些相关的案例
// 对数组进行累加、累乘等运算
[1,10,5,3,8].reduce(function(accumulator,currentValue){
 return accumulator*currentValue;
}); // 1200
// 数组扁平化
[[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
 return a.concat(b);
}); // [0, 1, 2, 3, 4, 5]
[[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
 return a.concat(b);
}); // [4, 5, 2, 3, 0, 1]

总结一下上面这些函数的共性

  • 都是通过每次的回调函数的返回值进行逻辑操作或判断的
  • 回调函数都可以写成更简洁的箭头函数(推荐)
  • 都可以通过形如 Array.prototype.map.call(str,callback) 的方式来操作字符串
var str = '123,hello';
// 反转字符串
Array.prototype.reduceRight.call(str,function(a,b){
 return a+b;
}); // olleh,321
// 过滤字符串,只保留小写字母
Array.prototype.filter.call('123,hello', function(a) {
 return /[a-z]/.test(a);
}).join(''); // hello
// 利用 map 遍历字符串(这个例子明显举得不太好 *_*)
Array.prototype.map.call(str,function(a){
 return a.toUpperCase();
}); // ["1", "2", "3", ",", "H", "E", "L", "L", "O"]

最下面的文章想说的就是让我们用更简洁的语法(比如内置函数)遍历数组,从而消除循环结构。

参考资料:无循环 JavaScript

Javascript 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 #Javascript
Google 爬虫如何抓取 JavaScript 的内容
Apr 07 #Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 #Javascript
js实现图片加载淡入淡出效果
Apr 07 #Javascript
AngularJS中的拦截器实例详解
Apr 07 #Javascript
Vue.js如何优雅的进行form validation
Apr 07 #Javascript
详解Node.js实现301、302重定向服务
Apr 07 #Javascript
You might like
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JS判断字符串包含的方法
2015/05/05 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
Python守护进程和脚本单例运行详解
2017/01/06 Python
python实现飞机大战游戏
2020/10/26 Python
python 追踪except信息方式
2020/04/25 Python
CSS3实现伪类hover离开时平滑过渡效果示例
2017/08/10 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
北京SQL新华信咨询
2016/09/30 面试题
remote接口和home接口主要作用
2013/05/15 面试题
出纳工作岗位责任制
2014/02/02 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
个人四风对照检查材料
2014/09/26 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
土地租赁协议书
2015/01/29 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
社区服务理念口号
2015/12/25 职场文书
初三数学教学反思
2016/02/17 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers