Memahami Perbezaan Antara Harta Boleh Lelar dan Terbilang dalam JavaScript

Apabila bekerja dengan JavaScript, anda selalunya perlu mengulang pengumpulan data. Dua kaedah biasa untuk melakukan ini ialah gelung for-in dan for-of. Walau bagaimanapun, gelung ini digunakan dalam konteks yang berbeza dan untuk jenis koleksi yang berbeza. Memahami perbezaan antara sifat boleh lelar dan boleh dikira adalah penting untuk menggunakan gelung ini dengan berkesan.

1. Gelung for-in: Gelung Melalui Semua Sifat Terbilang

Gelung for-in direka bentuk untuk mengulangi sifat objek yang boleh dikira. Sifat terbilang ialah sifat yang boleh dilihat apabila menggelung melalui objek atau kaedah panggilan seperti Object.keys().

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

for (const key in obj) {
    console.log(key); // Outputs: name, age, isMarried
}

Dalam contoh ini, gelung for-in berulang ke atas semua sifat terhitung objek obj, termasuk sifat isMarried yang ditambah secara dinamik.

2. Gelung for-of: Gelung Melalui Semua Iterables

Gelung for-of, sebaliknya, digunakan untuk lelaran pada objek boleh lelaran. Iterable ialah objek yang mempunyai kaedah Symbol.iterator. Contoh biasa objek boleh lelar termasuk tatasusunan, rentetan, peta dan set.

const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

Di sini, gelung for-of berulang pada arr tatasusunan, mengabaikan sifat FruitFruit yang lain kerana ia bukan sebahagian daripada jujukan boleh lelar.

3. Tatasusunan Boleh Lelar, Objek Tidak Boleh Lelar

Secara lalai, tatasusunan dalam JavaScript boleh lelar kerana ia mempunyai kaedah Symbol.iterator terbina dalam. Objek biasa, bagaimanapun, tidak mempunyai kaedah ini dan oleh itu tidak boleh diubah.

const arr = ['apple', 'pear'];

for (const fruit of arr) {
    console.log(fruit); // Outputs: apple, pear
}

const obj = {
    name: 'john',
    age: '24'
};

for (const key of obj) {
    console.log(key); // Throws TypeError: obj is not iterable
}

Dalam kod di atas, cubaan menggunakan gelung for-of pada objek menghasilkan TypeError kerana objek tidak melaksanakan kaedah Symbol.iterator.

4. Penjelasan Ralat: TypeError: obj tidak boleh diubah

Apabila anda cuba menggunakan gelung for-of pada objek tidak boleh lelaran, JavaScript melemparkan TypeError. Ralat ini berlaku kerana objek tidak mempunyai kaedah Symbol.iterator, yang diperlukan untuk gelung for-of.

const obj = {
    name: 'john',
    age: '24'
};

try {
    for (const key of obj) {
        console.log(key);
    }
} catch (e) {
    console.error(e); // Outputs: TypeError: obj is not iterable
}

Contoh Kod

Di bawah ialah contoh lengkap yang menunjukkan perbezaan antara gelung for-in dan for-of:

const log = console.log;
const arr = ['apple', 'pear'];
arr.anotherFruit = 'banana';

log('Using for-of loop:');
for (const fruit of arr) {
    log(fruit); // Outputs: apple, pear
}

log('Using for-in loop:');
for (const fruit in arr) {
    log(fruit); // Outputs: 0, 1, anotherFruit
}

const obj = {
    name: 'john',
    age: '24'
};

obj.isMarried = false;

log('Using for-in loop:');
for (const key in obj) {
    log(key); // Outputs: name, age, isMarried
}

log('Using for-of loop:');
try {
    for (const key of obj) {
        log(key);
    }
} catch (e) {
    log(e); // Outputs: TypeError: obj is not iterable
}

Kesimpulan

Memahami perbezaan antara sifat boleh lelar dan boleh dikira adalah penting untuk menggunakan gelung for-in dan for-of JavaScript dengan berkesan. Gelung for-in digunakan untuk lelaran ke atas sifat objek yang boleh dikira, manakala gelung for-of direka bentuk untuk lelaran ke atas objek boleh lelaran seperti tatasusunan. Penyalahgunaan gelung ini boleh membawa kepada ralat, seperti TypeError yang ditemui semasa cuba menggunakan gelung untuk-bagi pada objek yang tidak boleh diulang. Dengan memahami perbezaan ini, anda boleh menulis kod JavaScript yang lebih mantap dan bebas ralat.

Atas ialah kandungan terperinci Memahami Perbezaan Antara Harta Boleh Lelar dan Terbilang dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!