개체를 포함하는 어레이를 루프하여 해당 속성에 액세스하는 방법
배열에 포함된 개체를 순환하여 각 개체의 속성을 변경합니다.이렇게 하면:
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]);
}
그러면 "정의되지 않음"이 반환됩니다.루프 외부에 있는 콘솔로그에는 모든 객체에 "x" 값이 있음을 알 수 있습니다.루프 내의 이러한 속성에 액세스하려면 어떻게 해야 합니까?
다른 곳에서 각 속성별로 개별 어레이를 사용하도록 권장받았는데, 먼저 이 방법을 모두 사용했는지 확인하고 싶습니다.
감사해요!
각각에 사용 어레이 기능이 내장되어 있습니다.다음과 같습니다Array.forEach().
yourArray.forEach(function (arrayItem) {
var x = arrayItem.prop1 + 2;
console.log(x);
});
자바스크립트에서는 기능적인 프로그래밍 방식으로 어레이를 루프하는 경우가 있습니다.
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.protype.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.protype.find() 메서드는 제공된 테스트 함수를 충족하는 배열의 첫 번째 요소 값을 반환합니다.
레퍼런스
- Array.protype.some()
- Array.protype.각()에 대해서
- Array.protype.map()
- Array.protype.필터()
- Array.protype.sort()
- 구문 확산
- Array.protype.find()
를 사용할 수 있습니다.루프가 오브젝트 배열에 루프합니다.
for (let item of items) {
console.log(item); // Will display contents of the object inside the array
}
★★★★★★★★★★★★의 중 for..of루프는 어레이뿐만 아니라 여러 번 반복할 수 있습니다.지도 및 객체를 포함하여 모든 유형의 반복 가능에 대해 반복할 수 있습니다.오래된 브라우저를 지원해야 할 경우 TypeScript와 같은 트랜스필러를 사용해야 합니다.
맵에서 반복할 경우 키와 값을 모두 처리하는 것을 제외하고 구문은 위와 거의 동일합니다.
for (const [key, value] of items) {
console.log(value);
}
용 i i i i를 쓴다.for..of자바스크립트게다가 비동기/대기에도 대응하고 있는 것이, 가장 멋진 점 중 하나입니다.
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])
}
}오브젝트 배열을 반복하는 것은 매우 기본적인 기능입니다.이게 나한테 효과가 있는 거야.
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>");
}
}myArray[j.x]는 논리적으로 올바르지 않습니다.
(myArray[j].x); 대신에
for (var j = 0; j < myArray.length; j++){
console.log(myArray[j].x);
}
ES5+ 이후의 ForEach 메서드를 사용하면 매우 간단합니다.어레이에 포함된 각 개체의 각 속성을 직접 변경할 수 있습니다.
myArray.forEach(function (arrayElem){
arrayElem = newPropertyValue;
});
각 개체의 특정 속성에 액세스하는 경우:
myArray.forEach(function (arrayElem){
arrayElem.nameOfYourProperty = newPropertyValue;
});
이거면 될 것 같아.완전 어레이(your Array)를 루프하고 있습니다.다음으로 각 오브젝트(eachObj)의 직접 속성을 루프합니다.
yourArray.forEach( function (eachObj){
for (var key in eachObj) {
if (eachObj.hasOwnProperty(key)){
console.log(key,eachObj[key]);
}
}
});
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;뒷면 눈금(')에 주의하십시오.
오브젝트 배열을 통해 반복하는 또 다른 방법이 있습니다(이러한 오브젝트 배열을 위해서는 jQuery 라이브러리를 문서에 포함해야 합니다.
$.each(array, function(element) {
// do some operations with each element...
});
승인된 답변은 일반 기능을 사용합니다.따라서 화살표 기능을 사용하여 동일한 코드를 약간 수정하여 게시합니다.
yourArray.forEach(arrayItem => {
var x = arrayItem.prop1 + 2;
console.log(x);
});
또한 아래와 같은 화살표 기능을 사용할 수 있습니다.
$.each(array, (item, index) => {
console.log(index, item);
});
this.data = [{name:"Rajiv", city:"Deoria"},{name:"Babbi", city:"Salempr"},{name:"Brijesh", city:"GKP"}];
for(const n of this.data) {
console.log(n.name)
}
jQuery를 사용하여 배열 개체를 반복합니다(두 번째 매개 변수를 사용하여 문자열을 인쇄합니다).
$.each(array, function(index, item) {
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);
})이것이 내가 그것을 성취할 수 있었던 방법 중 하나이다.
이게 도움이 될지도 몰라노드의 버그일 수도 있습니다.
var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;
이것은 동작하지 않습니다.
while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined
하지만 이건...
while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.
이것도...
while ((arr[c]) && (arr[c].name)) { c++; }
그러나 단순히 순서를 뒤집는 것은 효과가 없다.내부 최적화로 인해 노드가 파손된 것 같습니다.
while ((arr[c].name) && (arr[c])) { c++; }
어레이가 정의되어 있지 않다고 하는 에러가 표시되지만, 다음과 같이 정의되어 있지 않다:- / Node v11.15.0
오랜 시간이 흘렀지만, 이 문제를 겪고 있는 다른 사용자에게는 하나의 어레이만 포함된 어레이를 루프하고 있었다는 것이 문제입니다.다음과 같이 합니다.
// array snippet (returned from here)
} else {
callback([results])
}
그리고 저는 이렇게 어레이를 사용하고 있었습니다.
for(const result of results){
console.log(result.x)
}
보시다시피 반복하고 싶은 어레이는 실제로는 다른 어레이 안에 있었습니다.각 괄호를 분리하면 도움이 됩니다.노드 JS 및 MySQL.
루프와 디컨스트럭션을 동시에 할당하고 싶기 때문에 다음과 같이 코드화합니다.config.map(({ text, callback })=>add_btn({ text, callback }))
언급URL : https://stackoverflow.com/questions/16626735/how-to-loop-through-an-array-containing-objects-and-access-their-properties
'programing' 카테고리의 다른 글
| SQL 표의 두 기간을 비교하여 판매 결과를 얻습니다. (0) | 2023.01.30 |
|---|---|
| '메모리 스톰프'란? (0) | 2023.01.30 |
| Java에서 목록을 "인스턴스화"하고 있습니까? (0) | 2023.01.20 |
| MariaDB 문자 인코딩 (0) | 2023.01.20 |
| 쿼리 조건이 JPA 및 스프링을 충족하는 경우 행 삽입 (0) | 2023.01.20 |