javascript 几种数据结构的遍历
javascript中遍历的方式有很多种，今天下几种数据结构的遍历。
1. 对象的遍历
对象的遍历方式：Object.keys , for...in , Object.getOwnPropertyNames
var obj = {
a: "a",
b: function() {
console.log("b");
}
};
var o = Object.create(obj, {
c: {
value: "c",
writable: true,
enumerable: true,
configurable: true
},
d: {
value: "d",
writable: true,
enumerable: false,
configurable: true
}
});
console.log(Object.keys(o)); // ["c"]
for (var key in o) {
console.log(key); // c a b
}
console.log(Object.getOwnPropertyNames(o)); // ["c","d"] Object.getOwnPropertyNames返回自身的可枚举和不可枚举的属性
总结：
- Object.keys返回对象自身的可枚举的属性名称
- for...in 返回对象自身和继承的可枚举的属性名称
- Object.getOwnPropertyNames返回自身的可枚举和不可枚举的属性
2.数组的遍历
数据遍历方式：for循环 ,for...of , forEach ,for...in 等
var arr = ["a", "b", 5, "c"];
for (var i = 0; i < arr.length; i++) {
if (typeof arr[i] !== "string") break;
console.log(arr[i]); // a b
}
for (var key of arr) {
if (typeof key !== "string") break;
console.log(key); // a b
}
for (var key in arr) {
if (typeof arr[key] !== "string") break;
console.log(key); // a b
console.log(arr[key]); // 0 1
}
arr.forEach((item, index) => {
// if(typeof item !=="string") break // Uncaught SyntaxError: Illegal break statement 语法错误
console.log(item, index); // a,0 b,1 c,2
});
var index = 0;
while (index < length) {
if (typeof arr[index] !== "string") break;
console.log(arr[index]); // a b
}
总结：
- for循环遍历写法复杂，需要设置变量
- for...of写法简单，用于所以有Symbol.iterator属性的数据结构，包括（Array,Map,Set,String,TypedArray,函数的 arguments 对象,NodeList 对象）
- forEach 写法简单，但是不可以中断. 可用every 或者 some 进行跳出的遍历
- for...in 输出的是下标
- while 需要设置变量
3.字符串的遍历
字符串遍历方式：for循环 ,for...of ,for…in
var str = "abc!";
for (var i = 0; i < str.length; i++) {
console.log(str[i]); // a b c !
}
for (var key in str) {
console.log(key); // 0 1 2 3
console.log(str[key]); // a b c !
}
for (var key of str) {
console.log(key); // a b c !
}
var index = 0;
while (index < length) {
console.log(str[index]); // a b c !
}
总结：字符串的遍历类似于数组，利用了自身的length属性
4. set的遍历
set的遍历方式：forEach, for…of
var set = new Set([1, 2, 2, "a", "b", "b"]);
console.log(set); // Set(4) {1, 2, "a", "b"}
console.log(set.size); // undefined
set.forEach((item, index) => {
console.log(item, index); // 1,1 2,2 a,a b,b
});
for (var i of set) {
console.log(i); // 1 2 a b
}
console.log(set.keys()); //SetIterator {1, 2, "a", "b"}
console.log(set.values()); //SetIterator {1, 2, "a", "b"}
console.log(set.entries()); //SetIterator {1, 2, "a", "b"}
var keys = set.keys();
console.log(keys.next()); // {value: 1, done: false}
var entries = set.entries();
console.log(entries.next()); // {value: [1,1], done: false}
for (var item of set.keys()) {
console.log(item); // 1 2 a b
}
for (var item of set.values()) {
console.log(item); // 1 2 a b
}
for (var item of set.entries()) {
console.log(item); // [1,1] [2,2] ["a","a"] ["b","b"]
}
总结：set实际上是对象的数据结构，其值是一个不可重复的集合，没有下标，键名和键值相同
- for...of可以直接遍历出set的每个值
- forEach 可以遍历每个键值和键名
- Set自身的keys,values,entries 均返回一个遍历器
5. map的遍历：是键值对的集合（Hash 结构）
遍历方式：for...of, map, forEach
var map = new Map();
map.set("a", 1);
map.set("b", 2);
map.set("c", 3);
console.log(map); // Map(3) {"a" => 1, "b" => 2, "c" => 3}
var mapEntries = map.entries();
console.log(mapEntries); //MapIterator {"a" => 1, "b" => 2, "c" => 3}
console.log(mapEntries.next()); //{value: Array(2), done: false}
for (var item of map) {
console.log(item); // ["a", 1] ["b", 2] ["c", 3]
}
map.forEach((value, key) => {
console.log(value, key); // 1,a 2,b 3,c
});
总结：Map也提供了keys,values,entries三种方法返回遍历器,并且有一个forEach方法提供Map数据的遍历类似数组的forEach
