服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JS小知识,分享十个有用 JavaScript 小技巧

JS小知识,分享十个有用 JavaScript 小技巧

2024-01-03 14:06前端达人 js教程

您可能已经知道 JavaScript 是世界上使用最广泛的编程语言。它用于 Web、移动混合应用程序、服务器端 (NodeJS) 和各种其他应用程序。由于它可用于在 Web 浏览器中显示以及使用 nodebot 或其他智能交互机器人,因此它可以作为许多新开

JS小知识,分享十个有用 JavaScript 小技巧

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

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

1、一直使用 === 替代 ==

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

[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

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

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

3、使用 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 只能检测直接创建的关系。

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

5、创建自调用函数(IIFE)

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

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

6、随机数字数组

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

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

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

8、将 arguments 对象转换为数组

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

9、清空数组

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

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

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

结束语

由于文章篇幅问题,今天的介绍就到这里。

原文地址:https://www.toutiao.com/article/7193645327080079928/

延伸 · 阅读

精彩推荐
  • js教程JS小知识,分享一些让我迷惑的前端面试题

    JS小知识,分享一些让我迷惑的前端面试题

    JavaScript 语言最神奇的地方总是让我感到惊讶,那就是它总是有些怪异的地方。无论您对它了解多少,您总能从中学到新的东西。 这些问题我收集了很长时...

    前端达人3992023-12-12
  • js教程关于Javascript闭包与应用的详解

    关于Javascript闭包与应用的详解

    这篇文章主要介绍了关于Javascript闭包与应用的详解,文中有非常详细的代码示例.对正在学习js的伙伴们有很好的帮助,需要的朋友可以参考下...

    Marshal_dj9302022-03-07
  • js教程微信小程序自定义tabbar组件

    微信小程序自定义tabbar组件

    这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    赵思远kelsty5982022-02-16
  • js教程js实现表格拖动选项

    js实现表格拖动选项

    这篇文章主要为大家详细介绍了原生js实现表格拖动选项,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    爱笑萌娃3912022-03-06
  • js教程使用AutoJs实现微信抢红包的代码

    使用AutoJs实现微信抢红包的代码

    这篇文章主要介绍了使用AutoJs实现微信抢红包的代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    王略7122021-12-23
  • js教程js的一些潜在规则示例分析

    js的一些潜在规则示例分析

    这篇文章主要为大家介绍了js的一些潜在规则示例分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...

    Spirited_Away5842023-05-29
  • js教程JS原生实现轮播图的几种方法

    JS原生实现轮播图的几种方法

    这篇文章主要介绍了JS原生实现轮播图的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下...

    IsPinocchio5792022-02-20
  • js教程javascript中layim之查找好友查找群组

    javascript中layim之查找好友查找群组

    这篇文章主要介绍了javascript中layim之查找好友查找群组,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    踮脚敲代码9322022-01-19