戦場に到着する5つの勢力
自己紹介リンク
for
私はthe Traverse World 最初に登場した王子様、ここにいるみんなはおじいちゃんと呼んでね。開発者のニーズのほとんどを満たすことができます。
は、for 、foreach 、map、for...in 、for.. です。 of
// 遍历数组
let arr = [1,2,3];
for(let i = 0;i < arr.length;i++){
console.log(i) // 索引，数组下标
console.log(arr[i]) // 数组下标所对应的元素
}
// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){
console.log(keys[i]) // 对象的键值
console.log(profile[keys[i]]) // 对象的键对应的值
}
// 遍历字符串
let str = "abcdef";
for(let i = 0;i < str.length ;i++){
console.log(i) // 索引 字符串的下标
console.log(str[i]) // 字符串下标所对应的元素
}
// 遍历DOM 节点
let articleParagraphs = document.querySelectorAll('.article > p');
for(let i = 0;i<articleParagraphs.length;i++){
articleParagraphs[i].classList.add("paragraph");
// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。
}forEach
ES5 バージョンをリリースしました。コールバック関数は、有効な値を含む配列内の項目ごとに昇順で 1 回実行され、削除または初期化されていない項目はスキップされます (疎配列など)。私は for ループの拡張バージョンです。
// 遍历数组
let arr = [1,2,3];
arr.forEach(i => console.log(i))
// logs 1
// logs 2
// logs 3
// 直接输出了数组的元素
//遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
let keys = Object.keys(profile);
keys.forEach(i => {
console.log(i) // 对象的键值
console.log(profile[i]) // 对象的键对应的值
})map
ES5 バージョンもリリースしました。新しい配列を作成できます。新しい配列の結果は、提供された関数を呼び出した後の元の配列の各要素の戻り値です一度。 。
let arr = [1,2,3,4,5]; let res = arr.map(i => i * i); console.log(res) // logs [1, 4, 9, 16, 25]
for...列挙
#ES5 バージョンをリリースしました。 Symbol を除くオブジェクトの列挙可能なプロパティを任意の順序で繰り返します。// 遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i in profile){
let item = profile[i];
console.log(item) // 对象的键值
console.log(i) // 对象的键对应的值
// 遍历数组
let arr = ['a','b','c'];
for(let i in arr){
let item = arr[i];
console.log(item) // 数组下标所对应的元素
console.log(i) // 索引，数组下标
// 遍历字符串
let str = "abcd"
for(let i in str){
let item = str[i];
console.log(item) // 字符串下标所对应的元素
console.log(i) // 索引 字符串的下标
}// 迭代数组数组
let arr = ['a','b','c'];
for(let item of arr){
console.log(item)
}
// logs 'a'
// logs 'b'
// logs 'c'
// 迭代字符串
let str = "abc";
for (let value of str) {
console.log(value);
}
// logs 'a'
// logs 'b'
// logs 'c'
// 迭代map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]
for (let entry of iterable) {
console.log(entry);
}
// logs ["a", 1]
// logs ["b", 2]
// logs ["c", 3]
// 迭代map获取键值
for (let [key, value] of iterable) {
console.log(key)
console.log(value);
}
// 迭代set
let iterable = new Set([1, 1, 2, 2, 3, 3,4]);
for (let value of iterable) {
console.log(value);
}
// logs 1
// logs 2
// logs 3
// logs 4
// 迭代 DOM 节点
let articleParagraphs = document.querySelectorAll('.article > p');
for (let paragraph of articleParagraphs) {
paragraph.classList.add("paragraph");
// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。
}
// 迭代arguments类数组对象
(function() {
for (let argument of arguments) {
console.log(argument);
}
})(1, 2, 3);
// logs：
// 1
// 2
// 3
// 迭代类型数组
let typeArr = new Uint8Array([0x00, 0xff]);
for (let value of typeArr) {
console.log(value);
}
// logs：
// 0
// 255プログラマーとして、それらを知るだけでは十分ではなく、実際の開発の中でそれらを特定します。デメリット。地域の状況に応じてそれらを使用し、長所を最大限に活用し、短所を回避してください。それにより、プログラムの全体的なパフォーマンスを向上させることが能力の鍵となります。
ループ本体からの飛び出しについて
ループ内で特定の条件が成立した場合にループ本体から飛び出したり、条件を満たさないデータをスキップして他のデータのループを継続します。これはよく遭遇する要件です。一般的に使用されるステートメントは、break と continue です。
復習も兼ねて、この 2 つの違いについて簡単に説明しましょう。
原則: forEach の実装原則を見れば、この問題が理解できるでしょう。
Array.prototype.forEach（callbackfn [，thisArg]{
}渡される関数は、ここではコールバック関数です。 Break はループから抜け出すためにのみ使用でき、コールバック関数はループ本体ではないため、コールバック関数で Break を使用することは明らかに違法です。
コールバック関数内で return を使用すると、上位関数、つまりこの for ループ内に結果が返されるだけで、for ループは終了しないため、return も無効になります。
map() 同じことです。
map() チェーン呼び出し
map() メソッドはチェーン化できるため、他のメソッドと組み合わせて便利に使用できます。例:reduce()、sort()、filter() など。しかし、他の方法ではこれを行うことはできません。 forEach() の戻り値は未定義であるため、チェーン内で呼び出すことはできません。
// 将元素乘以本身，再进行求和。 let arr = [1, 2, 3, 4, 5]; let res1 = arr.map(item => item * item).reduce((total, value) => total + value); console.log(res1) // logs 55 undefined"
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = ['a', 'b', 'c'];
arr.foo = 'hello
for (var i in arr) {
console.log(i);
}
// logs
// 0
// 1
// 2
// foo
// arrCustom
// objCustom
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
var arr = ['a', 'b', 'c'];
arr.foo = 'hello
for (var i in arr) {
if (arr.hasOwnProperty(i)) {
console.log(i);
}
}
// logs
// 0
// 1
// 2
// foo
// 可见数组本身的属性还是无法摆脱。此时建议使用 forEach对于纯对象的遍历，选择for..in枚举更方便；对于数组遍历，如果不需要知道索引for..of迭代更合适，因为还可以中断；如果需要知道索引，则forEach()更合适；对于其他字符串，类数组，类型数组的迭代，for..of更占上风更胜一筹。但是注意低版本浏览器的是配性。
性能
有兴趣的读者可以找一组数据自行测试，文章就直接给出结果了，并做相应的解释。
for > for-of > forEach > map > for-in
for 循环当然是最简单的，因为它没有任何额外的函数调用栈和上下文；
for...of只要具有Iterator接口的数据结构，都可以使用它迭代成员。它直接读取的是键值。
forEach，因为它其实比我们想象得要复杂一些，它实际上是array.forEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；
map() 最慢，因为它的返回值是一个等长的全新的数组，数组创建和赋值产生的性能开销很大。
for...in需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到。且for...in的key是String类型，有转换过程，开销比较大。
总结
在实际开发中我们要结合语义话、可读性和程序性能，去选择究竟使用哪种方案。
如果你需要将数组按照某种规则映射为另一个数组，就应该用 map。
如果你需要进行简单的遍历，用 forEach 或者 for of。
如果你需要对迭代器进行遍历，用 for of。
如果你需要过滤出符合条件的项，用 filterr。
如果你需要先按照规则映射为新数组，再根据条件过滤，那就用一个 map 加一个 filter。
总之，因地制宜，因时而变。千万不要因为过分追求性能，而忽略了语义和可读性。在实际开发中，让他们扬长避短，优势互补，让程序趋近最优才是我们要做的。
推荐教程：《JS教程》
以上がパフォーマンスのために for ループ トラバーサルを選択する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
