Jak przeglądać tablicę zawierającą obiekty i uzyskiwać dostęp do ich właściwości

Question 1

Chcę przeglądać obiekty zawarte w tablicy i zmieniać właściwości każdego z nich. Jeśli to zrobię:

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

Konsola powinna wywołać każdy obiekt w tablicy, prawda? Ale w rzeczywistości wyświetla tylko pierwszy obiekt. jeśli konsolę zaloguję tablicę poza pętlą, wszystkie obiekty pojawią się, więc jest tam zdecydowanie więcej.

Tak czy inaczej, oto następny problem. Jak uzyskać dostęp do na przykład Object1.x w tablicy przy użyciu pętli?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

Zwraca wartość „undefined”. Znowu dziennik konsoli poza pętlą mówi mi, że wszystkie obiekty mają wartości „x”. Jak uzyskać dostęp do tych właściwości w pętli?

W innym miejscu zalecono mi użycie oddzielnych tablic dla każdej właściwości, ale chcę się upewnić, że najpierw wyczerpałem tę ścieżkę.

Dziękuję Ci!

Question 2

Użyj forEach jego wbudowanej funkcji tablicowej. Array.forEach():

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});

Question 3

Niektóre przypadki użycia pętli przez tablicę w sposób programowania funkcjonalnego w JavaScript:

1. Po prostu przejrzyj tablicę

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
});

Uwaga: Array.prototype.forEach () nie jest ściśle funkcjonalnym sposobem, ponieważ funkcja, którą przyjmuje jako parametr wejściowy, nie ma zwracać wartości, której w związku z tym nie można uznać za czystą funkcję.

2. Sprawdź, czy którykolwiek z elementów tablicy przechodzi test

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. Przekształć w nową tablicę

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

Uwaga: Metoda map () tworzy nową tablicę z wynikami wywołania podanej funkcji dla każdego elementu w tablicy wywołującej.

4. Zsumuj określoną właściwość i oblicz jej średnią

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. Utwórz nową tablicę na podstawie oryginału, ale bez modyfikowania jej

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. Policz liczbę w każdej kategorii

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. Pobierz podzbiór tablicy na podstawie określonych kryteriów

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]

Uwaga: Metoda filter () tworzy nową tablicę ze wszystkimi elementami, które przejdą test implementowany przez podaną funkcję.

8. Sortuj tablicę

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. Znajdź element w tablicy

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);

Metoda Array.prototype.find () zwraca wartość pierwszego elementu tablicy, który spełnia podaną funkcję testującą.

Bibliografia

Question 4

Możesz użyć pętli for..of, aby zapętlić tablicę obiektów.

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

Jedną z najlepszych rzeczy w for..ofpętlach jest to, że mogą iterować nie tylko po tablicach. Możesz iterować po każdym typie iterowalnym, w tym mapach i obiektach. Upewnij się, że używasz transpilera lub czegoś takiego jak TypeScript, jeśli potrzebujesz obsługi starszych przeglądarek.

Jeśli chcesz iterować po mapie, składnia jest w dużej mierze taka sama, jak powyżej, z wyjątkiem tego, że obsługuje zarówno klucz, jak i wartość.

for (const [key, value] of items) {
  console.log(value);
}

Używam for..ofpętli do prawie każdego rodzaju iteracji, które wykonuję w Javascript. Co więcej, jedną z najfajniejszych rzeczy jest to, że działają również z async / await.

Question 5

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

Question 6

Oto przykład, jak możesz to zrobić :)

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])
  }
}

Rozwiń fragment

Question 7

Pętle przez tablicę obiektów to dość podstawowa funkcja. To właśnie działa dla mnie.

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>");
  }
}

Rozwiń fragment

Question 8

myArray[j.x] jest logicznie niepoprawne.

Użyj (myArray[j].x);zamiast tego

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

Question 9

Metoda forEach od wersji ES5 + jest naprawdę prosta. Możesz bezpośrednio zmienić każdą właściwość każdego obiektu w swojej tablicy.

myArray.forEach(function (arrayElem){ 
  arrayElem = newPropertyValue;
});

Jeśli chcesz uzyskać dostęp do określonej właściwości każdego obiektu:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });

Question 10

To by zadziałało. Zapętlenie dokładnej tablicy (yourArray). Następnie przejrzyj bezpośrednie właściwości każdego obiektu (eachObj).

yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

Question 11

Oto inny sposób na iterację przez tablicę obiektów (w tym celu musisz dołączyć bibliotekę jQuery do swojego dokumentu).

$.each(array, function(element) {
  // do some operations with each element... 
});

Question 12

Iteracja obiektu tablicy przy użyciu jQuery (użyj drugiego parametru, aby wydrukować ciąg).

$.each(array, function(index, item) {
       console.log(index, item);
});

Question 13

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);
})

Rozwiń fragment

To jeden ze sposobów, w jaki udało mi się to osiągnąć.

Question 14

Zaakceptowana odpowiedź wykorzystuje normalną funkcję. Publikowanie tego samego kodu z niewielkimi modyfikacjami za pomocą funkcji strzałek na forEach

  yourArray.forEach(arrayItem => {
      var x = arrayItem.prop1 + 2;
      console.log(x);
  });

Również w $ .each możesz użyć funkcji strzałek jak poniżej

 $.each(array, (item, index) => {
       console.log(index, item);
 });

Question 15

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;

Rozwiń fragment

Uważaj na tylne kleszcze (`)

Question 16

To może komuś pomóc. Może to błąd w Node.

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

To nie działa:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

Ale to działa ...

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

To też działa ...

while ((arr[c]) && (arr[c].name)) { c++; }

ALE zwykłe odwrócenie kolejności nie działa. Domyślam się, że jest tu jakaś wewnętrzna optymalizacja, która psuje Node.

while ((arr[c].name) && (arr[c])) { c++; }

Błąd mówi, że tablica jest niezdefiniowana, ale tak nie jest: - / Node v11.15.0