国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

JavaScript ??? ?? ??? / JavaScript 使用誤區(qū)

JavaScript 使用誤區(qū)

本章節(jié)我們將討論 JavaScript 的使用誤區(qū)。

賦值運(yùn)算符應(yīng)用錯(cuò)誤

在 JavaScript 程序中如果你在 if 條件語(yǔ)句中使用賦值運(yùn)算符的等號(hào) (=) 將會(huì)產(chǎn)生一個(gè)錯(cuò)誤結(jié)果, 正確的方法是使用比較運(yùn)算符的兩個(gè)等號(hào) (==)。

if 條件語(yǔ)句返回 false (是我們預(yù)期的)因?yàn)?x 不等于 10:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x == 10);
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

if 條件語(yǔ)句返回 true (不是我們預(yù)期的)因?yàn)闂l件語(yǔ)句執(zhí)行為 x 賦值 10，10 為 true:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 10);
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

if 條件語(yǔ)句返回 false (不是我們預(yù)期的)因?yàn)闂l件語(yǔ)句執(zhí)行為 x 賦值 0，0 為 false:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0;
document.getElementById("demo").innerHTML = Boolean(x = 0);
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

Note賦值語(yǔ)句返回變量的值。

比較運(yùn)算符常見錯(cuò)誤

在常規(guī)的比較中，數(shù)據(jù)類型是被忽略的，以下 if 條件語(yǔ)句返回 true：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x == y);
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

在嚴(yán)格的比較運(yùn)算中，=== 為恒等計(jì)算符，同時(shí)檢查表達(dá)式的值與類型，以下  if 條件語(yǔ)句返回 false：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "10";
document.getElementById("demo").innerHTML = Boolean(x === y);
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

這種錯(cuò)誤經(jīng)常會(huì)在 switch 語(yǔ)句中出現(xiàn)，switch 語(yǔ)句會(huì)使用恒等計(jì)算符(===)進(jìn)行比較:

以下實(shí)例會(huì)執(zhí)行 alert 彈窗：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case 10: alert("Hello");
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

以下實(shí)例由于類型不一致不會(huì)執(zhí)行 alert 彈窗：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
switch(x) {
    case "10": alert("Hello");
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

加法與連接注意事項(xiàng)

加法是兩個(gè)數(shù)字相加。

連接是兩個(gè)字符串連接。

JavaScript 的加法和連接都使用 + 運(yùn)算符。

接下來(lái)我們可以通過(guò)實(shí)例查看兩個(gè)數(shù)字相加及數(shù)字與字符串連接的區(qū)別：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10 + "5";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

使用變量相加結(jié)果也不一致:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 10;
var y = "5";
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

浮點(diǎn)型數(shù)據(jù)使用注意事項(xiàng)

JavaScript 中的所有數(shù)據(jù)都是以 64 位浮點(diǎn)型數(shù)據(jù)(float) 來(lái)存儲(chǔ)。

所有的編程語(yǔ)言，包括 JavaScript，對(duì)浮點(diǎn)型數(shù)據(jù)的精確度都很難確定：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

我解決以上問(wèn)題，可以用整數(shù)的乘除法來(lái)解決：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 0.1;
var y = 0.2;
var z = (x * 10 + y *10) / 10;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

JavaScript 字符串分行

JavaScript 運(yùn)行我們?cè)谧址惺褂脭嘈姓Z(yǔ)句:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
	"Hello World!";
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

但是，在字符串中直接使用回車換行是會(huì)報(bào)錯(cuò)的：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>about:newtab

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello 
World!";
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

我們可以在選擇開發(fā)工具或按下 F12 來(lái)查看錯(cuò)誤信息：

QQ截圖20161017174526.png

字符串?dāng)嘈行枰褂梅葱备?\)，如下所示:

錯(cuò)誤的使用分號(hào)

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
	document.getElementById("demo").innerHTML = "Hello";
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

以下實(shí)例中，由于分號(hào)使用錯(cuò)誤，if 語(yǔ)句中的代碼塊將無(wú)法執(zhí)行：

Return 語(yǔ)句使用注意事項(xiàng)

JavaScript 默認(rèn)是在代碼的最后一行自動(dòng)結(jié)束。

