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 相关文章推荐
js简单实现交换Li的值
May 22 Javascript
Jquery注册事件实现方法
May 18 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
3种vue组件的书写形式
Nov 29 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
Vue插件打包与发布的方法示例
Aug 20 Javascript
jquery实现选项卡切换代码实例
May 14 jQuery
layui表格分页 记录勾选的实例
Sep 02 Javascript
JavaScript 装逼指南(js另类写法)
May 10 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
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
初探nodeJS
2017/01/24 NodeJs
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
python简单实现获取当前时间
2016/08/27 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Python多进程原理与用法分析
2018/08/21 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Django models文件模型变更错误解决
2020/05/11 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
治庸问责心得体会
2014/09/12 职场文书
新教师个人总结
2015/02/06 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android