28 道 JavaScript 面试题，看看能错几道？

（给前端大全加星标，提升前端技能）

作者：code秘密花园 公号 / ConardLi

75. 下面代码输出什么?

const box = { x: 10, y: 20 };	
Object.freeze(box);	
const shape = box;	
shape.x = 100;	
console.log(shape)

• A: {x:100,y:20}

• B: {x:10,y:20}

• C: {x:100}

• D: ReferenceError

答案: B

Object.freeze使得无法添加、删除或修改对象的属性（除非属性的值是另一个对象）。

当我们创建变量 shape并将其设置为等于冻结对象 box时， shape指向的也是冻结对象。你可以使用 Object.isFrozen检查一个对象是否被冻结，上述情况， Object.isFrozen（shape）将返回 true。

由于 shape被冻结，并且 x的值不是对象，所以我们不能修改属性 x。x仍然等于 10， {x：10，y：20}被打印。

注意，上述例子我们对属性 x进行修改，可能会导致抛出TypeError异常（最常见但不仅限于严格模式下时）。

---

76. 下面代码输出什么?

const { name: myName } = { name: "Lydia" };	
console.log(name);

• A: "Lydia"

• B: "myName"

• C: undefined

• D: ReferenceError

答案: D

当我们从右侧的对象解构属性 name时，我们将其值 Lydia分配给名为 myName的变量。

使用 {name：myName}，我们是在告诉JavaScript我们要创建一个名为 myName的新变量，并且其值是右侧对象的 name属性的值。

当我们尝试打印 name，一个未定义的变量时，就会引发 ReferenceError。

---

77. 以下是个纯函数么?

function sum(a, b) {	
  return a + b;	
}

• A: Yes

• B: No

答案: A

纯函数一种若输入参数相同，则永远会得到相同输出的函数。

sum函数总是返回相同的结果。如果我们传递 1和 2，它将总是返回 3而没有副作用。如果我们传递 5和 10，它将总是返回 15，依此类推，这是纯函数的定义。

---

78. 下面代码输出什么?

const add = () => {	
  const cache = {};	
  return num => {	
    if (num in cache) {	
      return `From cache! ${cache[num]}`;	
    } else {	
      const result = num + 10;	
      cache[num] = result;	
      return `Calculated! ${result}`;	
    }	
  };	
};	
const addFunction = add();	
console.log(addFunction(10));	
console.log(addFunction(10));	
console.log(addFunction(5 * 2));

• A: Calculated!20 Calculated!20 Calculated!20

• B: Calculated!20 Fromcache!20 Calculated!20

• C: Calculated!20 Fromcache!20 Fromcache!20

• D: Calculated!20 Fromcache!20 Error

答案: C

add函数是一个记忆函数。通过记忆化，我们可以缓存函数的结果，以加快其执行速度。上述情况，我们创建一个 cache对象，用于存储先前返回过的值。

如果我们使用相同的参数多次调用 addFunction函数，它首先检查缓存中是否已有该值，如果有，则返回缓存值，这将节省执行时间。如果没有，那么它将计算该值，并存储在缓存中。

我们用相同的值三次调用了 addFunction函数：

在第一次调用， num等于 10时函数的值尚未缓存，if语句 numincache返回 false，else块的代码被执行：Calculated!20，并且其结果被添加到缓存对象， cache现在看起来像 {10：20}。

第二次， cache对象包含 10的返回值。if语句 numincache 返回 true， Fromcache!20被打印。

第三次，我们将 5*2(值为10)传递给函数。cache对象包含 10的返回值。if语句 numincache返回 true， Fromcache!20被打印。

---

79. 下面代码输出什么?

const myLifeSummedUp = ["☕", "?", "?", "?"]	
for (let item in myLifeSummedUp) {	
  console.log(item)	
}	
for (let item of myLifeSummedUp) {	
  console.log(item)	
}

• A: 0 1 2 3 and "☕" "?" "?" "?"

• B: "☕" "?" "?" "?" and "☕" "?" "?" "?"

• C: "☕" "?" "?" "?" and 0 1 2 3

• D: 0 1 2 3 and {0:"☕",1:"?",2:"?",3:"?"}

答案: A

通过 for-in循环，我们可以遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。在数组中，可枚举属性是数组元素的“键”， 即它们的索引。类似于下面这个对象：

