我錯過的JS面試題，你別再錯了亚脆。

這段時間在進行 web 前端的面試做院，在各大平臺、社區(qū)尋找面試題濒持，其中有一些基礎的面試題键耕，用來檢查自己的基礎的地方。

掘金上的 Cornad Li 將Github的一個很火的基礎題翻譯過來柑营，自己試著做了一下屈雄，還是錯了不少，有些是基礎不牢官套，有些是粗心酒奶，用錯題集整理一下，查漏補缺奶赔。

  1. global / window變量聲明

下面代碼會輸出什么惋嚎？

let greeting = "Halo";
greating = "Fuck JavaScript";
console.log(greating);

瀏覽器中當沒有聲明變量時（使用let const var等），會自動將變量聲明為window/global的一個屬性站刑，并完成賦值瘸彤，因此輸出是：
"Fuck JavaScript"

  1. 當我們這樣做時會發(fā)生什么?
function bark() {
  console.log("Woof!");
}
bark.animal = "dog";

A: Nothing, this is totally fine!
B: SyntaxError. You cannot add properties to a function this way.
C: undefined
D: ReferenceError
答案：A。因為在JavaScript中笛钝，函數(shù)也是一種對象质况，因此可以對其添加屬性并賦值愕宋。

  1. 構造函數(shù)屬性的添加

下面代碼的輸出是什么?

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const member = new Person("Lydia", "Hallie");
Person.getFullName = () => this.firstName + this.lastName;

console.log(member.getFullName());

A: TypeError
B: SyntaxError
C: Lydia Hallie
D: undefined undefined
答案：A。構造函數(shù)添加屬性结榄，不能像一般對象那樣直接添加中贝，而是要在構造函數(shù)的原型上添加屬性。像這樣：

Person.prototype.getFullName = function() {
  return  this.firstName+this.lastName;
}
  1. this值 / new操作符流程

下面代碼輸出是什么臼朗？

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");

console.log(sarah);

A. undefined
B. ReferenceError
C. {}
D. Person {firstName: "Sarah", lastName: "Smith"}
答案：A邻寿。由于lydia定義時 使用new關鍵詞，因此lydia定義時的構造函數(shù)Person中的this是指lydia视哑，而sarah定義時未使用關鍵詞绣否，因此構造函數(shù)中的this是定義的，也就是undefined挡毅，在非嚴格模式下蒜撮，構造函數(shù)中的this就是window，因此window.firstName和window.lastName就是undefined跪呈。
PS：在嚴格模式下段磨，下面中會直接報錯：Cannot set property 'firstName' of undefined

function Person(firstName, lastName) {
  "use strict";
  this.firstName = firstName;
  this.lastName = lastName;
  console.log(this);
}

const lydia = new Person("Lydia", "Hallie");
const sarah = Person("Sarah", "Smith");
/*  
[object Object] {
  firstName: "Lydia",
  lastName: "Hallie"
}  // lydia

"TypeError: Cannot set property 'firstName' of undefined  // sarah
*/
  1. 自加自減運算
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

A: 1 1 2
B: 1 2 2
C: 0 2 2
D: 0 1 2
答案： C。
后綴一元運算符++: 返回值 0耗绿，增加值 1苹支。
前綴一元運算符++: 增加值 2，返回值 2误阻。
MDN-Expressions_and_Operators

  1. 帶標簽的模板字符串

以下代碼輸出什么债蜜？

function getPersonInfo(one, two, three) {
  console.log(one);
  console.log(two);
  console.log(three);
}
const person = "Lydia";
const age = 21;
getPersonInfo`${person} is ${age} years old`;

A: Lydia 21 ["", "is", "years old"]
B: ["", "is", "years old"] Lydia 21
C: Lydia ["", "is", "years old"] 21
答案：B。帶標簽的模板字符串第一個參數(shù)包含一個字符串值的數(shù)組究反，其余參數(shù)與表達式相關策幼。因此two, three分別是${person}, ${age}。

  1. 基礎類型和引用類型區(qū)別

以下代碼輸出什么奴紧？

function checkAge(data) {
  if (data === { age: 18 }) {
    console.log("You are an adult!");
  } else if (data == { age: 18 }) {
    console.log("You are still an adult.");
  } else {
    console.log(`Hmm.. You don't have an age I guess`);
  }
}
checkAge({ age: 18 });

A: You are an adult!
B: You are still an adult.
C: Hmm.. You don't have an age I guess
答案： C特姐。涉及到基礎類型和引用類型的比較。原始類型通過值去比較黍氮，只要值相等唐含，兩個就相等。而引用類型（對象）通過他們的引用的內(nèi)存地址是否一樣去比較相似性沫浆。JavaScript檢查對象是否具有對內(nèi)存中相同位置的引用捷枯。這就是為什么{ age: 18 } === { age: 18 }和 { age: 18 } == { age: 18 } 返回 false的原因。

  1. 拓展運算符
    以下代碼輸出什么专执？
