JavaScript for…in tsükkel: täielik juhend objektide ja massiivide töötlemiseks

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Sissejuhatus｜Milliseid probleeme lahendab for…in tsükkel?

Artikli eesmärk

• JavaScripti for…in tsükli põhistruktuur ja kasutamine
• Mida arvestada massiivide puhul
• Erinevused teiste tsüklitega (for…of ja forEach)
• Levinud vead ja nende lahendused

Mida õpid sellest artiklist

• Kuidas tõhusalt töödelda objektide omadusi ja massiivide elemente
• For…in tsükli kitsaskohad ja turvaline kasutamine
• Praktilised koodinäited ja jõudluse võrdlus

2. Mis on JavaScripti for…in tsükkel?【Põhiselgitus】

Põhistruktuur

for (muutuja in objekt) {
  // korduv töötlus
}

• muutuja: sisaldab hetkel töödeldava omaduse nime (võtit).
• objekt: objekt, mille omadusi soovid läbi käia.

Näide: objekti omaduste loetlemine

const person = {
  name: "太郎",
  age: 25,
  city: "東京"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

name: 太郎
age: 25
city: 東京

Märkus: omaduste järjekord

Olulised omadused

1. Lihtne juurdepääs võtmetele: kasulik omaduste nimede dünaamiliseks saamiseks.
2. Ainult loendatavad omadused: mitte-loendatavad omadused (enumerable: false) ei kuulu tsüklisse.
3. Pärandatud prototüübi omadused loetletakse samuti: seda teemat käsitleme järgmisena.

3. Massiivid ja for…in tsükkel｜Olulised tähelepanekud

Põhikäitumine massiivide puhul

const fruits = ["りんご", "バナナ", "みかん"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

0 りんご  
1 バナナ  
2 みかん  

Tähelepanek 1: prototüübi omadused võivad samuti loetleda

Array.prototype.newMethod = function () {
  return "新しいメソッド";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

0 りんご  
1 バナナ  
2 みかん  
newMethod undefined

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

Tähelepanek 2: järjekorda ei garanteerita

const data = [];
data[10] = "リンゴ";
data[1] = "バナナ";
data[5] = "みかん";

for (const index in data) {
  console.log(index, data[index]);
}

1 バナナ  
5 みかん  
10 リンゴ

Tähelepanek 3: indeksid käsitletakse stringidena, mitte arvudena

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

Kokkuvõte

• For…in tsükkel sobib pigem objektide kui massiivide töötlemiseks.
• Kui vajad kindlat järjekorda või numbrilisi indekseid, kasuta for…of tsüklit või tavalist for-tsüklit.

4. For…in vs For…of tsükkel【Võrdlustabel】

Põhistruktuuri võrdlus

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // võti
}

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // väärtus
}

Võrdlustabel

Praktiline näide｜massivi töötlemise erinevused

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // väljund: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // väljund: 'a', 'b', 'c'
}

Kokkuvõte

• For…in tsükkel: sobib objektide võtmete töötlemiseks.
• For…of tsükkel: sobib massiivide ja itereeritavate objektide väärtuste töötlemiseks.

5. Praktiline osa：for…in tsükli kasutusnäited ja parimad tavad

1. Näide 1｜Objekti omaduste filtreerimine