{0:"☕",1:"?",2:"?",3:"?"}

其中键则是可枚举属性，因此 0， 1， 2， 3被记录。

通过 for-of循环，我们可以迭代可迭代对象（包括 Array， Map， Set， String， arguments等）。当我们迭代数组时，在每次迭代中，不同属性的值将被分配给变量 item, 因此 “☕”， “?“， ”?”， “?“被打印。

---

80. 下面代码输出什么?

const list = [1 + 2, 1 * 2, 1 / 2]	
console.log(list)

• A: ["1 + 2","1 * 2","1 / 2"]

• B: ["12",2,0.5]

• C: [3,2,0.5]

• D: [1,1,1]

答案: C

数组元素可以包含任何值。数字，字符串，布尔值，对象，数组， null， undeifned, 以及其他表达式，如日期，函数和计算。

元素将等于返回的值。1+2返回 3， 1*2返回'2 ，'1 / 2返回 0.5。

---

81. 下面代码输出什么?

function sayHi(name) {	
  return `Hi there, ${name}`	
}	
console.log(sayHi())

• A: Hithere,

• B: Hithere,undefined

• C: Hithere,null

• D: ReferenceError

答案: B

默认情况下，如果不给函数传参，参数的值将为 undefined。上述情况，我们没有给参数 name传值。name等于 undefined，并被打印。

在ES6中，我们可以使用默认参数覆盖此默认的 undefined值。例如：

functionsayHi（name=“Lydia”）{...}

在这种情况下，如果我们没有传递值或者如果我们传递 undefined， name总是等于字符串 Lydia

---

82. 下面代码输出什么?

var status = "?"	
setTimeout(() => {	
  const status = "?"	
  const data = {	
    status: "?",	
    getStatus() {	
      return this.status	
    }	
  }	
  console.log(data.getStatus())	
  console.log(data.getStatus.call(this))	
}, 0)

• A: "?" and "?"

• B: "?" and "?"

• C: "?" and "?"

• D: "?" and "?"

答案: B

this关键字的指向取决于使用它的位置。在函数中，比如 getStatus， this指向的是调用它的对象，上述例子中 data对象调用了 getStatus，因此 this指向的就是 data对象。当我们打印 this.status时， data对象的 status属性被打印，即 "?"。

使用 call方法，可以更改 this指向的对象。data.getStatus.call(this)是将 this的指向由 data对象更改为全局对象。在全局对象上，有一个名为 status的变量，其值为 ”?“。因此打印 this.status时，会打印 “?”。

---

83. 下面代码输出什么?

const person = {	
  name: "Lydia",	
  age: 21	
}	
let city = person.city	
city = "Amsterdam"	
console.log(person)

• A: {name:"Lydia",age:21}

• B: {name:"Lydia",age:21,city:"Amsterdam"}

• C: {name:"Lydia",age:21,city:undefined}

• D: "Amsterdam"

答案: A

我们将变量 city设置为等于 person对象上名为 city的属性的值。这个对象上没有名为 city的属性，因此变量 city的值为 undefined。

请注意，我们没有引用 person对象本身，只是将变量 city设置为等于 person对象上 city属性的当前值。

然后，我们将 city设置为等于字符串 “Amsterdam”。这不会更改person对象：没有对该对象的引用。

因此打印 person对象时，会返回未修改的对象。

---

84. 下面代码输出什么?

function checkAge(age) {	
  if (age < 18) {	
    const message = "Sorry, you're too young."	
  } else {	
    const message = "Yay! You're old enough!"	
  }	
  return message	
}	
console.log(checkAge(21))

• A: "Sorry, you're too young."

• B: "Yay! You're old enough!"

• C: ReferenceError

• D: undefined

答案: C

const和 let声明的变量是具有块级作用域的，块是大括号（ {}）之间的任何东西, 即上述情况 if/else语句的花括号。由于块级作用域，我们无法在声明的块之外引用变量，因此抛出 ReferenceError。

---

85. 什么样的信息将被打印?

fetch('https://www.website.com/api/user/1')	
  .then(res => res.json())	
  .then(res => console.log(res))

• A: fetch方法的结果

• B: 第二次调用 fetch方法的结果

• C: 前一个 .then()中回调方法返回的结果

• D: 总是 undefined

答案: C

