Bolehkah es6 untuk melintasi objek?

"untuk" ES6 tidak boleh melintasi objek. Sebab: Antara muka Iterator telah diperkenalkan dalam ES6 Hanya jenis data yang menyediakan antara muka Iterator boleh dilalui menggunakan "for-of" manakala objek biasa tidak menyediakan antara muka Iterator secara lalai, jadi "for-of" tidak boleh digunakan untuk lintasan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Dengan pembangunan berterusan bahagian hadapan, terdapat banyak kaedah gelung cahaya, seperti untuk, untukSetiap, lakukan..sementara, untuk...dalam, dll. Walau bagaimanapun, gelung ini juga mempunyai senario aplikasi dan kelebihan dan kekurangan.

ES6 membekalkan kami kaedah gelung baharu untuk...daripada, yang boleh menggelung rentetan, tatasusunan dan objek seperti tatasusunan yang lain Sebagai objek Objek yang paling banyak terdapat di mana-mana, wajarkah ia boleh digelung?

Mari kita lihat contoh kod di bawah:

{
    // 迭代数组
  const iterable = ['a', 'b'];
  for (const value of iterable) {
    console.log(value);
  }
  // output: a b
}
{
    // 普通对象
    const obj = {
      a: 'A',
      b: 'B'
    }
    for(const item of obj){
      console.log(item)
    }
    // Uncaught TypeError: obj is not iterable
}

oh tidak, ralat telah dilaporkan: Uncaught TypeError: obj is not iterable. Petua: obj tidak boleh diubah. Jelas sekali, ia tidak boleh digunakan terus for...of untuk melintasi objek Objek.

Jadi mengapa tidak boleh untuk...daripada, yang boleh melintasi kebanyakan struktur data, merentasi objek Objek?

Sebab:

Iterator telah diperkenalkan dalam ES6 Hanya jenis data yang menyediakan antara muka Iterator boleh dilalui menggunakan for-of, manakala Array, jenis Data seperti Set, Peta dan tatasusunan tertentu seperti argumen semuanya menyediakan antara muka Iterator secara lalai, supaya ia boleh dilalui menggunakan for-of.

Untuk objek biasa, struktur for...of tidak boleh digunakan secara langsung, dan ralat akan dilaporkan, menggesa obj is not iterable, yang bermaksud objek biasa tidak mempunyai antara muka Iterator secara lalai , dan antara muka Iterator mesti digunakan.

Bagaimana untuk menyelesaikannya? Biarkan untuk-melintasi objek

Jadi sebabnya jelas, bagaimana untuk menyelesaikannya? Bolehkah ia menyediakan antara muka Iterator untuk objek dan jenis data yang lain? Antara muka Iterator , maka terdapat cara untuk melaksanakan antara muka ini Berikut adalah pelaksanaan yang paling mudah:

Jika anda melihat dengan teliti, anda akan mendapati bahawa antara muka Symbol.iterator sebenarnya adalah fungsi Penjana. kod itu boleh dipermudahkan:

newObj[Symbol.iterator] = function(){
    let index = 0
        , self = this
        , keys = Object.keys( self )
        ;
    
    return {
        next(){
            if( index < keys.length ){
                return {
                    value: self[keys[index++]]
                    , done: false
                };
            }
            else{
                return {
                    value: undefined
                    , done: true
                }
            }
        }
    };
};

Perlu diperhatikan bahawa Object.keys berlaku untuk menyelesaikan masalah warisan yang dihadapi oleh for-in sebelum

newObj[Symbol.iterator] = function* (){
    let keys = Object.keys( this )
        ;
    
    for(let i = 0, l = keys.length; i < l; i++){
        yield this[keys[i]];
    }
}

for(let v of newObj){
    console.log( v );
}
// 输出结果
// 5
// 6

Ini memenuhi jangkaan dan penggunaan for-of kami untuk melintasi objek, tetapi nampaknya tidak ada, apabila kita melintasi objek, kita biasanya mengharapkan untuk mengeluarkan kunci dan nilai pada masa yang sama Melaraskan kod seperti ini mengembalikan objek, yang nampaknya sangat tidak selesa tugasan? . .

Ini nampaknya sempurna. . .

newObj[Symbol.iterator] = function* (){
    let keys = Object.keys( this )
        ;
    
    for(let i = 0, l = keys.length; i < l; i++){
        yield {
            key: keys[i]
            , value: this[keys[i]]
        };
    }
}

for(let v of newObj){
    console.log( v );
}
// 输出结果
// {key: "e", value: 5}
// {key: "f", value: 6}

Pengetahuan lanjutan: perbezaan antara for-of dan gelung lain

for(let {key, value} of newObj){
    console.log(key, value );
}
// 输出结果
// e 5
// f 6

Objek gelung forTiada nilai pulangan

Nama gelung	Sama ada gelung boleh diganggu	Sama ada terdapat nilai pulangan
forpanjang	badan gelung boleh	tiada nilai pulangan
forEach	Hanya boleh menggelungkan tatasusunan, peta, set , dsb., tetapi tidak boleh menggelungkan rentetan, Objek biasa	Tidak boleh	Tiada nilai pulangan
do.. .while	Jika syarat tertentu dipenuhi, ia boleh digelung selama-lamanya, sekurang-kurangnya sekali	Ya	Tiada nilai pulangan
sementara	Jika syarat tertentu dipenuhi, ia boleh berulang selama-lamanya	Ya	Tiada nilai pulangan
map	membentuk ahli tatasusunan baharu Hanya tatasusunan boleh digelung, rentetan dan objek biasa tidak boleh digelung dan ditetapkan serta peta	tidak boleh Mengganggu	Mengembalikan tatasusunan baharu tanpa menjejaskan tatasusunan asal
penapis	Menapis ahli tatasusunan, hanya Tatasusunan boleh dikitar, rentetan dan objek biasa tidak boleh dikitar, ditetapkan, peta	tidak boleh diganggu	kembali tatasusunan baharu tanpa menjejaskan tatasusunan asal
untuk...dalam	Boleh gelung tatasusunan, objek, tetapi tidak boleh menggelungkan <code>map, set. Ia boleh merentasi nama kunci angka, serta kunci lain yang ditambahkan secara manual, malah kunci pada rantai prototaip	Ya	Tiada nilai pulangan
	Menggelung objek boleh lelar, bukan menggelung objek biasa (melintasi struktur data bersatu)	Ya	Tiada nilai pulangan	td>

[Cadangan berkaitan: tutorial video javascript,

bahagian hadapan web

循环名称	循环对象	是否可中断循环	是否有返回值
for	for循环体的length	可以	无返回值
forEach	仅可循环数组、map、set等，不可循环字符串、普通对象	不可以	无返回值
do...while	满足某种条件，则可一直循环，至少循环一次	可以	无返回值
while	满足某种条件，则可一直循环	可以	无返回值
map	组成新的数组成员，仅可循环数组，不可循环字符串、普通对象，set、map	不可中断	返回新数组，不影响原数组
filter	过滤数组成员，仅可循环数组，不可循环字符串、普通对象，set、map	不可中断	返回新数组，不影响原数组
for...in	可循环数组、对象，不可循环map、set。可遍历数字键名，还可遍历手动添加的其他键，甚至包括原型链上的键	可以	无返回值
for...of	循环可迭代的对象，不可循环普通对象（统一数据结构遍历）	可以	无返回值

]

Atas ialah kandungan terperinci Bolehkah es6 untuk melintasi objek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!