const user = {
  name: "田中",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

{ name: '田中', age: 30, email: 'tanaka@example.com' }

2. Näide 2｜Pesastatud objektide töötlemine

const data = {
  user: {
    name: "佐藤",
    info: {
      age: 28,
      city: "大阪"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

name: 佐藤
age: 28
city: 大阪

3. Parim tava｜Prototüübi omaduste välistamine

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

a: 1
b: 2

Kokkuvõte

• Näitasime, kuidas for…in tsüklit kasutada objektide filtreerimiseks ja pesastatud struktuuride töötlemiseks.
• Prototüübi omaduste vältimiseks kasuta hasOwnProperty().

6. Levinud vead ja lahendused for…in tsükliga【Algajatele kohustuslik】

1. Viga 1｜Prototüübi omadused loetletakse

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

a 1
b 2
c 3

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Viga 2｜Massiivide puhul kasutamine

const arr = [10, 20, 30];
Array.prototype.extra = "追加データ";

for (const index in arr) {
  console.log(index, arr[index]);
}

0 10
1 20
2 30
extra undefined

for (const value of arr) {
  console.log(value);
}

3. Viga 3｜Määramata väärtuste töötlemine

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

for (const key in obj) {
  const value = obj[key] ?? "Vaikeväärtus";
  console.log(key, value);
}

Kokkuvõte

• Prototüübi omaduste vältimiseks: kasuta hasOwnProperty().
• Massiivide töötlemiseks: soovitatav on for…of või forEach.
• Määramata väärtuste vältimiseks: kasuta vaikeväärtusi (nt nullish-coalescing).

7. For…in tsükli jõudluse testimine ja alternatiivid

1. Jõudluse võrdlus

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. Näide võrdlustulemustest

for...in: 0.015ms
Object.keys: 0.005ms

3. Soovitatud meetodid

• Objektide töötlemiseks: eelistatud on Object.keys().
• Massiivide töötlemiseks: for…of või forEach on kiirem ja turvalisem.

Kokkuvõte

• For…in tsükkel on mugav, kuid jõudluse ja turvalisuse tagamiseks tuleks valida sobiv alternatiiv vastavalt kasutusjuhtumile.

8. Kokkuvõte｜For…in tsükli mõistmine ja järgmised sammud

1. Artikli põhijäreldused

1. For…in tsükli süntaks ja eesmärk:

• Kasutatakse objektide omaduste (võtmete) korduvaks läbimiseks.
• Optimeeritud pigem objektidele kui massiividele.

1. Kasutamine massiividega:

• Järjekord ei ole garanteeritud ja pärandatud omadused võivad loenduda.
• Massiivide puhul on soovitatav kasutada for…of või forEach().

1. For…in vs For…of:

• For…in: loendab võtmeid.
• For…of: töötleb väärtusi otse.

1. Kasutusnäited ja parimad tavad:

• Pesastatud objektide rekursiivne läbimine.
• hasOwnProperty() abil prototüübi omaduste välistamine.
• Object.keys() või Object.entries() abil parem jõudlus ja turvalisus.

1. Jõudluse optimeerimine:

• Object.keys() + forEach() pakub paremat järjekorra kontrolli ja jõudlust.

2. Vastused korduma kippuvatele küsimustele

• Vastus: Sobib hästi objektide omaduste loendamiseks, kuid massiivide või jõudluskriitiliste ülesannete puhul on turvalisemad ja tõhusamad alternatiivid nagu for…of või Object.keys().

• Vastus: Jah, see on osa standardkäitumisest. Probleemi vältimiseks kasuta hasOwnProperty().

• Objektid: for…in või Object.keys().
• Massiivid: for…of või forEach().

3. Järgmised sammud｜Mida edasi õppida

1. Itereeritavad objektid:

• Map, Set, WeakMap, WeakSet ja nende läbimiseks sobivad tsüklid.

1. Kõrgema järgu funktsioonid:

• map(), filter(), reduce() kasutamine andmete töötlemiseks.

1. Objektide ja massiivide täiustatud tehnikad:

• Object.values(), Object.entries() kasutamine andmete töötlemisel.

1. Uued JavaScripti võimalused:

• ES6+ funktsioonid nagu spread operaator ja detsentraliseerimine (destructuring).

1. Asünkroonne programmeerimine:

• Promise, async/await ja nende kasutamine dünaamiliste andmete töötlemisel.

4. Kokkuvõte｜Valda JavaScripti tsüklid

• For…in tsükkel sobib objektide omaduste loendamiseks, kuid massiivide ja jõudluskriitiliste ülesannete puhul vali sobivam meetod.
• Et vältida vigu ja ootamatut käitumist, järgi alati parimaid tavasid ja kasuta turvalisi meetodeid.