第二个 .then中 res的值等于前一个 .then中的回调函数返回的值。你可以像这样继续链接 .then，将值传递给下一个处理程序。

---

86. 哪个选项是将 hasName设置为 true的方法，前提是不能将 true作为参数传递?

function getName(name) {	
  const hasName = //	
}

• A: !!name

• B: name

• C: newBoolean(name)

• D: name.length

答案: A

使用逻辑非运算符 !，将返回一个布尔值，使用 !!name，我们可以确定 name的值是真的还是假的。如果 name是真实的，那么 !name返回 false。!false返回 true。

通过将 hasName设置为 name，可以将 hasName设置为等于传递给 getName函数的值，而不是布尔值 true。

newBoolean（true）返回一个对象包装器，而不是布尔值本身。

name.length返回传递的参数的长度，而不是布尔值 true。

87. 下面代码输出什么?

console.log("I want pizza"[0])

• A: """

• B: "I"

• C: SyntaxError

• D: undefined

答案: B

可以使用方括号表示法获取字符串中特定索引的字符，字符串中的第一个字符具有索引0，依此类推。在这种情况下，我们想要得到索引为0的元素，字符 'I'被记录。

请注意，IE7及更低版本不支持此方法。在这种情况下，应该使用 .charAt（）

88. 下面代码输出什么?

function sum(num1, num2 = num1) {	
  console.log(num1 + num2)	
}	
sum(10)

• A: NaN

• B: 20

• C: ReferenceError

• D: undefined

答案: B

您可以将默认参数的值设置为函数的另一个参数，只要另一个参数定义在其之前即可。我们将值 10传递给 sum函数。如果 sum函数只接收1个参数，则意味着没有传递 num2的值，这种情况下， num1的值等于传递的值 10。num2的默认值是 num1的值，即 10。num1+num2返回 20。

如果您尝试将默认参数的值设置为后面定义的参数，则可能导致参数的值尚未初始化，从而引发错误。比如：

function test(m = n, n = 2) {	
    console.log(m, n)	
}	
test() // Uncaught ReferenceError: Cannot access 'n' before initialization	
test(3) // 3 2	
test(3, 4) // 3 4

---

89. 下面代码输出什么?

// module.js	
export default () => "Hello world"	
export const name = "Lydia"	
// index.js	
import * as data from "./module"	
console.log(data)

• A: {default:functiondefault(),name:"Lydia"}

• B: {default:functiondefault()}

• C: {default:"Hello world",name:"Lydia"}

• D: Global object of module.js

答案: A

使用 import*asname语法，我们将 module.js文件中所有 export导入到 index.js文件中，并且创建了一个名为 data的新对象。在 module.js文件中，有两个导出：默认导出和命名导出。默认导出是一个返回字符串“Hello World”的函数，命名导出是一个名为 name的变量，其值为字符串 “Lydia”。

data对象具有默认导出的 default属性，其他属性具有指定exports的名称及其对应的值。

---

90. 下面代码输出什么?

class Person {	
  constructor(name) {	
    this.name = name	
  }	
}	
const member = new Person("John")	
console.log(typeof member)

• A: "class"

• B: "function"

• C: "object"

• D: "string"

答案: C

类是构造函数的语法糖，如果用构造函数的方式来重写 Person类则将是：

function Person() {	
  this.name = name	
}

通过 new来调用构造函数，将会生成构造函数 Person的实例，对实例执行 typeof关键字将返回 "object"，上述情况打印出 "object"。

---

91. 下面代码输出什么?

let newList = [1, 2, 3].push(4)	
console.log(newList.push(5))

• A: [1,2,3,4,5]

• B: [1,2,3,5]

• C: [1,2,3,4]

• D: Error

答案: D

.push方法返回数组的长度，而不是数组本身！通过将 newList设置为 [1,2,3].push(4)，实际上 newList等于数组的新长度：4。

然后，尝试在 newList上使用 .push方法。由于 newList是数值 4，抛出TypeError。

---

92. 下面代码输出什么?

function giveLydiaPizza() {	
  return "Here is pizza!"	
}	
const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already."	
console.log(giveLydiaPizza.prototype)	
console.log(giveLydiaChocolate.prototype)

• A: {constructor:...} {constructor:...}

• B: {} {constructor:...}

• C: {constructor:...} {}

• D: {constructor:...} undefined

答案: D

常规函数，例如 giveLydiaPizza函数，有一个 prototype属性，它是一个带有 constructor属性的对象（原型对象）。然而，箭头函数，例如 giveLydiaChocolate函数，没有这个 prototype属性。尝试使用 giveLydiaChocolate.prototype访问 prototype属性时会返回 undefined。

---

93. 下面代码输出什么?

const person = {	
  name: "Lydia",	
  age: 21	
}	
for (const [x, y] of Object.entries(person)) {	
  console.log(x, y)	
}

• A: name Lydia and age 21

• B: ["name","Lydia"] and ["age",21]

• C: ["name","age"] and undefined

• D: Error

答案: A

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，上述情况返回一个二维数组，数组每个元素是一个包含键和值的数组：

[['name'，'Lydia']，['age'，21]]

使用 for-of循环，我们可以迭代数组中的每个元素，上述情况是子数组。我们可以使用 const[x，y]在 for-of循环中解构子数组。x等于子数组中的第一个元素， y等于子数组中的第二个元素。

第一个子阵列是 [“name”，“Lydia”]，其中 x等于 name，而 y等于 Lydia。第二个子阵列是 [“age”，21]，其中 x等于 age，而 y等于 21。

---

94. 下面代码输出什么?

function getItems(fruitList, ...args, favoriteFruit) {	
  return [...fruitList, ...args, favoriteFruit]	
}	
getItems(["banana", "apple"], "pear", "orange")

• A: ["banana","apple","pear","orange"]

• B: [["banana","apple"],"pear","orange"]

• C: ["banana","apple",["pear"],"orange"]

• D: SyntaxError

答案: D

...args是剩余参数，剩余参数的值是一个包含所有剩余参数的数组，并且只能作为最后一个参数。上述示例中，剩余参数是第二个参数，这是不可能的，并会抛出语法错误。

function getItems(fruitList, favoriteFruit, ...args) {	
  return [...fruitList, ...args, favoriteFruit]	
}	
getItems(["banana", "apple"], "pear", "orange")

上述例子是有效的，将会返回数组：['banana','apple','orange','pear']

下面代码输出什么?

function nums(a, b) {	
  if	
  (a > b)	
  console.log('a is bigger')	
  else 	
  console.log('b is bigger')	
  return 	
  a + b	
}	
console.log(nums(4, 2))	
console.log(nums(1, 2))

• A: aisbigger, 6 and bisbigger, 3

• B: aisbigger, undefined and bisbigger, undefined

• C: undefined and undefined

• D: SyntaxError

答案: B

在JavaScript中，我们不必显式地编写分号( ;)，但是JavaScript引擎仍然在语句之后自动添加分号。这称为自动分号插入。例如，一个语句可以是变量，或者像 throw、 return、 break这样的关键字。

在这里，我们在新的一行上写了一个 return语句和另一个值 a+b。然而，由于它是一个新行，引擎并不知道它实际上是我们想要返回的值。相反，它会在 return后面自动添加分号。你可以这样看:

  return;	
  a + b

这意味着永远不会到达 a+b，因为函数在 return关键字之后停止运行。如果没有返回值，就像这里，函数返回 undefined。注意，在 if/else语句之后没有自动插入!

---

96. 下面代码输出什么?

class Person {	
  constructor() {	
    this.name = "Lydia"	
  }	
}	
Person = class AnotherPerson {	
  constructor() {	
    this.name = "Sarah"	
  }	
}	
const member = new Person()	
console.log(member.name)

• A: "Lydia"

• B: "Sarah"

• C: Error:cannot redeclarePerson

• D: SyntaxError

答案: B

我们可以将类设置为等于其他类/函数构造函数。在这种情况下，我们将 Person设置为 AnotherPerson。这个构造函数的名字是 Sarah，所以新的 Person实例 member上的name属性是 Sarah。

---

97. 下面代码输出什么?

const info = {	
  [Symbol('a')]: 'b'	
}	
console.log(info)	
console.log(Object.keys(info))

• A: {Symbol('a'):'b'} and ["{Symbol('a')"]

• B: {} and []

• C: {a:"b"} and ["a"]

• D: {Symbol('a'):'b'} and []

答案: D

Symbol类型是不可枚举的。Object.keys方法返回对象上的所有可枚举的键属性。Symbol类型是不可见的，并返回一个空数组。记录整个对象时，所有属性都是可见的，甚至是不可枚举的属性。

这是 Symbol的众多特性之一：除了表示完全唯一的值（防止对象意外名称冲突，例如当使用2个想要向同一对象添加属性的库时），您还可以 隐藏这种方式对象的属性（尽管不完全。你仍然可以使用 Object.getOwnPropertySymbols()方法访问 Symbol。

---

98. 下面代码输出什么?

const getList = ([x, ...y]) => [x, y]	
const getUser = user => { name: user.name, age: user.age }	
const list = [1, 2, 3, 4]	
const user = { name: "Lydia", age: 21 }	
console.log(getList(list))	
console.log(getUser(user))

• A: [1,[2,3,4]] and undefined

• B: [1,[2,3,4]] and {name:"Lydia",age:21}

• C: [1,2,3,4] and {name:"Lydia",age:21}

• D: Error and {name:"Lydia",age:21}

答案: A

getList函数接收一个数组作为其参数。在 getList函数的括号之间，我们立即解构这个数组。您可以将其视为：

[x,...y]=[1,2,3,4]

使用剩余的参数 ...y，我们将所有剩余参数放在一个数组中。在这种情况下，其余的参数是 2， 3和 4。y的值是一个数组，包含所有其余参数。在这种情况下， x的值等于 1，所以当我们打印 [x，y]时，会打印 [1，[2,3,4]]。

getUser函数接收一个对象。对于箭头函数，如果只返回一个值，我们不必编写花括号。但是，如果您想从一个箭头函数返回一个对象，您必须在圆括号之间编写它，否则不会返回任何值!下面的函数将返回一个对象:

const getUser = user => ({ name: user.name, age: user.age })

由于在这种情况下不返回任何值，因此该函数返回 undefined。

---

99. 下面代码输出什么?

const name = "Lydia"	
console.log(name())

• A: SyntaxError

• B: ReferenceError

• C: TypeError

• D: undefined

答案: C

变量 name保存字符串的值，该字符串不是函数，因此无法调用。

当值不是预期类型时，会抛出 TypeErrors。JavaScript期望 name是一个函数，因为我们试图调用它。但它是一个字符串，因此抛出 TypeError：nameisnotafunction

当你编写了一些非有效的JavaScript时，会抛出语法错误，例如当你把 return这个词写成 retrun时。当JavaScript无法找到您尝试访问的值的引用时，抛出 ReferenceErrors。

---

100. 下面代码输出什么?

// ?✨ This is my 100th question! ✨?	
const output = `${[] && 'Im'}possible!	
You should${'' && `n't`} see a therapist after so much JavaScript lol`

• A: possible!Youshould see a therapist after so muchJavaScriptlol

• B: Impossible!Youshould see a therapist after so muchJavaScriptlol

• C: possible!Youshouldn't see a therapist after so much JavaScript lol

• D: Impossible!Youshouldn't see a therapist after so much JavaScript lol

答案: B

[]是一个真值。使用 &&运算符，如果左侧值是真值，则返回右侧值。在这种情况下，左侧值 []是一个真值，所以返回 Im。

""是一个假值。如果左侧值是假的，则不返回任何内容。n't不会被退回。

---

101.下面代码输出什么?

const one = (false || {} || null)	
const two = (null || false || "")	
const three = ([] || 0 || true)	
console.log(one, two, three)

• A: false null []

• B: null "" true

• C: {} "" []

• D: null null true

答案: C

使用 ||运算符，我们可以返回第一个真值。如果所有值都是假值，则返回最后一个值。

（false||{}||null）：空对象 {}是一个真值。这是第一个（也是唯一的）真值，它将被返回。one等于 {}。

（null||false||“”）：所有值都是假值。这意味着返回传递的值 ""。two等于 ""。

（[]||0||“”）：空数组 []是一个真值。这是第一个返回的真值。three等于 []。

【本文作者】

ConardLi：一枚高级前端开发工程师。个人公众号：「code秘密花园」

推荐阅读

（点击标题可跳转阅读）

送你 43 道 JS 面试题

送你58道JavaScript面试题（上）

Javascript 面试核心考点

觉得本文对你有帮助？请分享给更多人

关注「前端大全」加星标，提升前端技能

好文章，我在看❤️