您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

十个有用 JavaScript 小技巧

时间:2023-01-28 14:21:00  来源:  作者:前端达人

您可能已经知道 JAVAScript 是世界上使用最广泛的编程语言。它用于 Web、移动混合应用程序、服务器端 (NodeJS) 和各种其他应用程序。由于它可用于在 Web 浏览器中显示以及使用 nodebot 或其他智能交互机器人,因此它可以作为许多新开发人员的编程入门。在就业市场上,精通 JavaScript 并能编写干净、高效代码的开发人员需求量很大。

无论使用何种浏览器/引擎或 SSJS(Server Side JavaScript)解释器,所有 JavaScript 开发人员都应该熟悉我将在本文中分享的提示、技巧和最佳实践。

一直使用 === 替代 ==

如有必要,使用 ==(或!=)运算符自动执行类型转换。使用 ===(或 !==)运算符时不会进行转换。有人可能会争辩说它比较值和类型比 == 更快。

[5] === 5   // is false
[5]  == 5    // is true
'5' == 5     // is true
'5' === 5    // is false
 []   == 0     // is true
 [] ===  0     // is false
 '' == false   // is true but true == "a" is false
 '' ===   false // is false

第一次声明变量的值时,尽量避免使用 var 关键字

全局变量在分配给未声明的变量时自动声明。尽量防止使用全局变量。

使用 typeof、instanceof 和 constructor 时要小心。

typeof 操作符用于检测变量的数据类型,它返回一个字符串,表示变量的类型。它可以检测出所有类型,包括:

  • 基本类型(number, string, boolean, undefined)
  • 引用类型(object, function)
  • 如果要检测一个变量是否是基本类型,可以使用 typeof。
let x = 5;
console.log(typeof x); // "number"

instanceof 操作符用于检测一个对象是否是某个类的实例。它返回一个布尔值,表示对象是否是类的实例。它只能用于检测对象类型,因为基本类型没有构造函数。

let x = new Date();
console.log(x instanceof Date); // true

constructor 属性返回创建对象的构造函数。它也只能用于检测对象类型。

let x = new Date();
console.log(x.constructor === Date); // true

它们之间的区别就是 typeof 操作符用于检测类型,而 instanceof 和 constructor 都用于检测类。 instanceof 操作符检测对象是否是某个类的实例,而 constructor 检测对象是由哪个类创建的。

另外,typeof 可以检测出所有类型,而 instanceof 和 constructor 只能检测对象

还有一点值得注意的是,instanceof 操作符在检测继承关系时也是有效的。比如,如果一个类 B 继承自另一个类 A,那么一个 B 类的实例也是 A 类的实例。

class A {}
class B extends A {}
let x = new B();
console.log(x instanceof B); // true
console.log(x instanceof A); // true

而 constructor 属性则只能检测到对象是由哪个类直接创建的,并不能检测继承关系。

class A {}
class B extends A {}
let x = new B();
console.log(x.constructor === B); // true
console.log(x.constructor === A); // false

总结一下,typeof 操作符用于检测变量的类型,instanceof 操作符用于检测对象是否是某个类的实例,而 constructor 属性用于检测对象是由哪个类创建的。

typeof 和 instanceof 都只能检测对象类型,但instanceof 不能检测基本类型。 instanceof 可以检测继承关系,而 constructor 只能检测直接创建的关系。

False 值包括 undefined、null、0、false、NaN 和“(空字符串)。

创建自调用函数(IIFE)

自调用匿名函数或立即调用函数表达式是此 (IIFE) 的通用名称。它是以下形式的函数,在创建后立即运行:

(function(){
    // some private code to be executed automatically
})();  
(function(d,y){
    var result = d+y;
    return result;
})(20,20)

随机数字数组

var numbers = [6, 650, 140 , -225 , 233 , 500 , 152300, -81451];
numbers = numbers.sort(function(){ return Math.random() - 0.5});

验证给定的参数是一个数字

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

将 arguments 对象转换为数组

var argumentsArray = Array.prototype.slice.call(arguments);

清空数组

var newArray = [12 , 222 , 1000 ];  
newArray.length = 0; // newArray will be equal to [].

使用 map() 函数方法循环遍历数组的项目

var squares = [1,4,6,2].map(function (val) {  
    return val * val;  
}); 
// squares will be equal to [1, 16, 26, 4]

结束语

由于文章篇幅问题,今天的介绍就到这里 ,下一篇文章继续介绍剩下的10个小技巧,希望今天的分享对你有所帮助,感谢你的阅读,如果你喜欢我的分享,别忘了点赞转发,让更多的人看到,最后别忘记点个关注,你的支持将是我分享最大的动力,后续我会持续输出更多内容,敬请期待。

原文:
https://javascript.plAInenglish.io/my-20-most-useful-javascript-tips-tricks-and-best-practices-9ad8fe7f0c01

作者:Abdulazeez Sherif

非直接翻译,有自行改编和添加部分。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  Search: JavaScript  点击:(4)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  Search: JavaScript  点击:(25)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  Search: JavaScript  点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  Search: JavaScript  点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06  Search: JavaScript  点击:(52)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  Search: JavaScript  点击:(65)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11  Search: JavaScript  点击:(97)  评论:(0)  加入收藏
JavaScript前端框架2024年展望
Angular、Next.js、React和Solid的维护者和创作者们展望2024年,分享了他们计划中的改进。译自2024 Predictions by JavaScript Frontend Framework Maintainers,作者 Loraine...【详细内容】
2024-01-05  Search: JavaScript  点击:(89)  评论:(0)  加入收藏
JavaScript开发者转向Rust的原因?
JavaScript开发者转向Rust的原因可能有很多,这里列出一些可能的原因: 性能: Rust是一种编译型语言,其性能通常优于JavaScript等解释型语言。对于需要处理大量数据或需要高并发的...【详细内容】
2024-01-04  Search: JavaScript  点击:(96)  评论:(0)  加入收藏
▌简易百科推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(4)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(25)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(22)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(52)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(56)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(65)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11    CSDN  Tags:JavaScript   点击:(97)  评论:(0)  加入收藏
站内最新
站内热门
站内头条