JavaScript基础知识学习-3

66 阅读4分钟

在 HTML 中加载 JavaScript

使用简单的语法来加载外部脚本(type 属性不是必需的):

<script src="myscript.js"></script>

访问 HTML 元素

使用“不整洁的” HTML 样式的后果,也许是导致 JavaScript 错误。

这两条 JavaScript 语句会产生不同的结果:

var obj = getElementById("Demo")

var obj = getElementById("demo") 

使用小写文件名

大多数 web 服务器(Apache、Unix)对文件名的大小写敏感:

london.jpg 无法视作 London.jpg 进行访问。

其他 web 服务器(微软的 IIS)对大小写不敏感:

london.jpg 能够以 London.jpg 或 london.jpg 来访问。

如果您混合使用大小写,则必须严格保持连续和一致。

如果您将站点从大小写不敏感的服务器转移至对大小写敏感的服务器,即使这种小错误也可能破坏您的网站。

为了避免这些问题,请始终使用小写文件名(如果可能)。

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代,并学习如何使用闭包

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明,否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

这么做的好处是:

  • 获得更整洁的代码
  • 提供了查找局部变量的好位置
  • 更容易避免不需要的全局变量
  • 减少不需要的重新声明的可能性

默认地,JavaScript 会将所有声明移至顶部(JavaScript hoisting)。

初始化变量

在您声明变量时对其进行初始化是个好习惯。

这么做的好处是:

  • 更整洁的代码
  • 在单独的位置来初始化变量
  • 避免未定义值
// 在开头进行声明和初始化
var firstName = "",
    lastName  = "",
    price = 0,
    discount = 0,
    fullPrice  = 0,
    myArray = [],
    myObject = {};

变量初始化使我们能够了解预期用途和预期的数据类型。

请不要声明数值、字符串或布尔对象

请始终将数值、字符串或布尔值视作原始值。而非对象。

如果把这些类型声明为对象,会拖慢执行速度,并产生讨厌的副作用:

实例

var x = "Bill";             
var y = new String("Bill");
(x === y) // 结果为 false,因为 x 是字符串,而 y 是对象。

或者甚至更糟:

实例

var x = new String("Bill");             
var y = new String("Bill");
(x == y) // 结果是 false,因为你无法比较对象。

请勿使用 new Object()

  • 请使用 {} 来代替 new Object()
  • 请使用 "" 来代替 new String()
  • 请使用 0 来代替 new Number()
  • 请使用 false 来代替 new Boolean()
  • 请使用 [] 来代替 new Array()
  • 请使用 /()/ 来代替 new RegExp()
  • 请使用 function (){}来代替 new Function()
var x1 = {};           // 新对象
var x2 = "";           // 新的原始字符串值
var x3 = 0;            // 新的原始数值
var x4 = false;        // 新的原始布尔值
var x5 = [];           // 新的数组对象
var x6 = /()/;         // 新的正则表达式
var x7 = function(){}; // 新的函数对象

意识到自动类型转换

请意识到数值会被意外转换为字符串或 NaN(Not a Number)。

JavaScript 属于松散类型。变量可包含不同的数据类型,并且变量能够改变其数据类型:

实例

var x = 5 + 7;       // x.valueOf() 是 12,  typeof x 是数值
var x = 5 + "7";     // x.valueOf() 是 57,  typeof x 是字符串
var x = "5" + 7;     // x.valueOf() 是 57,  typeof x 是字符串
var x = 5 - 7;       // x.valueOf() 是 -2,  typeof x 是数值
var x = 5 - "7";     // x.valueOf() 是 -2,  typeof x 是数值
var x = "5" - 7;     // x.valueOf() 是 -2,  typeof x 是数值
var x = 5 - "x";     // x.valueOf() 是 NaN, typeof x 是数值

用字符串减去字符串,不会产生错误而是返回 NaN(Not a Number):

"Hello" - "Dolly"    // 返回 NaN

使用 === 比较

== 比较运算符总是在比较之前进行类型转换(以匹配类型)。

  • 0 == "" //true
    
  • 1 == "1" //true
    

这两个比较是相等的,就很神奇

=== 运算符会强制对值和类型进行比较:

//这个是true 就很神奇
0 == "";        // true
//这个是true 就很神奇
1 == "1";       // true
1 == true;      // true

0 === "";       // false
1 === "1";      // false
1 === true;     // false

使用 Parameter Defaults

如果调用函数时缺少一个参数,那么这个缺失参数的值会被设置为 undefined

undefined 值会破坏您的代码。为参数设置默认值是一个好习惯。

在 ES6 中定义方法时,我们可以给方法里的参数加一个默认值

  • 方法被调用时,如果没有给参数赋值,那就是用默认值;
  • 方法被调用时,如果给参数赋值了新的值,那就用新的值。
function myFunction(x, y=5) {
    return x * y;
}
document.getElementById("p01").innerHTML = myFunction(5)//25