Javascript中常见的坑有哪些?

本文和大家分享的主要是javascript 开发中常见的一些陷进,这些陷进你遇到过吗?一起来看看吧,希望对大家 学习javascript有所帮助。

1. 你是否尝试过对数组元素进行排序?

JavaScript 默认使用字典序 (alphanumeric) 来排序。因此,  [1,2,5,10].sort()  的结果是  [1, 10, 2, 5]  。

如果你想正确的排序,应该这样做:  [1,2,5,10].sort((a, b) => a - b)

2. new Date() 十分好用

new Date()  可以接收:

-  不接收任何参数:返回当前时间; -  接收一个参数 `x`:  返回 1970 年 1 月 1 日  + `x` 毫秒的值。 - `new Date(1, 1, 1)` 返回 1901 年 2 月 1 号。 - 然而 .... , `new Date(2016, 1, 1)` 不会在 1900 年的基础上加 2016,而只是表示 2016 年。

3. 替换函数没有真的替换?

let s = "bob" const replaced = s.replace(’b’, ’l’)

replaced === "lob" //  只会替换掉第一个 b

s === "bob" //  并且 s 的值不会变

如果你想把所有的b 都替换掉,要使用正则:

"bob".replace(/b/g, ’l’) === ’lol’

4. 谨慎对待比较运算

//  这些可以 ’abc’ === ’abc’ // true1 === 1 // true

//  然而这些不行

[1,2,3] === [1,2,3] // false

{a: 1} === {a: 1} // false

{} === {} // false

因为[1,2,3] 和 [1,2,3] 是两个不同的数组,只是它们的元素碰巧相同。因此,不能简单的通过 `===` 来判断。

5. 数组不是基础类型

typeof {} === ’object’ // true typeof ’a’ === ’string’ // true typeof 1 === number // true//  但是 .... typeof [] === ’object’ // true

如果要判断一个变量`var` 是否是数组,你需要使用 `Array.isArray(var)` 。

6. 闭包

这是一个经典的JavaScript 面试题:

const Greeters = [] for ( var i = 0 ; i < 10 ; i++) {

Greeters.push( function (){  return console.log(i) })

}

Greeters[0]() // 10

Greeters[1]() // 10

Greeters[2]() // 10

