在Java中,可以使用for循环遍历数组中的对象,如下所示:
String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray) {
// Do something
}
我可以在JavaScript中做同样的事情吗?
在Java中,可以使用for循环遍历数组中的对象,如下所示:
String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray) {
// Do something
}
我可以在JavaScript中做同样的事情吗?
当前回答
似乎列出了所有变体,除了lodash的Each:
_.forEach([1, 2], (value) => {
console.log(value);
});
其他回答
阵列循环:
for(var i = 0; i < things.length; i++){
var thing = things[i];
console.log(thing);
}
对象循环:
for(var prop in obj){
var propValue = obj[prop];
console.log(propValue);
}
三个主要选项:
对于(var i=0;i<xs.length;i++){console.log(xs[i]);}xs.forEach((x,i)=>console.log(x));for(xs的常量x){console.log(x);}
下面是详细的示例。
1.循环顺序:
var myStringArray=[“Hello”,“World”];var arrayLength=myStringArray.length;for(var i=0;i<arrayLength;i++){console.log(myStringArray[i]);//做点什么}
Pros
适用于各种环境可以使用break和continue流控制语句
Cons
过于冗长迫切的容易出现一个错误(有时也称为围栏柱错误)
2.阵列.原型.每个:
ES5规范引入了许多有益的数组方法。其中一个是Array.prototype.forEach,它为我们提供了一种简单的方法来遍历数组:
常量数组=[“一”,“二”,“三”]array.forEach(函数(项,索引){console.log(项,索引);});
在撰写ES5规范发布之时(2009年12月)已近十年,它已被桌面、服务器和移动环境中的几乎所有现代引擎实现,因此使用它们是安全的。
使用ES6箭头函数语法,它更加简洁:
array.forEach(item => console.log(item));
箭头功能也被广泛实现,除非您计划支持古老的平台(例如Internet Explorer 11);你去也很安全。
Pros
非常简短和简洁。声明的
Cons
无法使用中断/继续
通常,您可以通过在迭代数组元素之前过滤数组元素来代替中断命令循环的需要,例如:
array.filter(item => item.condition < 10)
.forEach(item => console.log(item))
请记住,如果您正在迭代一个数组以从中构建另一个数组,则应该使用map。我见过很多次这种反模式。
反模式:
const numbers = [1,2,3,4,5], doubled = [];
numbers.forEach((n, i) => { doubled[i] = n * 2 });
地图的正确使用情况:
常量=[1,2,3,4,5];常量doubled=numbers.map(n=>n*2);console.log(加倍);
此外,如果您试图将数组缩减为一个值,例如,您希望对一个数字数组求和,则应使用reduce方法。
反模式:
const numbers = [1,2,3,4,5];
const sum = 0;
numbers.forEach(num => { sum += num });
正确使用reduce:
常量=[1,2,3,4,5];常量sum=数字。减少((total,n)=>total+n,0);console.log(总和);
3.声明的ES6:
ES6标准引入了可迭代对象的概念,并定义了用于遍历数据的新构造,即for。。。声明。
此语句适用于任何类型的可迭代对象,也适用于生成器(任何具有\[Symbol.iiterator\]属性的对象)。
根据定义,数组对象是ES6中内置的可迭代对象,因此可以对它们使用以下语句:
let colors = ['red', 'green', 'blue'];
for (const color of colors){
console.log(color);
}
Pros
它可以遍历大量对象。可以使用正常的流量控制语句(中断/继续)。用于迭代串行异步值。
Cons
如果您的目标是较旧的浏览器,则转译的输出可能会让您大吃一惊。
不用于。。。在里面
@zipcodeman建议使用for。。。在语句中,但对于迭代数组,应该避免for-in,该语句旨在枚举对象财产。
它不应用于类似数组的对象,因为:
迭代的顺序没有保证;数组索引不能按数字顺序访问。还枚举了继承的财产。
第二点是它会给您带来很多问题,例如,如果您扩展Array.prototype对象以在其中包含一个方法,那么该属性也会被枚举。
例如:
Array.prototype.foo=“foo!”;var数组=[‘a’,‘b’,‘c’];for(数组中的变量i){console.log(array[i]);}
上面的代码将控制台日志“a”、“b”、“c”和“foo!”。
如果您使用一些严重依赖原生原型扩充的库(如MooTools),这可能是一个特别的问题。
如前所述,for-in语句用于枚举对象财产,例如:
变量obj={“a”:1,“b”:2,“c”:3};for(obj中的var属性){if(obj.hasOwnProperty(prop)){//或如果(Object.protype.hasOwnProperty.call(obj,prop))安全。。。console.log(“prop:”+prop+“value:”+obj[prop])}}
在上面的示例中,hasOwnProperty方法允许您仅枚举自己的财产。就是这样,只有对象物理上具有的财产,没有继承的财产。
我建议您阅读以下文章:
枚举VS迭代
for(myStringArray的常量){
(直接回答你的问题:现在你可以了!)
大多数其他答案都是正确的,但他们没有提到(截至本文撰写之时)ECMAScript 6 2015正在为执行迭代带来一种新的机制。。循环的。
这种新语法是在JavaScript中迭代数组的最优雅的方式(只要不需要迭代索引)。
它目前可与Firefox 13+、Chrome 37+一起使用,并且不能与其他浏览器一起使用(请参阅下面的浏览器兼容性)。幸运的是,我们有JavaScript编译器(如Babel),允许我们今天使用下一代功能。
它也适用于Node.js(我在0.12.0版本上测试过它)。
迭代数组
// You could also use "let" or "const" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) {
console.log(letter);
}
迭代对象数组
const band = [
{firstName : 'John', lastName: 'Lennon'},
{firstName : 'Paul', lastName: 'McCartney'}
];
for(const member of band){
console.log(member.firstName + ' ' + member.lastName);
}
循环发电机:
(示例摘自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
function* fibonacci() { // A generator function
let [prev, curr] = [1, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (const n of fibonacci()) {
console.log(n);
// Truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
兼容性表:http://kangax.github.io/compat-table/es6/#test-用于。。第页,共页
规范:http://wiki.ecmascript.org/doku.php?id=harmony:iterators
}
JavaScript中的数组遍历作弊表
给定一个数组,可以通过以下多种方式之一遍历它。
1.经典for loop
const myArray=['Hello','World'];for(设i=0;i<myArray.length;i++){console.log(myArray[i]);}
2.用于。。。属于
const myArray=['Hello','World'];for(myArray的常量项){console.log(项);}
3.Array.prototype.forEach()
const myArray=['Hello','World'];myArray.forEach(项=>{console.log(项);});
4.while循环
const myArray=['Hello','World'];设i=0;while(i<myArray.length){console.log(myArray[i]);i++;}
5.do…while循环
const myArray=['Hello','World'];设i=0;做{console.log(myArray[i]);i++;}而(i<myArray.length);
6.队列样式
const myArray=['Hello','World'];while(myArray.length){console.log(myArray.shift());}
7.堆栈样式
注:该列表在本页中以相反的方式打印。const myArray=['Hello','World'];while(myArray.length){console.log(myArray.pop());}
var array=['hai','hello','how','are','you']$(文档).ready(函数(){$('#clickButton').click(函数(){对于(var i=0;i<array.length;i++){警报(阵列[i])}})})<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js“></script><input id=“clickButton”value=“click Me”type=“button”/><div id=“show”></div>