送你43道JS面试题(收藏)

导读

这两天的GitHub Trending repositories被一个名叫 javascript-questions的项目霸榜了，项目中记录了一些JavaScript题目。

我大概从头到尾看了一遍，都是一些基础的题目，我大概花了半个小时（有些题很简单，可以一扫而过）把这些题做完了，虽然题目很简单，但是每道题都对应一个知识点，如果这个知识点你没有接触过，那肯定会做错，如果你接触过这些知识点，那么这些题对你来说就很容易。

建议大家也花半个小时来做一做，以便查漏补缺。

为方便大家能够更快的做题，而不把时间浪费在翻译上，我又花了几个小时把它们翻译成了中文，当然已经获得了作者授权。

文中有些点作者解释的不太完整，为了更好的理解，我在文中添加了一些个人解释。

仓库地址：https://github.com/lydiahallie/javascript-questions

JavaScript 进阶问题列表

我在我的Instagram上发布了每日JavaScript选择题，我也会在这里发布！

从基础到高级：测试您对JavaScript的了解程度，刷新您的知识，或为您的编码面试做好准备！"htmlcode">

function sayHi() {
 console.log(name);
 console.log(age);
 var name = "Lydia";
 let age = 21;
}

sayHi();

A: Lydia 和 undefined

B: Lydia 和 ReferenceError

C: ReferenceError 和 21

D: undefined 和 ReferenceError

答案: D

在函数中，我们首先使用var关键字声明了name变量。 这意味着变量在创建阶段会被提升（JavaScript会在创建变量创建阶段为其分配内存空间），默认值为undefined，直到我们实际执行到使用该变量的行。 我们还没有为name变量赋值，所以它仍然保持undefined的值。

使用let关键字（和const）声明的变量也会存在变量提升，但与var不同，初始化没有被提升。 在我们声明（初始化）它们之前，它们是不可访问的。 这被称为“暂时死区”。 当我们在声明变量之前尝试访问变量时，JavaScript会抛出一个ReferenceError。

译者注：

关于let的是否存在变量提升，我们何以用下面的例子来验证：

let name = 'ConardLi'
{
 console.log(name) // Uncaught ReferenceError: name is not defined
 let name = 'code秘密花园'
}

let变量如果不存在变量提升，console.log(name)就会输出ConardLi，结果却抛出了ReferenceError，那么这很好的说明了，let也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。

变量的赋值可以分为三个阶段：

• 创建变量，在内存中开辟空间
• 初始化变量，将变量初始化为undefined
• 真正赋值

关于let、var和function：

• let 的「创建」过程被提升了，但是初始化没有提升。
• var 的「创建」和「初始化」都被提升了。
• function 的「创建」「初始化」和「赋值」都被提升了。

2. 下面代码的输出是什么"htmlcode">

for (var i = 0; i < 3; i++) {
 setTimeout(() => console.log(i), 1);
}

for (let i = 0; i < 3; i++) {
 setTimeout(() => console.log(i), 1);
}

const shape = {
 radius: 10,
 diameter() {
 return this.radius * 2;
 },
 perimeter: () => 2 * Math.PI * this.radius
};

shape.diameter();
shape.perimeter();

+true;
!"Lydia";

const bird = {
 size: "small"
};

const mouse = {
 name: "Mickey",
 small: true
};

let c = { greeting: "Hey!" };
let d;

d = c;
c.greeting = "Hello";
console.log(d.greeting);

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);

class Chameleon {
 static colorChange(newColor) {
 this.newColor = newColor;
 }

 constructor({ newColor = "green" } = {}) {
 this.newColor = newColor;
 }
}

const freddie = new Chameleon({ newColor: "purple" });
freddie.colorChange("orange");

let greeting;
greetign = {}; // Typo!
console.log(greetign);

function bark() {
 console.log("Woof!");
}

bark.animal = "dog";

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());

Person.prototype.getFullName = function () {
 return `${this.firstName} ${this.lastName}`;
}

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

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

console.log(lydia);
console.log(sarah);

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

sum(1, "2");

let number = 0;
console.log(number++);
console.log(++number);
console.log(number);

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`;

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 });

function getAge(...args) {
 console.log(typeof args);
}

getAge(21);

function getAge() {
 "use strict";
 age = 21;
 console.log(age);
}

getAge();

const sum = eval("10*10+5");

sessionStorage.setItem("cool_secret", 123);

var num = 8;
var num = 10;

console.log(num);

const obj = { 1: "a", 2: "b", 3: "c" };
const set = new Set([1, 2, 3, 4, 5]);

obj.hasOwnProperty("1");
obj.hasOwnProperty(1);
set.has("1");
set.has(1);

const obj = { a: "one", b: "two", a: "three" };
console.log(obj);

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

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

const name = "Lydia";

name.giveLydiaPizza();

const a = {};
const b = { key: "b" };
const c = { key: "c" };

a[b] = 123;
a[c] = 456;

console.log(a[b]);

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");

bar();
foo();
baz();

<div onclick="console.log('first div')">
 <div onclick="console.log('second div')">
 <button onclick="console.log('button')">
  Click!
 </button>
 </div>
</div>

<div onclick="console.log('div')">
 <p onclick="console.log('p')">
 Click here!

</div>

const person = { name: "Lydia" };

function sayHi(age) {
 console.log(`${this.name} is ${age}`);
}

sayHi.call(person, 21);
sayHi.bind(person, 21);

function sayHi() {
 return (() => 0)();
}

typeof sayHi();

0;
new Number(0);
("");
(" ");
new Boolean(false);
undefined;

console.log(typeof typeof 1);

const numbers = [1, 2, 3];
numbers[10] = 11;
console.log(numbers);

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

[[0, 1], [2, 3]].reduce(
 (acc, cur) => {
  return acc.concat(cur);
 },
 [1, 2]
);

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

setInterval(() => console.log("Hi"), 1000);

[..."Lydia"];