JavaScript是现代前端开发中必不可少的一门语言,它可以为网页增加动态效果,提升用户交互体验。但是在使用JavaScript过程中,开发者往往会忽视一些细节,从而导致程序出现一些意料之外的错误或者行为,下面我们就来看看一些JavaScript中容易忽略的细节。
1. 引用类型判断:
var a = {}; var b = []; console.log(typeof a); // object console.log(typeof b); // object
JavaScript中的对象有两种类型,一种是普通对象,一种是数组对象。这两种对象使用typeof运算符得到的结果都是"object",为了正确地判断一个变量是否为数组类型,可以使用instanceof运算符:
console.log(a instanceof Object); // true console.log(b instanceof Array); // true
2. 变量声明方式:
function foo() { var a=b=c=d=2; } foo(); console.log(a); // 报错 console.log(b); // 报错 console.log(c); // 2 console.log(d); // 2
在JS中将一个未声明的变量进行赋值时,JS自动把这个变量声明为全局变量并进行赋值。当变量在函数内进行声明时,如果未使用var声明该变量,JS会将其作为全局变量声明,容易造成变量污染。正确的做法应该是使用var显式地定义变量:
function foo() { var a = 2; var b = 2; var c = 2; var d = 2; } foo(); console.log(a); // 报错 console.log(b); // 报错 console.log(c); // 2 console.log(d); // 2
3. 严格模式:
"use strict"; function foo() { // "use strict"; a = 2; } foo(); console.log(a); // 报错
在JavaScript中,使用"use strict"进行声明会开启严格模式,它能够帮助我们避免一些不严谨的写法,从而提高代码的健壮性。开启严格模式时,未被声明的变量将不会被自动地创建为全局变量,而是会直接报错。在上面的例子中,"a = 2"这句语句没有使用var声明变量,如果不使用严格模式可能会自动将a赋值为全局变量,使用严格模式后这样的代码就会直接报错。
4. 函数参数默认值:
function foo(x) { x = x || 0; console.log(x); } foo(); // 0 foo(1); // 1
在JavaScript中,如果函数调用时没有为参数传递值,则参数会赋值为undefined,但有时候我们希望函数在没有传递参数时,能够使用默认值。在ES6中,我们可以这样写:
function foo(x = 0) { console.log(x); } foo(); // 0 foo(1); // 1
5. 变量类型转换:
console.log(1 + "2"); // "12" console.log(1 - "2"); // -1 console.log("1"=="1.0"); // true
在JS中,有时候我们需要将变量的类型进行转换,但是类型转换时容易出现意外的结果,比如上面的例子中,1 + "2"的结果为"12",这是因为1被转化为了字符串"1",然后进行了字符串拼接。如果我们希望进行数值运算,则需要将字符串转化为数值类型:
console.log(1 + parseInt("2")); // 3
总之,在开发JavaScript应用时,要注意这些细节问题,这样才能写出更加健壮、鲁棒的代码。