虽然期望输出0,1,2,... ,然而实际上却不会。知道如何 Debug 嘛? 有两种方法:  -  使用 `let` 而不是`var` 。备注:可以参考 Fundebug 的另一篇博客 [ES6 之 "let" 能替代 "var" 吗 ?](https://blog.fundebug.com/2017/05/04/why-you-should-not-use-var/) -  使用 `bind` 函数。备注:可以参考Fundebug 的另一篇博客 [JavaScript 初学者必看 “this”](https://blog.fundebug.com/2017/05/17/javascript-this-for-beginners/)

Greeters.push( console.log.bind( null,  i))

当然,还有很多解法。这两种是我最喜欢的!

7. 关于 bind

下面这段代码会输出什么结果?

class  Foo{

constructor (name) {

this.name = name

}

greet () {

console.log(’hello, this is ’,  this.name)

}

someThingAsync () {

return Promise.resolve()

}

asyncGreet () {

this.someThingAsync()

.then( this.greet)

}

}

new Foo(’dog’).asyncGreet()

如果你说程序会崩溃,并且报错:Cannot read property ’name’ of undefined 。 因为第 16 行的 `geet` 没有在正确的环境下执行。当然,也有很多方法解决这个 BUG !  -  我喜欢使用 `bind` 函数来解决问题:

asyncGreet () {

this.someThingAsync()

.then( this.greet.bind( this))

}

这样会确保`greet` 会被 Foo 的实例调用,而不是局部的函数的 `this` 。  -  如果你想要 `greet` 永远不会绑定到错误的作用域,你可以在构造函数里面使用 `bind` 来绑定。

class  Foo{

constructor (name) {

this.name = name

this.greet =  this.greet.bind( this)

}

}

-  你也可以使用箭头函数 (=>) 来防止作用域被修改。备注:可以参考 Fundebug 的另一篇博客[JavaScript 初学者必看 “ 箭头函数 ”](https://blog.fundebug.com/2017/05/25/arrow-function-for-beginner/) 。

asyncGreet () {

this.someThingAsync()

. then(() => {

this.greet()

})

}

8. Math.min()比Math.max()大

Math.min() < Math.max() // false

因为Math.min()  返回  Infinity,  而  Math.max() 返回  -Infinity 。

来源:Fundebug 博客

时间: 2024-10-02 22:44:51

Javascript中常见的坑有哪些?的相关文章

JavaScript中常见的数组操作函数及用法

昨天写了个帖子,汇总了下常见的JavaScript中的字符串操作函数及用法.今天正好有时间,也去把JavaScript中常见的数组操作函数及用法总结一下,这样方便大家准备参考.如果恰好你也在准备各种笔试,希望对你有所帮助.同时,也欢迎补充. 1.数组创建 创建数组应该是最简单的了,有用数组字面量创建和数组构造函数两种方法,见下: var array1 = new Array(); var array2 = []; 上面是创建数组的最常见的两种方法,其中第二种方法因为简单直观而被开发者推崇.其中,

javascript中所谓的“坑”收录

坑一: // 反例myname = "global"; // 全局变量function func() { alert(myname); // "undefined" var myname = "local"; alert(myname); // "local"}func(); 理解:JavaScript中,你可以在函数的任何位置声明多个var语句,并且它们就好像是在函数顶部声明一样发挥作用,这种行为称为 hoisting(悬置

Javascript中常见的10大面试题及答案

在IT界中,JavaScript开发人员的需求量一直居高不下.如果你的能力能够胜任这一角色,那么你有很多机会换一家公司,并提高薪水.但在你被一家公司聘用之前,你必须展示你的技能,以通过面试环节.在本文中,我将向您展示10个 JavaScript 技能典型问题以及其相关解决方案,来面试前端工程师.它们很有意思! 问题1: 作用域(Scope) 考虑以下代码: (function() { var a = b = 5; })(); console.log(b); 控制台(console)会打印出什么?

JavaScript中常见的十五种设计模式

在程序设计中有很多实用的设计模式,而其中大部分语言的实现都是基于“类”. 在JavaScript中并没有类这种概念,JS中的函数属于一等对象,在JS中定义一个对象非常简单(var obj = {}),而基于JS中闭包与弱类型等特性,在实现一些设计模式的方式上与众不同. 本文基于<JavaScript设计模式与开发实践>一书,用一些例子总结一下JS常见的设计模式与实现方法.文章略长,自备瓜子板凳~ 设计原则 单一职责原则(SRP) 一个对象或方法只做一件事情.如果一个方法承担了过多的职责,那么在

javascript中常见的几种循环遍历

项目开发中,不管是建立在哪个框架基础上,对数据的处理都是必须的,而处理数据离不开各种遍历循环.javascript中循环遍历有很多种方式,记录下几种常见的js循环遍历. 一.for循环 for循环应该是最普遍的,使用最多的一种循环遍历方法了,所以也导致其可读性和易维护性比较差,但是它可以及时break出循环. let arr = [1,2,3,4,5,6,7] for(let i = 0;i<arr.length;i++){ console.log(arr[i]) } // 1,2,3,4,5,

JavaScript中常见的输出方式

Javascript中有三种常见的输出方式: 1,通过弹窗的形式来输出,其中又分为三种,它们之间存在着一些细微的区别: 1.1,alert(需要输出的内容); 例如:alert("Hello World"); 1.2,confirm("需要输出的内容"); 例如:confirm("Hello CTl !"); 1.3,prompt("需要输出的内容"); 例如:prompt("Hello China!"):

JavaScript中常见的字符串操作函数及用法汇总

1.字符串转换 字符串转换是最基础的要求和工作,你可以将任何类型的数据都转换为字符串,你可以用下面三种方法的任何一种: ? 1 2 var num= 19; // 19 var myStr = num.toString(); // "19" 你同样可以这么做: ? 1 2 var num= 19; // 19 var myStr = String(num); // "19" 或者,再简单点儿: ? 1 2 var num= 19; // 19 var myStr =

javascript中常见undefined与defined的区别

在JavaScript中相信"undefined"与"defined"对大家来说都肯定不陌生,但是又不是很清楚它们的区别,先看两个demo我们再说, 例1. console.log(parms); //在控制台出现 Uncaught ReferenceError: parms is not defined 例2. var flag; console.log(flag); //在控制台出现 undefined 通过上面两个例子就能很清楚的看出它两的区别了,not de

javascript中常见错误类型

js中控制台报错主分两大类: 第一类:语法错误,这一类错误在javascript预解析的过程中如果遇到,则会导致整个js文件都无法执行. 另一类:统称为异常,这一类的错误会导致在错误出现的那一行之后的代码无法执行,但注意,在那一行之前的代码是不会受到影响的. 注意:以下的6种错误中,都可以按照3个参数来查找错误: 第一个参数message:表示错误提示信息,第二个fileName文件名,第三个lineNumber行号. 1. SyntaxError(语法错误): 2. Uncaught Refe