Kesalahan yang Sering Terjadi JavaScript

Bab ini menunjukkan beberapa kesalahan umum JavaScript.

menggunakan secara tak sengaja operator penugasan

Jika para pendekar if Perintah yang digunakan secara tak sengaja operator penugasan (=) daripada operator perbandingan (====),program JavaScript mungkin akan menghasilkan beberapa hasil yang tak terduga.

ini if Perintah ini mengembalikan false(Sebagaimana diharapkan),karena x tidak sama dengan 10:

var x = 0;
if (x == 10) 

试一试 亲自

ini if Perintah ini mengembalikan true(Bahkan tidak seperti yang diharapkan),karena 10 adalah true:

var x = 0;
if (x = 10) 

试一试 亲自

ini if Perintah ini mengembalikan false(Bahkan tidak seperti yang diharapkan),karena 0 adalah false:

var x = 0;
if (x = 0) 

试一试 亲自

Pembaruan selalu mengembalikan nilai yang dipecahkan.

diperkirakan untuk perbandingan lembut

Dalam perbandingan biasa, jenis data tidak penting. Perintah ini if Perintah ini mengembalikan true

var x = 10;
var y = "10";
if (x == y) 

试一试 亲自

Dalam perbandingan yang ketat, jenis data sebenarnya penting. Perintah ini if Perintah ini mengembalikan false

var x = 10;
var y = "10";
if (x === y) 

试一试 亲自

Ada kesalahan yang umum adalah lupa untuk menambahkan switch Perintah digunakan untuk perbandingan yang ketat:

ini switch Perintah ini akan menampilkan kotak dialog:

var x = 10;
switch(x) {
    case 10: alert("Hello");
}

试一试 亲自

ini switch Perintah tidak akan menampilkan kotak dialog:

var x = 10;
switch(x) {
    case "10": alert("Hello");
}

试一试 亲自

Operator penambahan dan penggabungan yang membingungkan

penambahandigunakan untuk menambahnilai

penggabungan (Concatenation)digunakan untuk menambahstring

Dalam JavaScript, kedua operasi ini menggunakan + Operator.

Sebagai akibatnya, menambahkan bilangan sebagai nilai dan menambahkan bilangan sebagai string akan menghasilkan hasil yang berbeda:

var x = 10 + 5;          // Hasil x adalah 15
var x = 10 + "5";         // Hasil x adalah "105"

试一试 亲自

Jika dua variabel di tambah, sukar untuk meprediksi hasil:

var x = 10;
var y = 5;
var z = x + y;            // Hasil z adalah 15
var x = 10;
var y = "5";
var z =  x + y;            // Hasil z adalah "105"

试一试 亲自

Terdapat kesalahan yang membingungkan untuk bilangan yang bulat

Semua nombor dalam JavaScript disimpan dalam format 64 bitBilangan floating-point (Floats)

Semua bahasa pemrograman, termasuk JavaScript, menghadapi kesulitan dalam mengatur nilai titik desimal:

var x = 0.1;
var y = 0.2;
var z = x + y             // hasil di z bukan 0.3

试一试 亲自

Untuk menyelesaikan masalah di atas, gunakan operasi kali dan bagi:

实例

var z = (x * 10 + y * 10) / 10;       // hasil di z akan 0.3

试一试 亲自

Membahagi string JavaScript

JavaScript memungkinkan anda untuk membahagi perintah ke dua baris:

Contoh 1

var x =
"Hello World!";

试一试 亲自

Namun, membahagi baris di tengah string adalah salah:

Contoh 2

var x = "Hello
World!";

试一试 亲自

Jika perlu untuk membahagi baris di dalam string, maka perlu menggunakan backslash:

Contoh 3

var x = "Hello ",
World!";

试一试 亲自

Tanda koma yang disusun dengan salah

Kerana tanda koma yang salah, blok kode ini akan dieksekusi untuk nilai mana pun x:

if (x == 19);
{
     // blok kode
}

试一试 亲自

