Js/jQuery 中 Array、Set、Map、Object、Jdom 的 for、for in、each、forEach 比較
阿新 • • 發佈：2018-12-12
| for | for in | each | forEach | |
| Array | √ | √ | √ | √ |
| Set | × | × | × | √ |
| Map | × | × | × | √ |
| Object | × | √ | √ | × |
| Jdom | √ | √ | √ | × |
一、簡單語法
1、Array
for (var i = 0; i < array.length; i++) { // do something } for (var element in array) { // do something } $.each(array, function (index, element, arr) { // do something }); array.forEach(function (element, index, arr) { // do something });
2、Set
set.forEach(function (ele1, ele2, st) {
// do something
});3、Map
map.forEach(function (value, key, map) {
// do something
});4、Object
for (var key in object) { // do something } $.each(object, function (key, element, obj) { // do something });
5、Jdom
for (var i = 0; i < jdoms.length; i++) {
// do something
}
for (var key in jdoms) {
// do something
// disapproval this way
}
jdoms.each(function (index, element, doms) {
// do something
});二、錯誤寫法
// wrong
// array.each(function (index, element) {
// });
// wrong
// object.forEach(function (element) {
// });
// wrong
// object.forEach(function (element, key, obj) {
// });三、測試用例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<ul>
<li>甲</li>
<li>乙</li>
<li>丙</li>
</ul>
<p id="output"></p>
</body>
<script>
$(function () {//after page load
loopAll();
});
function loopAll() {
println(" Array ");
loopArray();
println(" Set ");
loopSet();
println(" Map ");
loopMap();
println(" Object ");
loopObject();
println(" Jdoms ");
loopJdoms();
// wrong
// array.each(function (index, element) {
// });
// wrong
// object.forEach(function (element) {
// });
// wrong
// object.forEach(function (element, key, obj) {
// });
}
function loopArray() {
var array = ["a", "b", "c"];
println("------------- for -------------");
for (var i = 0; i < array.length; i++) {
print(i + ":");
println(array[i]);
}
println("------------- for in -------------");
for (var element in array) {
println(element);
}
println("------------- each -------------");
$.each(array, function (index, element, arr) {
print(index + ":");
println(element);
});
println("------------- forEach -------------");
array.forEach(function (element, index, arr) {
print(index + ":");
println(element);
});
}
function loopSet() {
var set = new Set();
set.add("g");
set.add("h");
set.add("i");
println("------------- for -------------");
// not support
println("------------- for in -------------");
// not support
println("------------- each -------------");
// not support
println("------------- forEach -------------");
set.forEach(function (ele1, ele2, st) {
print(ele1 + ":");
println(ele2);
});
}
function loopMap() {
var map = new Map();
map.set("d", 1);
map.set("e", "2");
map.set("f", 3);
println("------------- for -------------");
// not support
println("------------- for in -------------");
// not support
println("------------- each -------------");
// not support
println("------------- forEach -------------");
map.forEach(function (value, key, map) {
print(key + ":");
println(value);
});
}
function loopObject() {
var object = {
"id": 4,
"name": "j",
"age": 5,
"son": {
"name": "k"
}
};
println("------------- for -------------");
// not support
println("------------- for in -------------");
for (var key in object) {
print(key + ":");
println(object[key]);
}
println("------------- each -------------");
$.each(object, function (key, element, obj) {
print(key + ":");
println(element);
});
println("------------- forEach -------------");
// not support
}
function loopJdoms() {
var jdoms = $("li");
println("------------- for -------------");
for (var i = 0; i < jdoms.length; i++) {
print(i + ":");
println(jdoms[i]);
}
println("------------- for in -------------");
for (var key in jdoms) {
if ("length" == key) {
print(key + ":");
println(jdoms[key]);
break;
}
}
println("------------- each -------------");
jdoms.each(function (index, element, doms) {// element is dom
element = $(element);// element is jdom
print(index + ":");
println(element.text());
});
println("------------- forEach -------------");
// not support
}
function println(message) {
print(message);
$("#output").append("<br>");
}
function print(message) {
if ("undefined" == typeof (message)) {
message = "";
} else if ("object" == typeof (message)) {
message = JSON.stringify(message);
}
$("#output").append(message);
}
</script>
</html>