JavaScript 的 25 个不易察觉的特性
18 及以后的内容更像是人们绝对应该了解的新功能。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
作为开发人员，我们经常编写类似类型的代码，陷入一种模式，这种模式虽然很舒适，但有时会让人感到单调乏味。
然而，JavaScript 的世界浩瀚无垠，充满了高级功能，一旦发现并加以利用，就能将我们的开发工作转变为更加激动人心、更有成就感的事情。
在本指南中，我们将揭示 25 个高级 JavaScript 功能，这些功能不仅能展现这些隐藏的瑰宝，还能将您对 JavaScript 的掌握提升到前所未有的水平。
让我们携手踏上这段探索之旅，将 JavaScript 的高级功能融入我们的编码体系，打造更高效、更优雅、更强大的应用程序。是时候为我们的开发工作注入全新的乐趣和创造力了。
1 — 循环语句和代码块语句的标签
JavaScript 允许给循环和代码块添加标签，从而实现精确控制break。continue
outerLoop: for (let i = 0; i < 5; i++) {
innerLoop: for (let j = 0; j < 5; j++) {
if (i === 2 && j === 2) break outerLoop;
console.log(`i=${i}, j=${j}`);
}
}
2 — 逗号运算符
逗号运算符允许按顺序计算多个表达式，并返回最后一个表达式的结果。
let a = (1, 2, 3); // a = 3
3 — 超越字符串格式化的标记模板字面量
除了创建字符串之外，带标签的模板还可以用于 DSL（领域特定语言）、清理用户输入或本地化。
function htmlEscape(strings, ...values) {
// Example implementation
}
4 — 代码块内的函数声明
虽然不建议这样做，但 JavaScript 允许在代码块内声明函数，这可能会导致在非严格模式下出现不同的行为。
if (true) {
function test() { return "Yes"; }
} else {
function test() { return "No"; }
}
test(); // Behavior varies depending on the environment
5 — 虚空操作员
该void运算符会计算任何表达式，然后返回 undefined，这对于 JavaScript 中的超链接非常有用。
void (0); // returns undefined
6 — 位运算符用于快速计算
位运算符（如|和&）可以更快地执行某些数学运算，但代价是代码可读性降低。
let floor = 5.95 | 0; // Fast way to do Math.floor(5.95)
7 — 使用对象操作语句
该with语句会扩展代码块的作用域链，从而允许你编写更短的代码。但是，出于可读性和性能方面的考虑，不建议这样做。
with(document.getElementById("myDiv").style) {
background = "black";
color = "white";
}
8 — 自动分号插入 (ASI)
JavaScript 会尝试修复缺失的分号，但依赖它可能会导致意想不到的结果。
let x = 1
let y = 2
[x, y] = [y, x] // Without proper semicolons, this could fail
9 — 物业检查操作员
检查对象是否具有某个属性，而不直接访问其值。
"toString" in {}; // true
10 — instanceof 与 typeof
instanceof检查原型链，同时typeof返回一个字符串，指示未求值操作数的类型。
function Person() {}
let person = new Person();
console.log(person instanceof Person); // true
console.log(typeof person); // "object"
11 — ES6 中的块级函数
ES6允许函数具有块级作用域，类似于 `this`let和 `this` const。
{
function test() {
return "block scoped";
}
}
console.log(typeof test); // "function" in non-strict mode, "undefined" in strict mode
12 — 调试器语句
使用该debugger语句暂停执行并打开调试器。
function problematicFunction() {
debugger; // Execution pauses here if the developer tools are open
}
13 — eval()用于动态代码执行
eval将字符串作为 JavaScript 代码执行，但这会带来严重的安全性和性能问题。
eval("let a = 1; console.log(a);"); // 1
14 — 非标准 __proto__属性
虽然__proto__广泛支持使用 `setPrototype` 来设置对象的原型，但它并非标准做法。请改用 `setPrototype`Object.getPrototypeOf()和 ` Object.setPrototypeOf()setPrototype`。
let obj = {};
obj.__proto__ = Array.prototype; // Not recommended
15 — document.write() 用于直接文档编辑
document.write()直接写入 HTML 文档，但使用这种方法可能会产生负面影响，尤其是在同步加载外部脚本时。
document.write("<h1>Hello World!</h1>");
16 — 链式赋值
JavaScript 允许链式赋值，即可以在一条语句中将单个值赋给多个变量。
let a, b, c;
a = b = c = 5; // Sets all three variables to the value of 5
17 — 属性存在的输入运算符
该in运算符检查对象中是否存在某个属性，而不访问该属性的值。
const car = {
make: 'Toyota',
model: 'Corolla'
};
console.log('make' in car); // true
18 — 对象属性简写
给对象赋值时，如果属性名与变量名相同，则可以使用简写形式。
const name = 'Alice';
const age = 25;
const person = { name, age };
19 — 默认参数值与解构的结合
您可以将默认参数值与函数参数的解构结合使用，从而定义出更易读、更灵活的函数。
function createPerson({ name = 'Anonymous', age = 0 } = {}) {
console.log(`Name: ${name}, Age: ${age}`);
}
createPerson({ name: 'Alice' }); // Name: Alice, Age: 0
createPerson(); // Name: Anonymous, Age: 0
20 — 用于 Array.fill()初始化数组
使用该方法快速初始化一个具有特定值的数组fill()。
const initialArray = new Array(5).fill(0); // Creates an array [0, 0, 0, 0, 0]
21 — Array.includes()用于在场检查
使用该方法可以轻松检查数组中是否存在某个元素includes()，该方法比使用更易读indexOf()。
const fruits = ['apple', 'banana', 'mango'];
console.log(fruits.includes('banana')); // true
22 — 解构别名
对于destructuring对象，您可以使用别名将属性分配给具有不同名称的变量。
const obj = { x: 1, y: 2 };
const { x: newX, y: newY } = obj;
console.log(newX); // 1
23 — 默认值的空合并运算符
用于??仅在处理null`or`时提供默认值undefined，而不是处理其他falsy值，例如`or`。
const count = 0;
console.log(count ?? 10); // 0, because count is not null or undefined
24 — 动态函数名称
使用对象字面量中的计算属性名称创建具有动态名称的函数。
const dynamicName = 'func';
const obj = {
[dynamicName]() {
return 'Dynamic Function Name!';
}
};
console.log(obj.func()); // "Dynamic Function Name!"
25 — 私人班级场地
使用哈希#前缀定义类中的私有字段，这些字段不能从类外部访问。
class Counter {
#count = 0;
increment() {
this.#count++;
}
getCount() {
return this.#count;
}
}
包起来
当我们结束对 25 个高级 JavaScript 特性的探索时，JavaScript 的功能库既庞大又强大。
我们深入研究的每个功能都为解决编码难题开辟了新的途径，就像为我们的工具包添加了一个创新工具。
这不仅增强了我们创造性地、高效地制定解决方案的能力，也突显了 JavaScript 的动态多功能性。
这些高级功能凸显了持续学习在 Web 开发领域中的关键作用。
理解并运用这些细微差别，并将它们融入到我们的日常编码实践中，可以让我们提升技能，并为网络技术的演进做出贡献。
记住，掌握 JavaScript是一个持续的过程，每一行代码都蕴藏着发现非凡事物的机会。
让我们不断突破 JavaScript 的极限，保持好奇心，对未来无限的可能性持开放态度。
支持我们的技术洞察
注：本页面上的部分链接可能是联盟链接。如果您通过这些链接购买商品，我可能会获得少量佣金，而您无需支付任何额外费用。感谢您的支持！
文章来源：https://dev.to/mainulspace/25-unnoticeable-features-of-javascript-15l1