function getAge(...args) {
  console.log(typeof args);
}
getAge(21);

A: "number"
B: "array"
C: "object"
D: "NaN"
答案：C淮捆。擴展運算符（... args）返回一個帶參數(shù)的數(shù)組。 數(shù)組是一個對象，因此typeof args返回object攀痊。

  1. 嚴格模式下的引用錯誤桐腌。
function getAge() {
  "use strict";
  age = 21;
  console.log(age);
}
getAge();

A: 21
B: undefined
C: ReferenceError
D: TypeError
答案：C。使用嚴格模式"use strict";可以確保不會意外地生成全局變量苟径，我們從未聲明變量age案站，因為我們使用``use strict'，它會引發(fā)一個ReferenceError棘街。 如果我們不使用“use strict”蟆盐，它就會起作用，因為屬性age`會被添加到全局對象中遭殉。

  1. sessionStorage, localStorage

cool_secret可以訪問多長時間?

sessionStorage.setItem("cool_secret", 123);

A：永遠石挂，數(shù)據(jù)不會丟失。
B：用戶關閉選項卡時险污。
C：當用戶關閉整個瀏覽器時痹愚，不僅是選項卡。
D：用戶關閉計算機時罗心。
答案: B里伯。
關閉選項卡后城瞎，將刪除存儲在sessionStorage中的數(shù)據(jù)渤闷。如果使用localStorage，數(shù)據(jù)將永遠存在脖镀，除非例如調(diào)localStorage.clear()飒箭。
MDN-sessionStorage
MDN-localStorage

  1. continue關鍵字

下面代碼的輸出是什么?

for (let i = 1; i < 5; i++) {
  if (i === 3) continue;
  console.log(i);
}

A: 1 2
B: 1 2 3
C: 1 2 4
D: 1 3 4
答案: C。
如果某個條件返回true蜒灰，則continue語句跳過迭代弦蹂。

  1. 基本類型的裝箱轉(zhuǎn)換

下面代碼的輸出是什么?

String.prototype.giveLydiaPizza = () => {
  return "Just give Lydia pizza already!";
};
const name = "Lydia";
name.giveLydiaPizza();

A: "Just give Lydia pizza already!"
B: TypeError: not a function
C: SyntaxError
D: undefined
答案: A。
String是一個內(nèi)置的構造函數(shù)强窖，我們可以為它添加屬性凸椿。 我剛給它的原型添加了一個方法。 原始類型的字符串自動轉(zhuǎn)換為字符串對象翅溺，由字符串原型函數(shù)生成脑漫。 因此，所有字符串（字符串對象）都可以訪問該方法咙崎！
譯者ConardLi 注：
當使用基本類型的字符串調(diào)用giveLydiaPizza時优幸，實際上發(fā)生了下面的過程：

  • 創(chuàng)建一個String的包裝類型實例
  • 在實例上調(diào)用substring方法
  • 銷毀實例

學習者注：也就是基礎類型轉(zhuǎn)化為引用類型的 "裝箱轉(zhuǎn)換"，這使得基礎類型例如string, number, boolean 的變量可以調(diào)用其對應復雜類型對象上的方法褪猛。

  1. 對象鍵值自動轉(zhuǎn)化為字符串网杆。

下面代碼的輸出是什么?

const a = {};
const b = { key: "b" };
const c = { key: "c" };
a[b] = 123;
a[c] = 456;
console.log(a[b]);

A: 123
B: 456
C: undefined
D: ReferenceError
答案: B
對象鍵自動轉(zhuǎn)換為字符串。我們試圖將一個對象設置為對象a的鍵，其值為123碳却。
但是队秩，當對象自動轉(zhuǎn)換為字符串化時，它變成了[Object object]追城。 所以我們在這里說的是a["Object object"] = 123刹碾。 然后，我們可以嘗試再次做同樣的事情座柱。 c對象同樣會發(fā)生隱式類型轉(zhuǎn)換迷帜。那么，a["Object object"] = 456色洞。
然后戏锹，我們打印a[b]，它實際上是a["Object object"]火诸。 我們將其設置為456锦针，因此返回456。
此時打印出a, b, c分別是：

[object Object] {
  [object Object]: 456
}  // a
[object Object] {
  key: "b"
}  // b
[object Object] {
  key: "c"
}  // c
  1. 單擊按鈕時event.target是什么?
<div onclick="console.log('first div')">
  <div onclick="console.log('second div')">
    <button onclick="console.log('button')">
      Click!
    </button>
  </div>
</div>

