Rumah  >  Artikel  >  hujung hadapan web  >  Bolehkah es6 untuk melintasi objek?

Bolehkah es6 untuk melintasi objek?

青灯夜游
青灯夜游asal
2022-05-19 16:11:083623semak imbas

"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.

Bolehkah es6 untuk melintasi objek?

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 gelungSama 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn