Panjang literal objek JavaScript === tidak terdefinisi?

Saya sedang mengerjakan fungsi animasi ini tetapi saya mempunyai masalah. Sepertinya saya tidak dapat melakukan tugas yang seharusnya mudah, saya tidak dapat mengetahui panjang suatu benda. Jika Anda memeriksa jsFiddle, Anda dapat melihat bahwa saya menjalankan alert(properties.length); dan mengembalikan undefined. Adakah yang bisa mengerti mengapa hal ini bisa terjadi?


person Olical    schedule 14.01.2011    source sumber
comment
kemungkinan duplikat Panjang Array Asosiatif Javascript   -  person ripper234    schedule 31.01.2012


Jawaban (5)


Objek JavaScript tidak memiliki properti length, hanya Arrays yang memilikinya. Jika Anda ingin mengetahui jumlah properti yang didefinisikan pada suatu objek, Anda harus mengulanginya dan menghitungnya.

Selain itu, loop for in Anda rentan terhadap bug karena ekstensi Object.prototype karena in akan melintasi rantai prototipe lengkap dan menghitung semua properti yang ada pada rantai tersebut.

Contoh

// Poisoning Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // logs both 'moo' AND 'bar'
}

Anda harus menggunakan metode hasOwnProperty pada objek untuk menyaring properti yang tidak diinginkan tersebut.

// still the foo from above
for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i); // only logs 'moo'
    }
}

Banyak kerangka kerja JavaScript di luar sana yang memperluas prototipe, tidak menggunakan hasOwnProperty sering kali menyebabkan bug yang mengerikan.

Perbarui

Mengenai masalah sebenarnya bahwa kode Anda tidak menganimasikan kedua properti.

for(var p in properties) {
    ...
    for(var i = 0; i <= frames; i++)
    {
        setTimeout((function(exti, element) {
            return function() {

                // p gets overriden by for outer for in loop
                element.style[p] = original + (pixels * exti) + 'px';
            }

        // you need to pass in a copy of the value of p here
        // just like you do with i and element
        })(i, element), i * (1000 / 60), element);
    }
    ....
 }
person Ivo Wetzel    schedule 14.01.2011
comment
Pada saat yang sama, banyak perpustakaan di luar sana (seperti jQuery) akan berantakan jika Anda memperluas objek.prototipe, jadi jika Anda menggunakan salah satunya hasOwnProperty hanya membuang-buang siklus cpu. - person Martin Jespersen; 14.01.2011
comment
@Martin Jespersen Jadi Anda menjual kode dengan PERINGATAN JANGAN GUNAKAN HANYA DENGAN FRAMEWORKS A, B DAN C tercetak di atasnya? Maaf, tetapi menggunakan hasOwnProperty adalah* merupakan praktik yang baik. - person Ivo Wetzel; 14.01.2011
comment
tidak, saya hanya bosan dengan web yang penuh dengan kode javascript yang sangat jauh dari optimalisasi bahkan chrome pun tersedak, sekali lagi, saya rasa saya harus bersyukur karena saya menghasilkan uang untuk membersihkan kekacauan yang dibuat orang lain :P - person Martin Jespersen; 14.01.2011
comment
Saya benar-benar tidak mengerti apa maksud Anda dengan keseluruhan masalah hasOwnProperty. Saya tidak tahu saya sedang membuat prototipe? - person Olical; 14.01.2011
comment
@Martin Lalu jangan pernah menggunakan jQuery lagi, itu diisi dengan panggilan ke hasOwnProperty. Apa yang Anda lakukan adalah optimasi prematur, tidak ada yang lain. - person Ivo Wetzel; 14.01.2011
comment
@Wolfy Saya hanya ingin menunjukkan kemungkinan bug yang mungkin terjadi ketika kode lain (baik itu milik Anda yang Anda tulis dalam 2 minggu) atau skrip lain yang mungkin Anda gunakan di halaman Anda memperluas prototipe, sejak itu hal-hal aneh akan berakhir di halaman Anda properties objek. - person Ivo Wetzel; 14.01.2011
comment
@Ivo Wetzel Oh benar, saya pikir ada masalah dengan kode saya saat ini. Dan saya pikir skrip saya tidak berfungsi karena panjangnya tidak ada dan pernyataan for in tidak berfungsi karenanya. Jadi sekarang saya tahu tidak ada yang salah dengan objeknya, tahukah Anda mengapa hanya menganimasikan ketinggiannya saja, bukan keduanya? - person Olical; 14.01.2011
comment
@Ivo mudah... contoh Anda baik-baik saja dan Anda benar, ia memiliki bretel dan ikat pinggang, tidak ada yang salah dengan itu, saya hanya menjajakan alternatif yang lebih sederhana dan lebih cepat - jangan menganggap pribadi bahwa kami memiliki pendapat yang berbeda;) - person Martin Jespersen; 14.01.2011
comment
@Wofly Anda juga harus memasukkan p ke dalam pembungkus animasi, seperti i dan element karena for in loop jika tidak maka akan menimpa p. - person Ivo Wetzel; 14.01.2011
comment
@Ivo Tentu saja! Karena saya memiliki fungsi di dalam fungsi. Terima kasih untuk itu! - person Olical; 14.01.2011
comment
Objek seperti array juga memiliki properti panjang :))) Tapi mereka bukan array. - person Alexandr; 14.01.2011
comment
@Alexandr Memang benar, tetapi ia mencoba untuk menghindari lebih banyak kebingungan di sini, perlu juga dicatat bahwa satu-satunya objek JS nyata yang berperilaku seperti array adalah argumen. Sisanya adalah bagian dari DOM :) - person Ivo Wetzel; 14.01.2011
comment
@Ivo Wetzel Tentu saja jawaban Anda - luar biasa! Dan itu sudah cukup untuk memahami penyebab masalahnya. - person Alexandr; 14.01.2011

