阅读原始网址 https://devaradise.com/lesser-known-javascript-features 中的帖子以获得更好的导航
javascript 是现代 web 开发的基石，为动态网站和应用程序提供动力。虽然许多开发人员熟悉 javascript 的基本且广泛使用的功能，但许多隐藏功能常常被忽视。这些鲜为人知的功能可以让你的代码更加简洁、可读、强大。
在本文中，我们将探索一些隐藏的 javascript 功能。从空合并运算符到 map 和 set 对象，每个功能都包含实际示例和最佳实践。利用这些功能可以帮助您编写更清晰、更高效的代码并轻松解决复杂的问题。
无论您是经验丰富的开发人员还是初学者，本文都将向您介绍未充分利用的 javascript 功能。最后，您将掌握新技术来提高您的 javascript 编码技能。
立即学习“Java免费学习笔记（深入）”；
关于 javascript 的其他帖子
- javascript 数组/对象解构解释 + 示例
- 在 javascript 中克隆嵌套对象/数组（深度克隆）的正确方法
鲜为人知的 javascript 功能
1. 空值合并运算符
空合并运算符 (??) 用于在变量为 null 或未定义时提供默认值。
代码示例：
let foo = null; let bar = foo ?? 'default value'; console.log(bar); // output: 'default value'
使用空值合并运算符来处理可能出现 null 或未定义值的情况，确保您的代码使用默认值顺利运行。
2. 可选链接
可选的链接运算符 (?.) 允许安全访问深层嵌套的对象属性，避免属性不存在时出现运行时错误。
代码示例：
const user = {
profile: {
name: 'alice'
}
};
const userprofilename = user.profile?.name;
console.log(userprofilename); // output: 'alice'
const useraccountname = user.account?.name;
console.log(useraccountname); // output: undefined
使用可选链来避免访问可能为空或未定义对象的属性时出现错误，使您的代码更加健壮。
3. 数字分隔符
数字分隔符 (_) 通过视觉上分隔数字，使大数字更易于阅读。
代码示例：
const largenumber = 1_000_000; console.log(largenumber); // output: 1000000
使用数字分隔符可以提高代码中大数字的可读性，特别是对于财务计算或大型数据集。
4. promise.allsettled
promise.allsettled 等待所有承诺解决（履行或拒绝）并返回描述结果的对象数组。
代码示例：
const promises = [promise.resolve('success'), promise.reject('error'), promise.resolve('another success')];
promise.allsettled(promises).then((results) => {
results.foreach((result) => console.log(result));
});
// output:
// { status: 'fulfilled', value: 'success' }
// { status: 'rejected', reason: 'error' }
// { status: 'fulfilled', value: 'another success' }
当您需要处理多个 promise 并希望确保所有结果都得到处理时，无论单个 promise 结果如何，请使用 promise.allsettled。
5. 私有类字段
私有类字段是只能在声明的类中访问和修改的属性。
代码示例：
class myclass {
#privatefield = 42;
getprivatefield() {
return this.#privatefield;
}
}
const instance = new myclass();
console.log(instance.getprivatefield()); // output: 42
console.log(instance.#privatefield); // uncaught private name #privatefield is not defined.
使用私有类字段将数据封装在类内，确保敏感数据不会在类外暴露或修改。
6. 逻辑赋值运算符
逻辑赋值运算符（&&=、||=、??=）将逻辑运算符与赋值相结合，提供了一种根据条件更新变量的简洁方法。
代码示例：
let a = true; let b = false; a &&= 'assigned if true'; b ||= 'assigned if false'; console.log(a); // output: 'assigned if true' console.log(b); // output: 'assigned if false'
使用逻辑赋值运算符来简化条件赋值，使您的代码更具可读性和简洁性。
7. 循环和块语句的标签
标签是后跟冒号的标识符，用于标记循环或块以供在 break 或 continue 语句中引用。
代码示例：
outerloop: for (let i = 0; i < 3; i++) {
console.log(`outer loop iteration ${i}`);
for (let j = 0; j < 3; j++) {
if (j === 1) {
break outerloop; // break out of the outer loop
}
console.log(` inner loop iteration ${j}`);
}
}
// output:
// outer loop iteration 0
// inner loop iteration 0
labelblock: {
console.log('this will be printed');
if (true) {
break labelblock; // exit the block
}
console.log('this will not be printed');
}
// output:
// this will be printed
使用标签来控制复杂的循环行为，可以更轻松地管理嵌套循环并提高代码清晰度。
8. 标记模板文字
标记模板文字允许您使用函数解析模板文字，从而实现字符串文字的自定义处理。
代码示例1：
function logwithtimestamp(strings, ...values) {
const timestamp = new date().toisostring();
return (
`[${timestamp}] ` +
strings.reduce((result, str, i) => {
return result + str + (values[i] || '');
})
);
}
const user = 'johndoe';
const action = 'logged in';
console.log(logwithtimestamp`user ${user} has ${action}.`);
// outputs: [2024-07-10t12:34:56.789z] user johndoe has logged in.
代码示例2：
function validate(strings, ...values) {
values.foreach((value, index) => {
if (typeof value !== 'string') {
throw new error(`invalid input at position ${index + 1}: expected a string`);
}
});
return strings.reduce((result, str, i) => {
return result + str + (values[i] || '');
});
}
try {
const validstring = validate`name: ${'alice'}, age: ${25}`;
console.log(validstring); // this will throw an error
} catch (error) {
console.error(error.message); // outputs: invalid input at position 2: expected a string
}
使用标记模板文字进行高级字符串处理，例如创建安全的 html 模板或本地化字符串。
9. 用于快速数学的按位运算符
javascript 中的位运算符对数字的二进制表示形式执行运算。它们通常用于低级编程任务，但它们也可以方便地进行快速数学运算。
按位运算符列表
- &（和）
- | （或）
- ^（异或）
- 〜（不是）
- >> (右移)
- >>> (无符号右移)
代码示例1：
您可以使用 and 运算符来检查数字是偶数还是奇数。
const iseven = (num) => (num & 1) === 0; const isodd = (num) => (num & 1) === 1; console.log(iseven(4)); // outputs: true console.log(isodd(5)); // outputs: true
代码示例2：
可以使用左移（>）运算符分别乘以2的幂和除以2的幂。
const multiplybytwo = (num) => num << 1; const dividebytwo = (num) => num >> 1; console.log(multiplybytwo(5)); // outputs: 10 console.log(dividebytwo(10)); // outputs: 5
代码示例3：
您可以使用 and 运算符检查数字是否为 2 的幂。
const ispoweroftwo = (num) => num > 0 && (num & (num - 1)) === 0; console.log(ispoweroftwo(16)); // outputs: true console.log(ispoweroftwo(18)); // outputs: false
将按位运算符用于需要低级二进制操作的性能关键型应用程序，或进行快速数学运算。
10. 财产检查操作员
in 运算符检查对象中是否存在属性。
一套自选网上商城精美模版，自主商品管理，自行网店经营的网上商城平台，系统具有强大的商品管理、购物车、订单统计、会员管理等功能，同时拥有灵活多变的商品管理、新闻管理等功能，功能强劲的后台管理界面，无需登录FTP，通过IE浏览器即可管理整个网站。西亚购物平台经多方面权威调查和研究为您精心开发了很多特色实用功能。使商品展示、管理、服务全面升级。西亚购物平台为您提供了多款专业美观的店面样式、俱备完整的购物
代码示例：
const obj = { name: 'alice', age: 25 };
console.log('name' in obj); // output: true
console.log('height' in obj); // output: false
使用 in 运算符来验证对象中属性是否存在，确保您的代码能够优雅地处理缺少属性的对象。
11. 调试器语句
调试器语句调用任何可用的调试功能，例如在代码中设置断点。
代码示例：
function checkvalue(value) {
debugger; // execution will pause here if a debugger is available
return value > 10;
}
checkvalue(15);
在开发过程中使用调试器语句来暂停执行并检查代码行为，帮助您更有效地识别和修复错误。
12. 链式赋值
链式赋值允许您在单个语句中将单个值分配给多个变量。
代码示例：
let a, b, c; a = b = c = 10; console.log(a, b, c); // output: 10 10 10
使用链式赋值来初始化具有相同值的多个变量，减少代码冗余。
13. 动态函数名称
动态函数名称允许您使用在运行时计算的名称来定义函数。
代码示例：
const funcname = 'dynamicfunction';
const obj = {
[funcname]() {
return 'this is a dynamic function';
}
};
console.log(obj.dynamicfunction()); // output: 'this is a dynamic function'
使用动态函数名称，根据运行时数据创建名称的函数，增强代码灵活性和可重用性。
14. 获取函数参数
arguments 对象是一个类似数组的对象，其中包含传递给函数的参数。
代码示例：
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3)); // outputs: 6
使用参数对象来访问传递给函数的所有参数，这对于具有可变长度参数的函数很有用。
15. 一元+运算符
一元运算符 (+) 将其操作数转换为数字。
代码示例：
console.log(+'abc'); // outputs: nan console.log(+'123'); // outputs: 123 console.log(+'45.67'); // outputs: 45.67 (converted to a number) console.log(+true); // outputs: 1 console.log(+false); // outputs: 0 console.log(+null); // outputs: 0 console.log(+undefined); // outputs: nan
使用一元运算符进行快速类型转换，尤其是在处理用户输入或来自外部源的数据时。
16. 求幂 ** 运算符
求幂运算符 (**) 对其操作数执行求幂（幂）操作。
代码示例：
const base = 2; const exponent = 3; const result = base ** exponent; console.log(result); // output: 8
使用幂运算符进行涉及幂的简洁易读的数学表达式，例如在科学或金融计算中。
17. 函数属性
javascript 中的函数是对象并且可以具有属性。
代码示例1：
function myfunction() {}
myfunction.description = 'this is a function with a property';
console.log(myfunction.description); // output: 'this is a function with a property'
代码示例2：
function trackcount() {
if (!trackcount.count) {
trackcount.count = 0;
}
trackcount.count++;
console.log(`function called ${trackcount.count} times.`);
}
trackcount(); // outputs: function called 1 times.
trackcount(); // outputs: function called 2 times.
trackcount(); // outputs: function called 3 times.
使用函数属性来存储与函数相关的元数据或配置，增强代码的灵活性和组织性。
18. 对象获取器和设置器
getter 和 setter 是获取或设置对象属性值的方法。
代码示例：
const obj = {
firstname: 'john',
lastname: 'doe',
_age: 0, // conventionally use an underscore for the backing property
get fullname() {
return `${this.firstname} ${this.lastname}`;
},
set age(newage) {
if (newage >= 0 && newage <= 120) {
this._age = newage;
} else {
console.log('invalid age assignment');
}
},
get age() {
return this._age;
}
};
console.log(obj.fullname); // outputs: 'john doe'
obj.age = 30; // setting the age using the setter
console.log(obj.age); // outputs: 30
obj.age = 150; // attempting to set an invalid age
// outputs: 'invalid age assignment'
console.log(obj.age); // still outputs: 30 (previous valid value remains)
使用 getter 和 setter 来封装对象的内部状态，提供一种受控的方式来访问和修改属性。
19.!!棒棒操作员
那个！！ （双重否定）运算符将值转换为其布尔值。
代码示例：
const value = 'abc'; const value1 = 42; const value2 = ''; const value3 = null; const value4 = undefined; const value5 = 0; console.log(!!value); // outputs: true (truthy value) console.log(!!value1); // outputs: true (truthy value) console.log(!!value2); // outputs: false (falsy value) console.log(!!value3); // outputs: false (falsy value) console.log(!!value4); // outputs: false (falsy value) console.log(!!value5); // outputs: false (falsy value)
使用！！运算符可快速将值转换为布尔值，在条件表达式中很有用。
20.映射和设置对象
map 和 set 是具有独特功能的集合。 map 保存键值对，set 保存唯一值。
代码示例1：
// creating a map
const mymap = new map();
// setting key-value pairs
mymap.set('key1', 'value1');
mymap.set(1, 'value2');
mymap.set({}, 'value3');
// getting values from a map
console.log(mymap.get('key1')); // outputs: 'value1'
console.log(mymap.get(1)); // outputs: 'value2'
console.log(mymap.get({})); // outputs: undefined (different object reference)
代码示例2：
// Creating a Set
const mySet = new Set();
// Adding values to a Set
mySet.add('apple');
mySet.add('banana');
mySet.add('apple'); // Duplicate value, ignored in a Set
// Checking size and values
console.log(mySet.size); // Outputs: 2 (only unique values)
console.log(mySet.has('banana')); // Outputs: true
// Iterating over a Set
mySet.forEach((value) => {
console.log(value);
});
// Outputs:
// 'apple'
// 'banana'
使用map来集合任意数据类型作为键的键值对集合，使用set来集合唯一值，提供高效的数据管理方式。
结论
通过利用这些鲜为人知的 javascript 功能，您可以编写更高效、可读且健壮的代码。开始将这些技术集成到您的项目中，将您的 javascript 技能提升到一个新的水平。
我们希望本指南为您提供有价值的见解和实际示例，以帮助您利用这些隐藏的 javascript 功能。不要犹豫，尝试一下它们，看看它们如何适合您的编码实践。
如果您觉得这篇文章有帮助，请与您的开发人员和朋友分享。我很想听听您对这些功能的想法和体验，所以请随时在下面发表评论。
谢谢。快乐编码！
