Rumah > Artikel > hujung hadapan web > 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
Nama gelung | Objek gelungSama ada gelung boleh diganggu | Sama ada terdapat nilai pulangan | ||
---|---|---|---|---|
for panjang
|
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 | Tiada nilai pulangantd> |
[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!