A: div外部
B: div內(nèi)部
C: button
D: 所有嵌套元素的數(shù)組.
答案: C置蜀。
導致事件的最深嵌套元素是事件的目標奈搜。 可以通過在需要停止冒泡的地方用 event.stopPropagation 停止冒泡。

document.querySelector('button').addEventListener('click', event=> {
  event.stopPropagation();
  console.log(event.target);
});
/* 
button   
<button onclick="console.log('button')">Click!
</button>
*/
  1. 塊級作用域盯荤。

下面代碼的輸出是什么?

(() => {
  let x, y;
  try {
    throw new Error();
  } catch (x) {
    (x = 1), (y = 2);
    console.log(x);
  }
  console.log(x);
  console.log(y);
})();

A: 1 undefined 2
B: undefined undefined undefined
C: 1 1 2
D: 1 undefined undefined
答案: A馋吗。
catch作用域中的x與外面的x不同，不是同一個x秋秤。
在catch中的賦值宏粤，對catch外的x沒有作用，對y有作用灼卢，因為y的賦值是catch在作用域鏈上對外部y的賦值绍哎。
x還是undefined，y被賦值為2鞋真。

  1. JavaScript中的所有內(nèi)容都是...

A：原始或?qū)ο?br> B：函數(shù)或?qū)ο?br> C：技巧問題崇堰！只有對象
D：數(shù)字或?qū)ο?br> 答案: A
JavaScript只有原始類型和對象。
原始類型是boolean涩咖，null海诲，undefined，bigint抠藕，number饿肺，string和symbol。

  1. JavaScript單變量的布爾值轉(zhuǎn)換

下面代碼的輸出是什么?

!!null;
!!"";
!!1;

A: false true false
B: false false true
C: false true true
D: true true false
答案: B
null是假值盾似。 !null返回true敬辣。 !true返回false雪标。
""是假值。 !""返回true溉跃。 !true返回false村刨。
1是真值。 !1返回false撰茎。 !false返回true嵌牺。
學習者注：JavaScript的單變量布爾值的轉(zhuǎn)化中，以下幾種為false龄糊，其余為true逆粹，null, undefined, '', NaN, 0,false。

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市他嚷，隨后出現(xiàn)的幾起案子蹋绽，更是在濱河造成了極大的恐慌，老刑警劉巖筋蓖，帶你破解...
    沈念sama閱讀 211,042評論 6贊 490
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件卸耘，死亡現(xiàn)場離奇詭異，居然都是意外死亡粘咖，警方通過查閱死者的電腦和手機蚣抗，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2贊 384
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來涂炎，“玉大人忠聚，你說我怎么就攤上這事设哗〕罚” “怎么了？”我有些...
    開封第一講書人閱讀 156,674評論 0贊 345
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵网梢，是天一觀的道長震缭。 經(jīng)常有香客問我，道長战虏，這世上最難降的妖魔是什么拣宰？ 我笑而不...
    開封第一講書人閱讀 56,340評論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮烦感，結果婚禮上巡社，老公的妹妹穿的比我還像新娘。我一直安慰自己手趣，他們只是感情好晌该，可當我...
    茶點故事閱讀 65,404評論 5贊 384
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般朝群。 火紅的嫁衣襯著肌膚如雪燕耿。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,749評論 1贊 289
  • 城市分裂傳說
    那天姜胖，我揣著相機與錄音誉帅，去河邊找鬼。 笑死右莱，一個胖子當著我的面吹牛蚜锨，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播慢蜓，決...
    沈念sama閱讀 38,902評論 3贊 405
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼踏志，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了胀瞪？” 一聲冷哼從身側響起针余，我...
    開封第一講書人閱讀 37,662評論 0贊 266
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎凄诞，沒想到半個月后圆雁，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,110評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡帆谍，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年伪朽，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片汛蝙。...
    茶點故事閱讀 38,577評論 1贊 340
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡烈涮，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出窖剑，到底是詐尸還是另有隱情坚洽，我是刑警寧澤，帶...
    沈念sama閱讀 34,258評論 4贊 328
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布西土，位于F島的核電站讶舰，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏需了。R本人自食惡果不足惜跳昼，卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3贊 312
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肋乍。 院中可真熱鬧鹅颊，春花似錦、人聲如沸墓造。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0贊 21
  • 一樁弒父案历帚，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至杠娱，卻和暖如春挽牢，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背摊求。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1贊 264
  • 情欲美人皮
    我被黑心中介騙來泰國打工禽拔， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人室叉。 一個月前我還...
    沈念sama閱讀 46,271評論 2贊 360
  • 代替公主和親
    正文 我出身青樓睹栖，卻偏偏與公主長得像，于是被迫代替她去往敵國和親茧痕。 傳聞我的和親對象是個殘疾皇子野来，可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2贊 348