在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中做同样的事情吗?
当前回答
var myStringArray = ["hello", "World"];
myStringArray.forEach(function(val, index){
console.log(val, index);
})
其他回答
三个主要选项:
对于(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 (var key in myStringArray) {
console.log(myStringArray[key]);
}
//Make array
var array = ["1","2","3","4","5","6","7","8","9","10"]
//Loop
for(var i = 0; i < array.length; i++){
console.log((i+1) + " --> " + array[i])
}
对于i的实际值,如果需要,需要将(i+1)更改为i或(i)。希望这有所帮助。
在JavaScript中以函数编程方式循环数组的一些用例:
1.只需循环遍历数组
const myArray = [{x:100}, {x:200}, {x:300}];
myArray.forEach((element, index, array) => {
console.log(element.x); // 100, 200, 300
console.log(index); // 0, 1, 2
console.log(array); // same myArray object 3 times
});
注意:严格来说,Array.prototype.forEach()不是一种函数方式,因为它作为输入参数的函数不应该返回值,因此不能将其视为纯函数。
2.检查数组中的任何元素是否通过测试
const people = [
{name: 'John', age: 23},
{name: 'Andrew', age: 3},
{name: 'Peter', age: 8},
{name: 'Hanna', age: 14},
{name: 'Adam', age: 37}];
const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true
3.转换为新阵列
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]
注意:map()方法使用对调用数组中的每个元素调用所提供函数的结果创建一个新数组。
4.总结某一特定属性,并计算其平均值
const myArray = [{x:100}, {x:200}, {x:300}];
const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300
const average = sum / myArray.length;
console.log(average); // 200
5.基于原始数组创建新数组,但不进行修改
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray= myArray.map(element => {
return {
...element,
x: element.x * 2
};
});
console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]
6.统计每个类别的数量
const people = [
{name: 'John', group: 'A'},
{name: 'Andrew', group: 'C'},
{name: 'Peter', group: 'A'},
{name: 'James', group: 'B'},
{name: 'Hanna', group: 'A'},
{name: 'Adam', group: 'B'}];
const groupInfo = people.reduce((groups, person) => {
const {A = 0, B = 0, C = 0} = groups;
if (person.group === 'A') {
return {...groups, A: A + 1};
} else if (person.group === 'B') {
return {...groups, B: B + 1};
} else {
return {...groups, C: C + 1};
}
}, {});
console.log(groupInfo); // {A: 3, C: 1, B: 2}
7.基于特定条件检索数组的子集
const myArray = [{x:100}, {x:200}, {x:300}];
const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]
注意:filter()方法创建一个新数组,其中包含通过所提供函数实现的测试的所有元素。
8.对数组进行排序
const people = [
{ name: "John", age: 21 },
{ name: "Peter", age: 31 },
{ name: "Andrew", age: 29 },
{ name: "Thomas", age: 25 }
];
let sortByAge = people.sort(function (p1, p2) {
return p1.age - p2.age;
});
console.log(sortByAge);
9.在数组中查找元素
const people = [ {name: "john", age:23},
{name: "john", age:43},
{name: "jim", age:101},
{name: "bob", age:67} ];
const john = people.find(person => person.name === 'john');
console.log(john);
方法返回数组中满足所提供测试函数的第一个元素的值。
工具书类
Array.prototype.some()Array.prototype.forEach()Array.prototype.map()Array.prototype.filter()Array.prototype.sort()Spread语法Array.prototype.find()
介绍
从大学时代开始,我就用Java、JavaScript、Pascal、ABAP、PHP、Progress 4GL、C/C++以及其他一些我现在想不出来的语言编程。
虽然它们都有自己的语言特点,但每种语言都有许多相同的基本概念。这些概念包括过程/函数、IF语句、FOR循环和WHILE循环。
传统的for循环
传统的for循环有三个组成部分:
初始化:在第一次执行look块之前执行条件:每次执行循环块之前检查一个条件,如果为false,则退出循环事后思考:每次执行循环块后执行
这三个组件通过一个;象征这三个组件中每一个的内容都是可选的,这意味着以下内容是可能的最小循环:
for (;;) {
// Do stuff
}
当然,您需要在for循环中的某处包含if(条件==true){break;}或if(条件===true){return;},以使其停止运行。
不过,通常情况下,初始化用于声明索引,条件用于将该索引与最小值或最大值进行比较,而事后考虑用于增加索引:
for (var i = 0, length = 10; i < length; i++) {
console.log(i);
}
使用传统的for循环遍历数组
循环遍历数组的传统方法是:
for (var i = 0, length = myArray.length; i < length; i++) {
console.log(myArray[i]);
}
或者,如果您喜欢向后循环,请执行以下操作:
for (var i = myArray.length - 1; i > -1; i--) {
console.log(myArray[i]);
}
然而,也有许多可能的变化,例如:
for (var key = 0, value = myArray[key], length = myArray.length; key < length; value = myArray[++key]) {
console.log(value);
}
…或者这个。。。
var i = 0, length = myArray.length;
for (; i < length;) {
console.log(myArray[i]);
i++;
}
…或这个:
var key = 0, value;
for (; value = myArray[key++];){
console.log(value);
}
无论哪种方法最有效,很大程度上都取决于个人品味和您正在实现的具体用例。
请注意,所有浏览器都支持这些变体,包括非常旧的浏览器!
while循环
for循环的一种替代方法是while循环。要循环遍历数组,可以执行以下操作:
var key = 0;
while(value = myArray[key++]){
console.log(value);
}
与传统的for循环一样,即使是最古老的浏览器也支持循环。
此外,请注意,everywhile循环可以重写为for循环。例如,上面的while循环的行为与For循环完全相同:
for(var key = 0; value = myArray[key++];){
console.log(value);
}
对于为。。。属于
在JavaScript中,您也可以这样做:
for (i in myArray) {
console.log(myArray[i]);
}
然而,这应该谨慎使用,因为它在所有情况下的行为都与传统的for循环不同,并且需要考虑潜在的副作用。请参见为什么对数组迭代使用“for…in”是一个坏主意?了解更多详情。
作为…的替代方案。。。在,现在还有。。。属于以下示例显示了for。。。的循环和for。。。循环中:
var myArray = [3, 5, 7];
myArray.foo = "hello";
for (var i in myArray) {
console.log(i); // logs 0, 1, 2, "foo"
}
for (var i of myArray) {
console.log(i); // logs 3, 5, 7
}
此外,您需要考虑没有版本的Internet Explorer支持。。。(边缘12+有)和。。。中至少需要Internet Explorer 10。
Array.prototype.forEach()
for循环的另一种选择是Array.prototype.forEach(),它使用以下语法:
myArray.forEach(function(value, key, myArray) {
console.log(value);
});
所有现代浏览器以及Internet Explorer 9和更高版本都支持Array.prototype.forEach()。
图书馆
最后,许多实用程序库也有自己的foreach变体。AFAIK,最受欢迎的三个是:
jQuery.each(),在jQuery中:
$.each(myArray, function(key, value) {
console.log(value);
});
_.each(),在Undercore.js中:
_.each(myArray, function(value, key, myArray) {
console.log(value);
});
_.forEach(),在Lodash中:
_.forEach(myArray, function(value, key) {
console.log(value);
});