4 种在JavaScript中编写For循环的方法
共 2296字,需浏览 5分钟
·
2021-08-01 09:13
var a = [1,2,3,4]
for (var i=0; i<a.length; i++){
console.log(a[i])
}
不用说,这是一种经典的 C 风格方式。 如果我们愿意,我们可以一直使用这种时尚。 但它在现代 JavaScript 项目中不像以前那么流行,因为我们现在有更方便的方法。
2、“for…in…”循环
为了使对象的迭代更容易,有一个“for...in...”语法,它也可以从 ES3 获得。
var author = {name: "Yang", job: "programmer"}
for (var k in author){
console.log(k + ':' + author[k]);
}
//name:Yang
//job:programmer
使用这种方式的最佳实践是永远不要将它用于数组。 由于数组也是幕后的对象,每一项的索引都被视为对象的属性,索引顺序是依赖于实现的,数组值可能不会按照你期望的顺序访问。
应用“for...in... ”到数组可能会导致一些意想不到的结果。
以下是问题“为什么使用“for...in”进行数组迭代是个坏主意?”(地址:https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea)的一个很好的例子。 在 StackOverflow 上。
// Somewhere deep in your JavaScript library...
Array.prototype.foo = 1;
// Now you have no idea what the below code will do.
var a = [1, 2, 3, 4, 5];
for (var x in a){
// Now foo is a part of EVERY array and
// will show up here as a value of 'x'.
console.log(x);
}
/* Will display:
0
1
2
3
4
foo
*/
因此,为了使你的代码没有错误,永远不要将“for...in...”应用于数组。
3、 数组上的“forEach”方法
由于“for...in...”不适用于数组。 应该有更好的迭代 JavaScript 数组的方法。 所以 ES5 引入了数组的迭代方法。 在我看来,这种改进使 JavaScript 变得优雅。
迭代方法很多,适用于不同的使用场景:
Array.forEach()
Array.map()
Array.filter()
Array.reduce()
Array.every()
Array.some()
…
由于这篇文章是在讨论 for 循环,我们通过一个简单的例子来看看如何使用 Array.forEach() 方法:
var author = [ 'Y', 'a', 'n', 'g' ];
author.forEach(function(val){
console.log(val);
});
// Y
// a
// n
// g
4、ES6 中的“for...of...”语法
众所周知,ES6 是 JavaScript 的里程碑。 这个版本引入了许多很棒的功能。 “for...of...”方法就是其中之一。 它使事情变得更加优雅。
例如,我们可以像下面这样迭代数组的项:
let author = [ 'Y', 'a', 'n', 'g' ];
for (let char of author){
console.log(char);
}
// Y
// a
// n
// g
结论
JavaScript 作为一种编程语言,不是静态的,而是不断发展的。 for 循环语法的扩展是展示它的一个很好的例子。
谢谢你的阅读。 如果你喜欢,别忘了关注我,获取更多关于编程和技术的精彩文章!
学习更多技能
请点击下方公众号