JavaScript中8個常見的陷阱

doodlewind 發(fā)布于2019-08-21 11:46 / 690人閱讀

摘要：然而，不會在年的基礎上加，而只是表示年。閉包這是一個經(jīng)典的面試題雖然期望輸出，然而實際上卻不會。因為第行的沒有在正確的環(huán)境下執(zhí)行。

譯者按: 漫漫編程路，總有一些坑讓你淚流滿面。

原文: Who said javascript was easy ?

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用于學習。

這里我們針對JavaScript初學者給出一些技巧和列出一些陷阱。如果你已經(jīng)是一個磚家，也可以讀一讀。

1. 你是否嘗試過對數(shù)組元素進行排序？

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()的使用方法有：

不接收任何參數(shù)：返回當前時間；

接收一個參數(shù)x: 返回1970年1月1日 + x毫秒的值。

new Date(1, 1, 1)返回1901年2月1號。

然而....，new Date(2016, 1, 1)不會在1900年的基礎上加2016，而只是表示2016年。

3. 替換函數(shù)沒有真的替換？

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" // true
1 === 1         // true
// 然而這些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

因為[1,2,3]和[1,2,3]是兩個不同的數(shù)組，只是它們的元素碰巧相同。因此，不能簡單的通過===來判斷。

5. 數(shù)組不是基礎類型

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

如果要判斷一個變量var是否是數(shù)組，你需要使用Array.isArray(var)。

6. 閉包

這是一個經(jīng)典的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"嗎?

使用bind函數(shù)。備注：可以參考Fundebug的另一篇博客 JavaScript初學者必看“this”

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沒有在正確的環(huán)境下執(zhí)行。當然，也有很多方法解決這個BUG！

我喜歡使用bind函數(shù)來解決問題：

asyncGreet () {
  this.someThingAsync()
  .then(this.greet.bind(this))
}

這樣會確保greet會被Foo的實例調(diào)用，而不是局部的函數(shù)的this。

如果你想要greet永遠不會綁定到錯誤的作用域，你可以在構造函數(shù)里面使用bind來綁。

class Foo {
  constructor (name) {
    this.name = name
    this.greet = this.greet.bind(this)
  }
}

你也可以使用箭頭函數(shù)(=>)來防止作用域被修改。備注：可以參考Fundebug的另一篇博客 JavaScript初學者必看“箭頭函數(shù)”。

asyncGreet () {
  this.someThingAsync()
  .then(() => {
    this.greet()
  })
}

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

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

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

歡迎加入我們Fundebug的全棧BUG監(jiān)控交流群: 622902485。

版權聲明:
轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/06/28/who-said-js-was-easy/

云服務器 GPU云服務器致命的8個問題 javascript陷阱 js輸出8個不同的數(shù) 支持8個gpu的服務器

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/87089.html

JavaScript中的this陷阱的最全收集--沒有之一

摘要：提及的精髓，閉包作用域鏈函數(shù)是當之無愧的。博客的標題是中的陷阱的最全收集沒有之一，很顯然這篇博客闡述的是。這是造成很多不熟悉的人深陷陷阱的根源。你應該避免在構造函數(shù)里面返回任何東西，因為這可能代當有人問起你JavaScript有什么特點的時候，你可能立馬就想到了單線程、事件驅(qū)動、面向?qū)ο蟮纫欢言~語，但是如果真的讓你解釋一下這些概念，可能真解釋不清楚。有句話這么說：如果你不能向一個6歲...

KitorinZero 2019-08-21 10:28 評論0 收藏0
前端面試題收集，持續(xù)更新中

摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內(nèi)核有哪些？介紹一下你對瀏覽器內(nèi)核的理解？...

kgbook 2019-08-22 16:49 評論0 收藏0
前端面試題收集，持續(xù)更新中

摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內(nèi)核有哪些？介紹一下你對瀏覽器內(nèi)核的理解？...

2json 2019-08-29 15:12 評論0 收藏0
前端面試題收集，持續(xù)更新中

摘要：對于所訪問的每個元素，函數(shù)應該將該元素傳遞給所提供的回調(diào)函數(shù)。 HTML 在線閱讀Github地址題目列表 HTML HTML和XHTML的區(qū)別 Html的語義化 Doctype的文檔類型 cookie、sessionSttorage、localStory區(qū)別 HTML全局屬性(global attribute)有哪些？常見的瀏覽器內(nèi)核有哪些？介紹一下你對瀏覽器內(nèi)核的理解？...

adam1q84 2019-08-02 10:17 評論0 收藏0
常見的JavaScript“陷阱”

摘要：隨著標準的普及，已經(jīng)擁有許多新的語法糖，這讓我們編寫可讀的，高質(zhì)量的代碼變得更加方便，但即使這樣仍然會遇到一些潛在的陷阱。例如集合的最終長度是，由于兩次添加的數(shù)組不是同一個。最終會得到大小為的集合，因為字符串是不可變。 showImg(https://segmentfault.com/img/remote/1460000019006033); 隨著ES6標準的普及，JavaScript...

greatwhole 2019-08-23 17:10 評論0 收藏0