挖掘 JavaScript 冷门技巧，体验别样编程魅力

推荐一个AI网站，免费使用豆包AI模型，快去白嫖👉海鲸AI

在 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 中的一些冷知识和技巧，希望对你有所帮助。在实际的开发中，合理运用这些冷知识可以让你的代码更加简洁、高效和有趣。