這篇文章給大家分享的是有關JavaScript中常見的八個陷阱是什么的內容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
公司主營業(yè)務:做網(wǎng)站、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化,感謝他們對我們的高要求,感謝他們從不同領域給我們帶來的挑戰(zhàn),讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出嘉陵免費做網(wǎ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`。 (備注:可以參考這篇文章 https://www.jb51.net/article/117343.htm)
- 使用`bind`函數(shù)。(備注:可以參考這篇文章 https://www.jb51.net/article/115323.htm)
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的實例調用,而不是局部的函數(shù)的`this`。
- 如果你想要`greet`永遠不會綁定到錯誤的作用域,你可以在構造函數(shù)里面使用`bind`來綁定。
class Foo { constructor (name) { this.name = name this.greet = this.greet.bind(this) } }
- 你也可以使用箭頭函數(shù)(=>)來防止作用域被修改。 (備注:可以參考這篇文章 https://www.jb51.net/article/115318.htm)
asyncGreet () { this.someThingAsync() .then(() => { this.greet() }) }
8. Math.min()比Math.max()大
Math.min() < Math.max() // false
因為Math.min()
返回 Infinity, 而 Math.max()
返回 -Infinity。
感謝各位的閱讀!關于“JavaScript中常見的八個陷阱是什么”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!