Deprecated: Function create_function() is deprecated in /www/wwwroot/www.woniu.wang/usr/plugins/AntiSpam/Plugin.php on line 75
您可能从未使用过的鲜为人知的 Javascript 功能 - 蜗牛工作室_刘永个人博客

您可能从未使用过的鲜为人知的 Javascript 功能

发布于 / 知识文档 / 0条评论 / Tags: 敏感数据,键值对,技能提升 / 5 次浏览

  您可能从未使用过的鲜为人知的 Javascript 功能

  解释鲜为人知_鲜为人知使用错误_

  您可能从未使用过的鲜为人知的 javascript 功能

  阅读原始网址 https://devaradise.com/lesser-known-javascript-features 中的帖子以获得更好的导航

  javascript 是现代 web 开发的基石,为动态网站和应用程序提供动力。虽然许多开发人员熟悉 javascript 的基本且广泛使用的功能,但许多隐藏功能常常被忽视。这些鲜为人知的功能可以让你的代码更加简洁、可读、强大。

  在本文中,我们将探索一些隐藏的 javascript 功能。从空合并运算符到 map 和 set 对象,每个功能都包含实际示例和最佳实践。利用这些功能可以帮助您编写更清晰、更高效的代码并轻松解决复杂的问题。

  无论您是经验丰富的开发人员还是初学者,本文都将向您介绍未充分利用的 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(logwithtimestampuser ${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  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 运算符检查对象中是否存在属性。

  代码示例:

  

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  {
console.log(value);

});
// Outputs:
// 'apple'
// 'banana'

  登录后复制

  使用map来集合任意数据类型作为键的键值对集合,使用set来集合唯一值,提供高效的数据管理方式。

  结论

  通过利用这些鲜为人知的 javascript 功能,您可以编写更高效、可读且健壮的代码。开始将这些技术集成到您的项目中,将您的 javascript 到一个新的水平。

  我们希望本指南为您提供有价值的见解和实际示例,以帮助您利用这些隐藏的 javascript 功能。不要犹豫,尝试一下它们,看看它们如何适合您的编码实践。

  如果您觉得这篇文章有帮助,请与您的开发人员和朋友分享。我很想听听您对这些功能的想法和体验,所以请随时在下面发表评论。

  谢谢。快乐编码!

  以上就是您可能从未使用过的鲜为人知的 Javascript 功能的详细内容,更多请关注php中文网其它相关文章!

  最佳 Windows 性能的顶级免费优化软件

  最佳 Windows 性能的顶级免费优化软件

  每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

  下载

    评论区(暂无评论)