国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript中8個(gè)常見的陷阱

doodlewind / 618人閱讀

摘要：然而，不會(huì)在年的基礎(chǔ)上加，而只是表示年。閉包這是一個(gè)經(jīng)典的面試題雖然期望輸出，然而實(shí)際上卻不會(huì)。因?yàn)榈谛械臎]有在正確的環(huán)境下執(zhí)行。

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

原文: Who said javascript was easy ?

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

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

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

JavaScript默認(rèn)使用字典序(alphanumeric)來排序。因此，[1,2,5,10].sort()的結(jié)果是[1, 10, 2, 5]。

如果你想正確的排序，應(yīng)該這樣做：[1,2,5,10].sort((a, b) => a - b)

2. new Date() 十分好用

new Date()的使用方法有：

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

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

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

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

3. 替換函數(shù)沒有真的替換？ 
let s = "bob"
const replaced = s.replace("b", "l")
replaced === "lob" // 只會(huì)替換掉第一個(gè)b
s === "bob" // 并且s的值不會(huì)變

如果你想把所有的b都替換掉，要使用正則：

"bob".replace(/b/g, "l") === "lol"
4. 謹(jǐn)慎對(duì)待比較運(yùn)算 
// 這些可以
"abc" === "abc" // true
1 === 1         // true
// 然而這些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false

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

5. 數(shù)組不是基礎(chǔ)類型 
typeof {} === "object"  // true
typeof "a" === "string" // true
typeof 1 === number     // true
// 但是....
typeof [] === "object"  // true

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

6. 閉包

這是一個(gè)經(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,...，然而實(shí)際上卻不會(huì)。知道如何Debug嘛？
有兩種方法：

使用let而不是var。備注：可以參考Fundebug的另一篇博客 ES6之"let"能替代"var"嗎?

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

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

當(dāng)然，還有很多解法。這兩種是我最喜歡的！

7. 關(guān)于bind

下面這段代碼會(huì)輸出什么結(jié)果？

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()

如果你說程序會(huì)崩潰，并且報(bào)錯(cuò)：Cannot read property "name" of undefined。
因?yàn)榈?6行的geet沒有在正確的環(huán)境下執(zhí)行。當(dāng)然，也有很多方法解決這個(gè)BUG！

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

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

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

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

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

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

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

8. Math.min()比Math.max()大 
Math.min() < Math.max() // false

因?yàn)镸ath.min() 返回 Infinity, 而 Math.max()返回 -Infinity。

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/87089.html

相關(guān)文章

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

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

    KitorinZero 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

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

    kgbook 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

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

    2json 評(píng)論0 收藏0

  • 前端面試題收集，持續(xù)更新中

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

    adam1q84 評(píng)論0 收藏0

  • 常見的JavaScript“陷阱”

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

    greatwhole 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<