Membahagi perintah return

Menutup perintah secara otomatis di akhir baris adalah tingkah laku lalai JavaScript.

Kerana itu, dua contoh di bawah ini akan kembali hasil yang sama:

Contoh 1

function myFunction(a) {
    var power = 10  
    kembali a * power
}

试一试 亲自

Contoh 2

function myFunction(a) {
    var power = 10;
    kembali a * power;
}

试一试 亲自

JavaScript juga memungkinkan anda untuk membelah perintah ke dua baris.

Kerana itu, contoh 3 juga akan kembali hasil yang sama:

Contoh 3

function myFunction(a) {
    var
    power = 10;  
    kembali a * power;
}

试一试 亲自

Namun, jika kembali Apa yang akan terjadi jika perintah diubah baris ke dua baris lainnya:

Contoh 4

function myFunction(a) {
    var
    power = 10;  
    kembali
    a * power;
}

试一试 亲自

Fungsi ini akan kembali undefined!

Mengapa? Kerana JavaScript menganggap anda menginginkan:

Contoh 5

function myFunction(a) {
     var
    power = 10;  
    kembali;
    a * power;
}

试一试 亲自

Pengertian

Jika perintah adalah tak lengkap:

var

JavaScript akan melengkapkan perintah ini melalui bacaan baris berikutnya:

power = 10;

tetapi kerana perintah ini adalah lengkap:

kembali

JavaScript akan menutup perintah secara automatik:

kembali;

Kemungkinan ini terjadi kerana, dalam JavaScript, penggunaan tanda koma untuk menutup (mengakhiri) perintah adalah pilihan.

JavaScript akan menutup kembali Perintah, kerana ia adalah perintah yang lengkap sendiri.

Jangan pernah untuk kembali Perintah untuk baris baru.

Melaksanakan pengaksesan array melalui indeks penamaan

很多编程语言支持带有命名索引的数组。

带有命名索引的数组被称为关联数组(或散列)。

JavaScript 不支持带有命名索引的数组。

在 JavaScript 中,数组使用数字索引

实例

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length 将返回 3
var y = person[0];              // person[0] 将返回 "Bill"

试一试 亲自

在 JavaScript 中,对象使用命名索引

如果您使用命名索引,那么在访问数组时,JavaScript 会将数组重新定义为标准对象。

在自动重定义之后,数组方法或属性将产生未定义或非正确的结果:

实例

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length 将返回 0
var y = person[0];              // person[0] 将返回 undefined

试一试 亲自

用逗号来结束定义

对象和数组定义中的尾随逗号在 ECMAScript 5 中是合法的。

对象实例:

person = {firstName:"Bill", lastName:"Gates", age:62,}

数组实例:

points = [35, 450, 2, 7, 30, 16,];

警告!!

Internet Explorer 8 会崩溃。

JSON 不允许尾随逗号。

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined 不是 Null

JavaScript 对象、变量、属性和方法可以是未定义的。

此外,空的 JavaScript 对象的值可以为 null

这可能会使测试对象是否为空变得有点困难。

您可以通过测试类型是否为 undefined,来测试对象是否存在:

实例

if (typeof myObj === "undefined")

试一试 亲自

但是您无法测试对象是否为 null,因为如果对象未定义,将抛出错误:

不正确:

if (myObj === null)

要解决这个问题,必须测试对象是否为 null,而不是未定义。

但这仍然会引发错误:

不正确:

if (myObj !== null && typeof myObj !== "undefined")

因此,在测试非 null 之前,必须先测试未定义:

正确:

if (typeof myObj !== "undefined" && myObj !== null)

试一试 亲自

期望块级范围

JavaScript 不会为每个代码块创建新的作用域。

很多编程语言都是如此,但是 JavaScript 并非如此

认为这段代码会返回 undefined,是新的 JavaScript 开发者的常见错误:

实例

for (var i = 0; i < 10; i++) {
  // 区块 代码
}
return i;

试一试 亲自