欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript的相关注意事项

程序员文章站 2022-03-04 14:07:15
...

1. JavaScript的用法

  • JavaScript 可以被放置在<body> <head>标签中进行定义。

  • 可在外部文件中定义JS文件,然后进行导入,myScript.js为外部定义的js文件

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

2. 常见错误

2.1 switch的注意事项

switch 语句会使用恒等计算符(===)进行比较;

例如,以下实例会执行 alert 弹窗:

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

以下实例由于类型不一致不会执行 alert 弹窗:

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

2.2 加法与连接注意事项

加法是两个数字相加。

连接是两个字符串连接。

JavaScript 的加法和连接都使用 + 运算符。

接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别:

var x = 10 + 5;          // x 的结果为 15
var x = 10 + "5";        // x 的结果为 "105"

2.3 浮点型数据使用注意事项

JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。

所有的编程语言,包括 JavaScript,对浮点型数据的精确度都很难确定:

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)            // 返回 false

为解决以上问题,可以用整数的乘除法来解决:

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

2.4 数组的注意事项

数组中使用名字来索引

许多程序语言都允许使用名字来作为数组的索引。

使用名字来作为索引的数组称为关联数组(或哈希)。

JavaScript 不支持使用名字来索引数组,只允许使用数字索引。

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length 返回 3
var y = person[0];             // person[0] 返回 "John"

在 JavaScript 中, 对象 使用 名字作为索引

如果你使用名字作为索引,当访问数组时,JavaScript 会把数组重新定义为标准对象。

执行这样操作后,数组的方法及属性将不能再使用,否则会产生错误:

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

数组最后一个值的后面添加逗号虽然语法没有问题,但是在不同的浏览器可能得到不同的结果。

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。

正确的定义方式:

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

定义对象,最后不能添加逗号

错误的定义方式:

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}

正确的定义方式:

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}

2.5 Undefined 不是 Null

在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。

对象只有被定义才有可能为 null,否则为 undefined。

如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。

错误的使用方式:

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

正确的方式是我们需要先使用 typeof 来检测对象是否已定义:

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

2.6 程序块作用域注意事项

在每个代码块中 JavaScript 不会创建一个新的作用域,一般各个代码块的作用域都是全局的。

以下代码的的变量 i 返回 10,而不是 undefined:(变量在函数外定义,即为全局变量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>

2.7 JavaScript中函数与方法的区别

定义

  • 函数就是没有和其它的类显示的绑定在一起的, 我们就称之为函数

  • 方法就是显示的和其它的类绑定在一起的, 我们就称之为方法

区别

  • 函数可以直接调用, 但是方法不能直接调用, 只能通过对象来调用

  • 函数内部的 this 输出的是 window, 方法内部的 this 输出的是当前调用的那个对象

  • 无论是函数还是方法, 内部都有一个叫做 this 的东东

  • this 是什么? 谁调用了当前的函数或者方法, 那么当前的 this 就是谁

2.8 作用域的注意事项

  • 函数作用域

    在函数内声明的变量作用域是局部的(函数内):

    // 这里不能使用 carName 变量
     
    function myFunction() {
        var carName = "Volvo";
        // 这里可以使用 carName 变量
    }
     
    // 这里不能使用 carName 变量
  • JavaScript 块级作用域(Block Scope)

    使用 var 关键字声明的变量不具备块级作用域的特性,它在 {} 外依然能被访问到。

    { 
        var x = 2; 
    }
    // 这里可以使用 x 变量
  • 循环作用域

    使用 var 关键字:

    var i = 5;
    for (var i = 0; i < 10; i++) {
        // 一些代码...
    }
    // 这里输出 i 为 10

    使用 let 关键字:

    let i = 5;
    for (let i = 0; i < 10; i++) {
        // 一些代码...
    }
    // 这里输出 i 为 5

2.9 const 关键字的注意事项

const 用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改:

const PI = 3.141592653589793;
PI = 3.14;      // 报错
PI = PI + 10;   // 报错

const定义常量与使用let 定义的变量相似:

  • 二者都是块级作用域

  • 都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别:

  • const声明的常量必须初始化,而let声明的变量不用

  • const 定义常量的值不能通过再赋值修改,也不能再次声明。而 let定义的变量值可以修改。

var x = 10;
// 这里输出 x 为 10
{ 
    const x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

const 声明的常量必须初始化:

// 错误写法
const PI;
PI = 3.14159265359;
​
// 正确写法
const PI = 3.14159265359;

2.10 let、var、const的声明提升

  • 声明提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

  • JavaScript 中,var 关键字定义的变量可以在使用后声明,也就是变量可以先使用再声明。

// 在这里可以使用 carName 变量
 
var carName;
  • let 关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用。(let不支持声明提升

// 在这里不可以使用 carName 变量
​
let carName;
  • const关键字定义的变量则不可以在使用后声明,也就是变量需要先声明再使用。(const不支持声明提升

carName = "Volvo";    // 在这里不可以使用 carName 变量
const carName = "Volvo";

2.11 href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id

如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

2.12 函数声明提升的注意事项

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的行为。

提升(Hoisting)应用在变量的声明与函数的声明。

因此,函数可以在声明之前调用:

myFunction(5);
​
function myFunction(y) {
    return y * y;
}

参考文献:JavaScript 教程 | 菜鸟教程 (runoob.com)