JavaScript中,数组和对象的遍历方法总结

更新日期: 2020-01-24阅读: 1.4k标签: 遍历

循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现。这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识。


数组遍历

方法一:for 循环

for 循环是使用最多,也是性能优化最好的一种遍历方式。

var arr = ["a", "b", "c"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
// a b c

同样常规的循环类型还有 while 循环和 do/while 循环。

它们之间的区别在于,for 循环预先知道循环次数,while 循环不知道循环次数,do/while 至少会循环次数。

方法二:for-of 遍历

for-of 是 ES6 新增的语法。它直接遍历值,而不是数组下标(或对象属性)。

var arr = ["a", "b", "c"];
for (let item of arr) {
  console.log(item);
}
// a b c

实际上,for-of 语句不仅可以循环遍历数组对象。

还可以迭代 Array、Map、Set、String 等对象。

// 遍历String
let str = "Hello";
for (let value of str) {
  console.log(value)
}
// H e l l o

// 遍历Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for-of 的工作原理是,向循环对象请求一个迭代器对象,然后通过迭代器对象的next()方法来获得返回值。

数组内置了 @@iterator,@@iterator不是迭代器,而是返回一个迭代器对象的函数

var arr = ["a", "b","c"];
var it = arr[Symbol.iterator]();
console.log(it.next());  // { value: 'a', done: false }
console.log(it.next());  // { value: 'b', done: false }
console.log(it.next());  // { value: 'c', done: false }
console.log(it.next());  // { value: undefined, done: true }

上面代码中,value 表示当前遍历值,done 是布尔值,表示是否还有可以遍历的值。

需要注意的是,普通对象没有内置@@iterator,所以无法使用 for-of 遍历。

这么做的原因很复杂,简单来说,就是为了避免影响未来的对象类型。

不过,我们可以通过Object.defineProperty(...)给对象定义@@iterator。

详细可以通过这里了解

方法三:数组方法

为了适应不同方式的遍历,JavaScript 内置了许多的数组方法。

例如比较常用的forEach()方法,写起来,可以让代码更简洁。

var arr = ["a", "b", "c"];
arr.forEach((index, item) => {
  console.log(index, item)
})
// a 0
// b 1
// c 2

map()方法

var arr = [1, 2, 3];
var newArr = arr.map(item => {
  return item * 2;
});
console.log(newArr);  // [2, 4, 6]

filter()方法

var arr = [1, 2, 3];
var newArr = arr.filter(item => {
  return item > 1;
});
console.log(newArr); // [2, 3]

reduce()方法是 ES5 新增,专为下面这种累加操作的设计的。

实际能做的事情远比这要丰富,本文只是简单介绍基本用法,详细可以查看本文

var arr = [1, 2, 3];
var sum = arr.reduce((pre, cur) => {
  return pre + cur;
});
console.log(sum); // 6

every()方法用于检测数组元素是否全部符合指定条件。

它通常和下面的some()方法放在一起理解。

var arr = [1, 2, 3];
var bool = arr.every(item => {
  return item < 5;
});
console.log(bool); // true

some()方法用于检测数组是否存在一个符合指定条件的元素。

下面的例子是检测数组元素是否存在 Number 类型。

var arr = ["a", 1, "b"];
var bool = arr.some(item => {
  return typeof item === "number";
});
console.log(bool);  // true


对象的遍历方法

对象的遍历相对麻烦一些。

有两种方式可以实现对象的遍历,一种是直接使用 for-in 循环;另一方式,是将对象转换成数组,再进行遍历。

方法一:for-in 循环

for-in 专门用于遍历对象的可枚举属性,包括 prototype 原型链上的属性,因此性能会比较差。

什么是可枚举属性?

从名字上可以看出,就是该属性会出现在对象的迭代(枚举)中,比如 for-in 循环中。

var obj = { a: 2, b: 4, c: 6 };
for (let key in obj) {
  console.log(key);
}
// a b c

方法二:Object.keys() 和 Object.getOwnPropertyNames()

Object.key()会返回一个数组,包含所有可枚举属性;Object.getOwnPropertyNames()也会返回一个数组,包含所有元素,不管是否可枚举。

需要说明的是,两者都只查找对象的自定义属性。

var obj = { a: 2, b: 4, c: 6 };
// Object.keys()
Object.keys(obj).forEach(key => {
  console.log(key);
})
// a b c

// Object.getOwnPrepertyNames()
Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(key);
})
// a b c

此外,还可以通过Reflect.ownKeys(obj)方法来遍历。

它返回一个数组,包含对象自定义的属性,不管属性名是 Symbol 还是字符串,也不管是否可枚举。


链接: https://www.fly63.com/article/detial/7611

js中循环总结,多种循环遍历的实现介绍(while,for,map,foreach等)

循环是所有语言最基础的语法。这篇文章将介绍avascript多种循环遍历的实现介绍,包括for ..in遍历方式 ,do..while,forEach,for…of,map等等,

JavaScript数组遍历:for、foreach、for in、for of、$.each、$().each的区别

JavaScript数组遍历的区别,推荐在循环对象属性的时候使用for in,在遍历数组的时候的时候使用for of;for in循环出的是key,for of循环出的是value;for of是ES6新引入的特性。修复了ES5的for in的不足;

PHP遍历二叉树

遍历二叉树,这个相对比较复杂。二叉树的便利,主要有两种,一种是广度优先遍历,一种是深度优先遍历。什么是广度优先遍历?就是根节点进入,水平一行一行的便利。

js数组、对象、字符串的遍历

数组遍历:for --使用变量将数组长度缓存起来,在数组较长时性能优化效果明显,forEach --ES5语法;对象遍历:for...in --以任意顺序遍历一个对象自有的、继承的、可枚举的

Js二叉树与多叉树的遍历

二叉树的顺序存储结构就是用一维数组存储二叉树中的各个结点,并且结点的存储位置能体现结点之间的逻辑关系。二叉树的遍历有三种方式,如下:

JS中map与forEach的用法

相同点:都是循环遍历数组中的每一项;每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)

Js数组遍历方法总汇

for in语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作);For循环可以将代码块执行指定的次数。forEach按照原始数组元素顺序依次处理元素.

深度优先遍历,广度优先遍历实现对象的深拷贝 深度优先遍历

深度优先遍历(Depth-First-Search),是搜索算法的一种,它沿着树的深度遍历树的节点,尽可能深地搜索树的分支。当节点v的所有边都已被探寻过,将回溯到发现节点v的那条边的起始节点。

Js中常见的几种循环遍历

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

javascript如何遍历对象?

javascript遍历对象的方法:1、使用Object.keys()遍历。2、使用for..in.遍历。3、使用Object.getOwnPropertyNames(obj)遍历。4、使用Reflect.ownKeys(obj)遍历。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!