Ini didukung di node.js dan lingkungan yang lebih baru.

var obj = {a: "a", b: "b"};
Object.keys(obj).length // 2
person Jamund Ferguson    schedule 06.03.2012
comment
Tidak mendukung di IE8, developer.mozilla .org/en-US/docs/Web/JavaScript/Reference/ - person Igor Parra; 23.02.2015

Jika Anda menggunakan Underscore.js, Anda dapat menggunakan _.size():

_.size({one : 1, two : 2, three : 3});
=> 3
person Casey    schedule 06.03.2012
comment
Saya belum melihat sumbernya tapi saya berharap size() mempertimbangkan hasOwnProperty. - person RaphaelDDL; 10.04.2014

Objek tidak memiliki panjang, Anda harus menggunakan array jika menginginkannya.

Jika Anda harus mencari jumlah properti suatu objek hanya ada satu cara:

var length =0;
for(var i in obj) length++;
person Martin Jespersen    schedule 14.01.2011
comment
Tolong gunakan hasOwnProperty. - person Ivo Wetzel; 14.01.2011
comment
Mengapa bagaimana? Di manakah hasOwnProperty berlaku untuk ini? - person Olical; 14.01.2011
comment
Lebih baik tidak memperbarui Object.prototype? Siapa yang melakukan itu? Ini sebenarnya adalah contoh yang bagus! - person Jamund Ferguson; 06.03.2012
comment
@IvoWetzel sebuah contoh akan dihargai. Saya telah menggunakan jawaban Martin Jespersen di sini jsfiddle.net/jeykeu/qAH48 Apakah ini cara yang tepat? ? - person Junaid Qadir Shekhanzai; 13.03.2012

Inilah fungsi umum @Junaid Qadir Shekhanzai untuk "menemukan panjang suatu benda" (yang seperti diberitahukan kepada kita, seharusnya disebut "menghitung properti suatu benda"). Ini menggabungkan solusi dari @Ivo Wetzel dan @Martin Jespersen:

function countProperties(myObj){
    var length = 0;
    if(typeof myObj != 'object'){
        return false;
    }
    for(var i in myObj) {
    length++;
    }
    return length;
}
person Michael McGinnis    schedule 31.10.2017