オブジェクトを含む配列をループ処理してそれらのプロパティにアクセスする方法
配列に含まれるオブジェクトを順番に見ていき、それぞれのプロパティを変更したいと思います。私がこれをするならば：
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j]);
}
コンソールは配列内のすべてのオブジェクトを起動するはずですよね？しかし実際には最初のオブジェクトしか表示されません。私がコンソールのログをループの外側でログに記録すると、すべてのオブジェクトが表示されるので、間違いなくもっと多くのオブジェクトがそこにあります。
とにかく、これが次の問題です。ループを使用して、配列内のObject1.xなどにアクセスするにはどうすればよいですか。
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j.x]);
}
これは "undefined"を返します。繰り返しますが、ループの外側のコンソールログから、オブジェクトにはすべて "x"の値があることがわかります。ループ内でこれらのプロパティにアクセスする方法
プロパティごとに別々の配列を使用することを他の場所で推奨されていましたが、最初にこの方法を使い果たしたことを確認したいと思います。
ありがとうございました！
ForEachの組み込み配列関数を使用してください。 Array.forEach() ：
yourArray.forEach(function (arrayItem) {
var x = arrayItem.prop1 + 2;
console.log(x);
});
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.find（）メソッドは、提供されたテスト関数を満たす配列の最初の要素の値を返します。
参考文献
ESM6と呼ばれるECMAScript 2015では、オブジェクトの配列をループ処理するために for..ofループ を使用できます。
for (let item of items) {
console.log(item); // Will display contents of the object inside the array
}
この回答を投稿した時点では、Internet Explorerのサポートはまったく存在しませんが、TraceurやBabelのようなtranspilerを使うことで、どのブラウザが何をサポートしているのかを気にせずにこのような新しいJavascript機能を使用できます。
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
これがどうやってできるかの例です:)
var students = [{
name: "Mike",
track: "track-a",
achievements: 23,
points: 400,
},
{
name: "james",
track: "track-a",
achievements: 2,
points: 21,
},
]
students.forEach(myFunction);
function myFunction(item, index) {
for (var key in item) {
console.log(item[key])
}
}myArray[j.x]は論理的に正しくありません。
代わりに(myArray[j].x);を使用してください
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
一連のオブジェクトをループすることは、かなり基本的な機能です。これは私のために働くものです。
var person = [];
person[0] = {
firstName: "John",
lastName: "Doe",
age: 60
};
var i, item;
for (i = 0; i < person.length; i++) {
for (item in person[i]) {
document.write(item + ": " + person[i][item] + "<br>");
}
}ES5以降、forEachメソッドを使うのはとても簡単です。配列内の各オブジェクトの各プロパティを直接変更できます。
myArray.forEach(function (arrayElem){
arrayElem = newPropertyValue;
});
各オブジェクトの特定のプロパティにアクセスしたい場合は、次のようにします。
myArray.forEach(function (arrayElem){
arrayElem.nameOfYourProperty = newPropertyValue;
});
これはうまくいくでしょう。徹底的な配列（yourArray）をループしています。その後、各オブジェクト（eachObj）の直接プロパティをループします。
yourArray.forEach( function (eachObj){
for (var key in eachObj) {
if (eachObj.hasOwnProperty(key)){
console.log(key,eachObj[key]);
}
}
});
これはオブジェクトの配列を反復処理するもう1つの方法です（これらのためには、ドキュメントにjQueryライブラリを含める必要があります）。
$.each(array, function(element) {
// do some operations with each element...
});
JQueryを使用した配列オブジェクトの繰り返し（文字列を印刷するには2番目のパラメーターを使用します）。
$.each(array, function(index, item) {
console.log(index, item);
});
受け入れられた答えは通常の機能を使用します。そのため、forEachでarrow関数を使用して同じコードを少し修正して投稿してください。
yourArray.forEach(arrayItem => {
var x = arrayItem.prop1 + 2;
console.log(x);
});
また$ .eachでは、以下のように矢印機能を使うことができます。
$.each(array, (item, index) => {
console.log(index, item);
});
var c = {
myProperty: [
{ name: 'this' },
{ name: 'can' },
{ name: 'get' },
{ name: 'crazy' }
]
};
c.myProperty.forEach(function(myProperty_element) {
var x = myProperty_element.name;
console.log('the name of the member is : ' + x);
})これは私がそれを達成することができた方法の一つです。
const jobs = [
{
name: "sipher",
family: "sipherplus",
job: "Devops"
},
{
name: "john",
family: "Doe",
job: "Devops"
},
{
name: "jim",
family: "smith",
job: "Devops"
}
];
const txt =
` <ul>
${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
</ul>`
;
document.body.innerHTML = txt;後ろのティックに気を付けて（ `）