在 JavaScript 的世界中,隐藏着许多鲜为人知的小秘密和技巧。本文将带你探索一些有趣的 JavaScript 冷知识,让你在编程中感受到不一样的乐趣。
💯 JavaScript 中的小 tips
📧 1 严格模式
💞 1.1 “use strict” 严格模式
严格模式是一种在 JavaScript 中启用更严格语法和错误检查的模式。通过在代码的顶部添加 "use strict"
,可以启用严格模式。
"use strict";
// 以下代码将在严格模式下执行
💞 1.2 开启严格模式
严格模式可以应用于整个脚本或单个函数。当应用于整个脚本时,它将对脚本中的所有代码启用严格模式。当应用于单个函数时,它将仅对该函数内的代码启用严格模式。
function myFunction() {
"use strict";
// 函数内的代码将在严格模式下执行
}
💞 1.3 全局变量显式声明
在严格模式下,未声明的变量将被视为错误。这意味着你必须显式地声明所有的全局变量。
"use strict";
x = 5; // 错误!未声明的变量
var y = 6; // 正确!显式声明的全局变量
💞 1.4 静态绑定
在严格模式下,函数内部的 this
值将被静态绑定到函数的上下文,而不是动态绑定到调用函数的对象。
function myFunction() {
"use strict";
console.log(this); // 在严格模式下,`this` 将是 `undefined`
}
💞 1.5 增强的安全措施
严格模式禁止一些可能导致安全问题的操作,例如使用 with
语句和动态修改对象的属性。
"use strict";
with (obj) {
// 错误!在严格模式下不允许使用 `with` 语句
}
delete obj.property; // 错误!在严格模式下禁止动态删除对象的属性
💞 1.6 禁止删除变量
在严格模式下,不能删除变量。
"use strict";
var x = 5;
delete x; // 错误!在严格模式下不能删除变量
💞 1.7 显式报错
严格模式会使 JavaScript 引擎在遇到一些常见错误时抛出异常,而不是默默忽略它们。
"use strict";
10++; // 错误!在严格模式下不允许修改常量
💞 1.8 重名错误
严格模式禁止在函数内部定义与函数参数同名的变量。
function myFunction(x) {
"use strict";
var x = 5; // 错误!在严格模式下不允许定义与函数参数同名的变量
}
💞 1.9 禁止八进制表示法
严格模式禁止使用八进制数字直接量。
"use strict";
var x = 010; // 错误!在严格模式下不允许使用八进制表示法
💞 1.10 arguments 对象的限制
在严格模式下,arguments
对象不再与函数参数同步,并且不能修改 arguments
对象的值。
function myFunction(x) {
"use strict";
arguments[0] = 5; // 错误!在严格模式下不允许修改 `arguments` 对象的值
}
💞 1.11 函数必须声明在顶层
在严格模式下,函数只能在函数声明或函数表达式中定义,不能在代码块中定义。
"use strict";
if (true) {
function myFunction() {
// 错误!在严格模式下,函数只能在函数声明或函数表达式中定义
}
}
💞 1.12 保留字
严格模式限制了一些保留字的使用,例如 eval
和 arguments
不能作为变量名或函数参数名。
"use strict";
var eval = 5; // 错误!在严格模式下,`eval` 是保留字
function myFunction(arguments) {
// 错误!在严格模式下,`arguments` 是保留字
}
📧 2 值在各种场景的转换规则
在 JavaScript 中,值在不同的场景下会进行自动类型转换。以下是一些常见的转换规则:
- 字符串与数字相加,字符串将被转换为数字。
- 布尔值与数字相加,布尔值将被转换为数字(
true
转换为 1,false
转换为 0)。 - 字符串与字符串相加,将进行字符串连接。
- 数字与对象相加,对象将被转换为数字。
- 布尔值与对象相加,对象将被转换为布尔值。
var str = "5";
var num = 3;
console.log(str + num); // "53"
var bool = true;
console.log(bool + num); // 4
console.log(str + str); // "55"
var obj = { valueOf: function () { return 5; } };
console.log(num + obj); // 8
console.log(bool + obj); // true
📧 3 错误类型
JavaScript 中有多种错误类型,以下是一些常见的错误类型:
- SyntaxError:语法错误,发生在代码的语法不正确时。
- TypeError:类型错误,发生在操作不适合对象的类型时。
- ReferenceError:引用错误,发生在尝试引用不存在的变量或对象时。
- RangeError:范围错误,发生在数值超出其有效范围时。
- URIError:URI 错误,发生在处理 URI 时出现错误。
- EvalError:Eval 错误,发生在
eval()
函数内部出现错误时。
// 语法错误
try {
eval("alert(1");
} catch (e) {
console.log(e instanceof SyntaxError); // true
}
// 类型错误
try {
var obj = {};
obj.method();
} catch (e) {
console.log(e instanceof TypeError); // true
}
// 引用错误
try {
var x;
console.log(x);
} catch (e) {
console.log(e instanceof ReferenceError); // true
}
// 范围错误
try {
var arr = [];
arr[100] = 5;
} catch (e) {
console.log(e instanceof RangeError); // true
}
// URI 错误
try {
decodeURIComponent("%");
} catch (e) {
console.log(e instanceof URIError); // true
}
// Eval 错误
try {
eval("function(){}");
} catch (e) {
console.log(e instanceof EvalError); // true
}
📧 4 空值合并运算符 ‘??’
空值合并运算符 ??
用于提供一种更简洁的方式来处理空值。它返回第一个操作数,如果第一个操作数为空(null
或 undefined
),则返回第二个操作数。
var x = null;
var y = 5;
console.log(x?? y); // 5
x = undefined;
console.log(x?? y); // 5
x = 0;
console.log(x?? y); // 0
💞 4.1 与 || 比较
空值合并运算符 ??
与逻辑或运算符 ||
类似,但它们在处理假值时有一些区别。||
运算符会将所有的假值(如 0
、""
、false
等)视为空值,并返回第二个操作数。而 ??
运算符只会将 null
和 undefined
视为空值,并返回第二个操作数。
var x = 0;
var y = 5;
console.log(x || y); // 5
console.log(x?? y); // 0
💞 4.2 优先级
空值合并运算符 ??
的优先级低于逻辑与运算符 &&
和逻辑或运算符 ||
。
var x = null;
var y = 5;
var z = 10;
console.log(x?? y && z); // 5
console.log(x || y && z); // 10
💞 4.3 注意:
空值合并运算符 ??
只能用于处理空值。如果第一个操作数不是空值,则不会执行第二个操作数。
var x = 5;
var y = 10;
console.log(x?? y); // 5
📧 5 ===
严格相等运算符 ===
用于比较两个值是否相等,同时考虑它们的类型。如果两个值的类型不同,则它们不相等。
console.log(5 === 5); // true
console.log(5 === "5"); // false
console.log(true === 1); // false
📧 6 CONSOLE 控制台输入
Console
对象提供了一些方法,用于在浏览器的控制台中输出信息。
💞 6.1 Console.assert()
Console.assert()
方法用于在条件为假时在控制台中输出一条错误消息。
Console.assert(true, "这是一条错误消息");
💞 6.2 Console.clear()
Console.clear()
方法用于清除控制台中的所有输出。
Console.clear();
💞 6.3 Console.count()
Console.count()
方法用于计算指定标签的计数,并在控制台中输出该计数。
Console.count("计数");
💞 6.4 Console.countReset()
Console.countReset()
方法用于重置指定标签的计数。
Console.count("计数");
Console.countReset("计数");
💞 6.5 Console.debug()
Console.debug()
方法用于在控制台中输出一条调试消息。
Console.debug("这是一条调试消息");
💞 6.6 Console.dir()
Console.dir()
方法用于在控制台中输出对象的属性和方法。
Console.dir(document);
💞 6.7 Console.dirxml()
Console.dirxml()
方法用于在控制台中输出对象的 XML 表示形式。
Console.dirxml(document);
💞 6.8 打印信息
除了上述方法,Console
对象还提供了其他方法,用于在控制台中输出信息:
-
Console.log()
:输出普通信息。 -
Console.info()
:输出信息消息。 -
Console.warn()
:输出警告消息。 -
Console.error()
:输出错误消息。
Console.log("这是一条普通消息");
Console.info("这是一条信息消息");
Console.warn("这是一条警告消息");
Console.error("这是一条错误消息");
💞 6.9 打印树状结构
Console
对象还提供了 Console.group()
和 Console.groupEnd()
方法,用于在控制台中打印树状结构的信息。
Console.group("一级");
Console.log("二级");
Console.group("三级");
Console.log("四级");
Console.groupEnd();
Console.groupEnd();
💞 6.10 Console.table()
Console.table()
方法用于将数据以表格的形式输出到控制台。
Console.table([{ name: "张三", age: 20 }, { name: "李四", age: 25 }]);
💞 6.11 定时器
Console
对象还提供了 Console.time()
和 Console.timeEnd()
方法,用于测量代码的执行时间。
Console.time(" timer ");
// 执行代码
Console.timeEnd(" timer ");
💞 6.12 Console.trace()
Console.trace()
方法用于在控制台中输出当前执行的函数调用栈。
function myFunction() {
Console.trace();
}
myFunction();
💞 6.13 占位符
Console
对象的输出方法支持占位符,用于在输出消息中插入变量或表达式的值。占位符的格式为 %s
(字符串)、%d
(整数)、%f
(浮点数)等。
var name = "张三";
var age = 20;
Console.log("我叫 %s,今年 %d 岁", name, age);
以上就是 JavaScript 中的一些冷知识和技巧,希望对你有所帮助。在实际的开发中,合理运用这些冷知识可以让你的代码更加简洁、高效和有趣。