建站
咨詢
售后
建站咨詢
新聞中心
作為前端開(kāi)發(fā)工程師，JavaScript 是我們的主要開(kāi)發(fā)語(yǔ)言，它本身語(yǔ)法比較簡(jiǎn)單，并且生態(tài)系統(tǒng)也非常完善，在社區(qū)的影響力越來(lái)越大。
創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站建設(shè)、成都做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)宜州,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575
在我們使用過(guò)程中，經(jīng)常會(huì)遇到各種奇怪的問(wèn)題，讓我們經(jīng)常摸不著頭腦。
本文靈感來(lái)自wtfjs，整理了 6 個(gè)比較常見(jiàn)并且很有意思的問(wèn)題。
1、奇怪的 try..catch
:question:問(wèn)題
下面代碼執(zhí)行后將返回什么？ 2? 還是 3 ？
(() => {
try {
return 2;
} finally {
return 3;
}
})();:bulb:解答
答案是 3? ，這是為什么呢？這是因?yàn)樵?nbsp;try...catch...finally? 語(yǔ)句中，無(wú)論是否拋出異常 finally? 子句都會(huì)執(zhí)行。此外，如果拋出異常，即使沒(méi)有 catch? 子句處理異常， finally 子句中的語(yǔ)句也會(huì)執(zhí)行。
:books:參考
MDN try...catch
2、[]? 和 null 都是對(duì)象
:question:問(wèn)題
下面 3 行代碼返回結(jié)果是什么？
typeof [];
typeof null;
null instanceof Object;
:bulb:解答
返回結(jié)果是這樣的：
typeof []; // -> 'object'
typeof null; // -> 'object'
null instanceof Object; // false
typeof? 操作符返回一個(gè)字符串，且必須符合 Table 37: typeof 操作符 返回值? 。對(duì)于沒(méi)有實(shí)現(xiàn)[[Call]]? 的 null? 、普通對(duì)象、標(biāo)準(zhǔn)特異對(duì)象和非標(biāo)準(zhǔn)特異對(duì)象，它返回字符串 'object' 。
console.log(typeof 42);
// expected output: "number"
console.log(typeof '前端自習(xí)課');
// expected output: "string"
console.log(typeof true);
// expected output: "boolean"
console.log(typeof undeclaredVariable);
// expected output: "undefined"
但是，你可以使用 toString 方法檢查對(duì)象的類型。
Object.prototype.toString.call([]);
// -> '[object Array]'
Object.prototype.toString.call(new Date());
// -> '[object Date]'
Object.prototype.toString.call(null);
// -> '[object Null]'
:books:參考
- MDN typeof
3. 箭頭函數(shù)返回 undefined
:question:問(wèn)題
函數(shù) f2? 執(zhí)行后為什么返回了 undefined ？
let f1 = () => '前端自習(xí)課';
f1(); // -> '前端自習(xí)課'
let f2 = () => {};
f2(); // -> undefined
:bulb:解答
我們第一眼感覺(jué)應(yīng)該是返回 {}? ，可是卻返回了 undefined? ，這本質(zhì)原因是因?yàn)榧^函數(shù)返回的 {} 是箭頭函數(shù)語(yǔ)法的一部分，我們寫(xiě)一個(gè)測(cè)試用例就能看出來(lái)：
let f2 = () => {
return '前端自習(xí)課'
};
f2(); // -> '前端自習(xí)課'因此上面 f2? 函數(shù)返回的是 undefined? ，當(dāng)然，如果需要返回一個(gè) {} 對(duì)象也是可以的，只需要使用括號(hào)將返回值包裹起來(lái)：
let f2 = () => ({});
f2(); // -> undefined
4. 還能使用反引號(hào)執(zhí)行函數(shù)？
:question:問(wèn)題
調(diào)用函數(shù)除了下面的方式，還有其他方式嗎？
function f(...args) {
return args;
}
f(1, 2, 3); // -> [ 1, 2, 3 ]當(dāng)然還有啦，我們可以使用 反引號(hào) 調(diào)用：
f`Hello string ${'前端自習(xí)課'}, Hello boolean ${false}, Hello array ${[1, 2, 3]}`;
/*
[
["Hello string ", ", Hello boolean ", ", Hello array ", ""],
"前端自習(xí)課",
false,
[1, 2, 3]
]
*/:bulb:解答
這個(gè)看著很神奇的樣子，但是實(shí)際上用的是模版字符串。這是一種高級(jí)形式的模版字符串，是帶標(biāo)簽的模版字符串。
上面示例代碼中： f 函數(shù)是模版字面量的標(biāo)簽，標(biāo)簽可以用函數(shù)解析模板字符串。標(biāo)簽函數(shù)的第一個(gè)參數(shù)包含一個(gè)字符串值的數(shù)組。其余的參數(shù)與表達(dá)式相關(guān)。
:books:參考
- MDN 模版字符串 。
5. JavaScript 中也有標(biāo)簽？
:question:問(wèn)題
下面這種寫(xiě)法會(huì)有問(wèn)題嗎？
foo: {
console.log("Hello");
break foo;
console.log("前端自習(xí)課");
}:bulb:解答
答案是沒(méi)問(wèn)題，會(huì)返回 Hello? 的字符串。因?yàn)?nbsp;foo? 被識(shí)別為一個(gè)標(biāo)簽，然后執(zhí)行后面 console.log("Hello")? ，然后執(zhí)行 break foo 中斷執(zhí)行。
我們經(jīng)常會(huì)使用帶標(biāo)簽的語(yǔ)句和 break? / continue 語(yǔ)句一起使用，從而實(shí)現(xiàn)結(jié)束或繼續(xù)循環(huán)：
let str = '';
loop1:
for (let i = 0; i < 5; i++) {
if (i === 1) {
continue loop1;
}
str = str + i;
}
console.log(str);
// expected output: "0234"
:books:參考
- MDN label
6. {}{}? 是 undefined
:question:問(wèn)題
我們可以在控制臺(tái)測(cè)試下面代碼。類似這樣的結(jié)構(gòu)會(huì)返回最后定義的對(duì)象中的值。
{}{}; // -> undefined
{}{}{}; // -> undefined
{}{}{}{}; // -> undefined
{foo: 'bar'}{}; // -> 'bar'
{}{foo: 'bar'}; // -> 'bar'
{}{foo: 'bar'}{}; // -> 'bar'
{a: 'b'}{c:' d'}{}; // -> 'd'
{a: 'b', c: 'd'}{}; // > SyntaxError: Unexpected token ':'
({}{}); // > SyntaxError: Unexpected token '{':bulb:解答
當(dāng)解析到 {}? 會(huì)返回 undefined? ，而解析 {foo: 'bar'}{}? 時(shí)，表達(dá)式 {foo: 'bar'}? 返回 'bar' 。
這里的 {} 有兩重含義：表示 對(duì)象 ，或表示 代碼塊 。
例如，在 () => {}? 中的 {}? 表示 代碼塊 。所以我們必須加上括號(hào)： () => ({}) 才能讓它正確地返回一個(gè)對(duì)象。
因此，我們現(xiàn)在將 {foo: 'bar'} 當(dāng)作 代碼塊 使用，則可以在終端中這樣寫(xiě)：
if (true) {
foo: "bar";
} // -> 'bar'啊哈，一樣的結(jié)果！所以 {foo: 'bar'}{} 中的花括號(hào)就是表示 代碼塊 。
網(wǎng)站欄目：六個(gè)意想不到的JavaScript問(wèn)題
當(dāng)前路徑：http://www.5511xx.com/article/djihdcj.html