以下兩個(gè)實(shí)例返回結(jié)果是一樣的(一個(gè)有分號(hào)一個(gè)沒有):

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10
    return a * power
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var power = 10;
    return a * power;
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

JavaScript 也可以使用多行來(lái)結(jié)束一個(gè)語(yǔ)句。

以下實(shí)例返回相同的結(jié)果:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return a * power;
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

但是，以下實(shí)例結(jié)果會(huì)返回 undefined：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = myFunction(55);
function myFunction(a) {
    var
    power = 10;
    return
    a * power;
}
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

為什么會(huì)有這樣的結(jié)果呢？因?yàn)樵?JavaScript 中，實(shí)例 4 的代碼與下面的代碼一致：

function myFunction(a) {
    var
    power = 10;  
    return;       // 分號(hào)結(jié)束，返回 undefined
    a * power;
}

解析

如果是一個(gè)不完整的語(yǔ)句，如下所示:

var

JavaScript 將嘗試讀取第二行的語(yǔ)句：

power = 10;

但是由于這樣的語(yǔ)句是完整的:

return

JavaScript 將自動(dòng)關(guān)閉語(yǔ)句:

return;

在 JavaScript 中，分號(hào)是可選的 。

由于 return 是一個(gè)完整的語(yǔ)句，所以 JavaScript 將關(guān)閉 return 語(yǔ)句。

Note注意：不用對(duì) return 語(yǔ)句進(jìn)行斷行。

數(shù)組中使用名字來(lái)索引

許多程序語(yǔ)言都允許使用名字來(lái)作為數(shù)組的索引。

使用名字來(lái)作為索引的數(shù)組稱為關(guān)聯(lián)數(shù)組(或哈希)。

JavaScript 不支持使用名字來(lái)索引數(shù)組，只允許使用數(shù)字索引。

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

在 JavaScript 中, 對(duì)象 使用 名字作為索引。

如果你使用名字作為索引，當(dāng)訪問(wèn)數(shù)組時(shí)，JavaScript 會(huì)把數(shù)組重新定義為標(biāo)準(zhǔn)對(duì)象。

執(zhí)行這樣操作后，數(shù)組的方法及屬性將不能再使用，否則會(huì)產(chǎn)生錯(cuò)誤:

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p>
如果你使用名字作為索引，當(dāng)訪問(wèn)數(shù)組時(shí)，JavaScript 會(huì)把數(shù)組重新定義為標(biāo)準(zhǔn)對(duì)象，數(shù)組的方法及屬性將不能再使用，否則會(huì)產(chǎn)生錯(cuò)誤:。
</p>
<p id="demo"></p>
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
	person[0] + " " + person.length;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

定義數(shù)組元素，最后不能添加逗號(hào)

錯(cuò)誤的定義方式：

points = [40, 100, 1, 5, 25, 10,];

正確的定義方式：

points = [40, 100, 1, 5, 25, 10];

定義對(duì)象，最后不能添加逗號(hào)

錯(cuò)誤的定義方式：

websites = {site:"php中文網(wǎng)", url:"miracleart.cn", like:460,}

正確的定義方式：

websites = {site:"php中文網(wǎng)", url:"miracleart.cn", like:460}

Undefined 不是 Null

在 JavaScript 中, null 用于對(duì)象, undefined 用于變量，屬性和方法。

對(duì)象只有被定義才有可能為 null，否則為 undefined。

如果我們想測(cè)試對(duì)象是否存在，在對(duì)象還沒定義時(shí)將會(huì)拋出一個(gè)錯(cuò)誤。

錯(cuò)誤的使用方式：

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

正確的方式是我們需要先使用 typeof 來(lái)檢測(cè)對(duì)象是否已定義：

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

程序塊作用域

在每個(gè)代碼塊中 JavaScript 不會(huì)創(chuàng)建一個(gè)新的作用域，一般各個(gè)代碼塊的作用域都是全局的。

以下代碼的的變量 i 返回 10，而不是 undefined：

實(shí)例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
</head>
<body>

<p id="demo"></p>
<script>
for (var i = 0; i < 10; i++) {
    // some code
}
document.getElementById("demo").innerHTML = i;
</script>

</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例