這里有一些 javascript初學(xué)者應(yīng)該知道的技巧和陷阱。如果你已經(jīng)是專家了，順便溫習(xí)一下。
Javascript也只不過(guò)是一種編程語(yǔ)言。如何可能出錯(cuò)嘛?
Javascript 的sort()函數(shù)在默認(rèn)情況下使用字母數(shù)字（字符串Unicode碼點(diǎn)）排序。
所以[1,2,5,10].sort()?會(huì)輸出?[1, 10, 2, 5].
立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；
要正確的排序一個(gè)數(shù)組, 你可以用?[1,2,5,10].sort((a, b) => a?—?b)
很簡(jiǎn)單的解決方案, 前提是你得知道有這么個(gè)坑
new Date()?可以接受：
- 沒(méi)有參數(shù)： 返回當(dāng)前時(shí)間
- 一個(gè)參數(shù)?x： 返回1970年1月1日 + x 毫秒。 了解 Unix 的人知道為什么。
- new Date(1, 1, 1) 返回 1901, 二月 , 1號(hào)/。因?yàn)椋谝粋€(gè)參數(shù)表示1900年加1年，第二個(gè)參數(shù)表示這一年的第二個(gè)月（因此是二月）?—?腦回路正常的人會(huì)從1開(kāi)始索引?—?，第三個(gè)參數(shù)很明顯是這個(gè)月的第一天，所以1?—?有時(shí)候索引確實(shí)從1開(kāi)始?—?。
- new Date(2016, 1, 1) 不會(huì)給1900年加上2016。它僅代表2016年。
let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob"
s === "bob"
我覺(jué)得這是一件好事，因?yàn)槲也幌矚g函數(shù)改變它們的輸入。 你還應(yīng)該知道?replace?只會(huì)替換第一個(gè)匹配的字符串:
如果你想替換所有匹配的字符串，你可以使用帶/g標(biāo)志的正則表達(dá)式 :
"bob".replace(/b/g, 'l') === 'lol' // 替換所有匹配的字符串
// These are ok
'abc' === 'abc' // true
1 === 1 // true
// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false
原因：[1,2,3]和[1,2,3]是兩個(gè)獨(dú)立的數(shù)組。它們只是恰好包含相同的值。它們具有不同的引用，無(wú)法用===相比較。
typeof {} === 'object' // true
typeof 'a' === 'string' // true
typeof 1 === number // true
// But....
typeof [] === 'object' // true
如果你想知道你的變量是不是數(shù)組，你仍然可以用Array.isArray(myVar)
這是一個(gè)很有名的面試題：
const Greeters = [] for (var i = 0 ; i <p>你是不是認(rèn)為它會(huì)輸出 0, 1, 2… ？ 你知道它為什么不是這樣輸出的嗎? 你會(huì)怎樣修改讓它輸出 0, 1, 2… ？</p> <p>這里有兩種可能的解決方法：</p> <p>用?<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">let</span>?替代?<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">var</span>. Boom. 解決了.</p> <p><span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">let</span>和<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">var</span>的不同在于<a style="color:#f60; text-decoration:underline;" target="_blank">作用域</a>。<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">var</span>的作用域是最近的函數(shù)塊，<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">let</span>的作用域是最近的封閉塊，封閉塊可以小于函數(shù)塊（如果不在任何塊中，則<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">let</span>和<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">var</span>都是全局的）。（來(lái)源）</p> <p>替代方法: 用?<span style="padding: 4px 8px; font-size: 12px; border-radius: 3px; color: #c7254e; background-color: #f9f2f4;">bind:</span></p> <pre class="brush:php;toolbar:false">Greeters.push(console.log.bind(null, i))
還有很多其他方法。這只是我的兩個(gè)首選
你認(rèn)為這個(gè)會(huì)輸出什么？
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()
如果你認(rèn)為這個(gè)程序會(huì)崩潰提示?Cannot read property 'name' of undefined，給你一分。
原因：?greet?沒(méi)有在正確的上下文中運(yùn)行。同樣，這個(gè)問(wèn)題依然有很多解決方案。
我個(gè)人喜歡
asyncGreet () {
this.someThingAsync()
.then(this.greet.bind(this))
}
這樣可以確保類的實(shí)例作為上下文調(diào)用greet。
如果你認(rèn)為greet?不應(yīng)該在實(shí)例上下文之外運(yùn)行, 你可以在類的constructor中綁定它:
class Foo {
constructor (name) {
this.name = name
this.greet = this.greet.bind(this)
}
}
你還應(yīng)該知道箭頭函數(shù)（?=>?）可以用來(lái)保留上下文。這個(gè)方法也可以：
asyncGreet () {
this.someThingAsync()
.then(() => {
this.greet()
})
}
盡管我認(rèn)為最后一種方法并不優(yōu)雅。
我很高興我們解決了這個(gè)問(wèn)題。
祝賀你，你現(xiàn)在可以放心地把你的程序放在互聯(lián)網(wǎng)上了。甚至運(yùn)行起來(lái)可能都不會(huì)出岔子（但是通常會(huì)）Cheers \o/
以上就是對(duì)于初學(xué)者來(lái)說(shuō) Javascript 也并不簡(jiǎn)單的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注愛(ài)掏網(wǎng) - it200.com其它相關(guān)文章！