这些 JavaScript 笔试题你能答对几道？

收藏 javascript-questions 这个仓库很久了，趁着周末来锻炼下自己的 JS 基础水平

因为逐渐也在承担一些面试工作，顺便摘录一些个人觉得比较适合面试的题目和方向

事件流（捕获、冒泡）

源链接

以下代码点击结果是啥？

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

call、apply、bind

源链接

以下代码输出结果是啥？

const person = { name: 'Lydia' };

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

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

new

源链接

以下代码输出结果是啥？

function Car() {
  this.make = 'Lamborghini';
  return { make: 'Maserati' };
}

const myCar = new Car();
console.log(myCar.make);

JSON.stringify

源链接

以下代码输出结果是啥？

const settings = {
  username: 'lydiahallie',
  level: 19,
  health: 90,
};

const data = JSON.stringify(settings, ['level', 'health']);
console.log(data);

const settings = {
  username: 'lydiahallie',
  level: 19,
  health: 90,
};

const data = JSON.stringify(settings, null, 'hello');

console.log(data);

/*
{
hello"username": "lydiahallie",
hello"level": 19,
hello"health": 90
}
*/

函数参数解构

源链接

以下代码输出结果是啥？

const myFunc = ({ x, y, z }) => {
  console.log(x, y, z);
};

myFunc(1, 2, 3);

函数中的剩余参数

源链接

以下代码输出结果是啥？

function getItems(fruitList, ...args, favoriteFruit) {
  return [...fruitList, ...args, favoriteFruit]
}

getItems(["banana", "apple"], "pear", "orange")

展开运算符

源链接

以下代码输出结果是啥？

const person = {
  name: 'Lydia',
  age: 21,
};

const changeAge = (x = { ...person }) => (x.age += 1);
const changeAgeAndName = (x = { ...person }) => {
  x.age += 1;
  x.name = 'Sarah';
};

changeAge(person);
changeAgeAndName();

console.log(person);

||

源链接

以下代码输出结果是啥？

const one = false || {} || null;
const two = null || false || '';
const three = [] || 0 || true;

console.log(one, two, three);

falsy

源链接

以下哪些值是假值？

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

对象中 key 重复

源链接

以下代码输出结果是啥？

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

Array Operators

有好几道和数组操作有关的题

这题 主要考查 push 操作返回 push 后的数组长度，这题 也是类似

这题 主要考查哪些数组操作会改变原来的数组（splice）

这题 主要考查 reduce 的使用

[1, 2, 3, 4].reduce((x, y) => console.log(x, y));

这题还是比较有意思的，reduce 函数调用中如果有第二个参数，则会被当作第一次迭代中的 previous 值（也就是第一个参数 x），如果没有第二个参数，则数组第一个元素会被当作第一次迭代的 previous

所以上面的代码，如果 reduce 有第二个参数，会被迭代 4 次，如果没有，则是迭代三次

再看代码，因为没有第二个参数，所以第一次迭代参数是 1 和 2，reduce 迭代中的返回会被当作下次迭代的 previous，但是这里没返回，所以就是 undefined，而第二个参数 y 就是数组元素

Object Operators

这题 主要考查用 Object.defineProperty 定义的对象中的属性默认不可枚举，不能用 Object.keys 拿到

这题 主要考查 Object.freeze，顾名思义它能冰冻住对象，使得对象不能增、删、修改键值对（但是注意，它只是 freeze 了第一层，可以参考 这题）

这题 考查 Object.seal，它能阻止对象新增、删除属性，但是对于已有的属性依然可以修改其值（注意和 freeze 一样同样只是第一层）

delete

源链接

以下代码输出结果是啥？

const name = 'Lydia';
age = 21;

console.log(delete name);
console.log(delete age);

暂时性死区

• 111
• 129

这两题都是暂时性死区相关，注意下 var 和 let const 是有差异的，var 的话会变量声明提升（但是是 undefined），但是 let 和 const 并不会初始化

Object toString

源链接

以下代码输出结果是啥？

const animals = {};
let dog = { emoji: '🐶' }
let cat = { emoji: '🐈' }

animals[dog] = { ...dog, name: "Mara" }
animals[cat] = { ...cat, name: "Sara" }

console.log(animals[dog])

对象引用

源链接

以下代码输出结果是啥？

let person = { name: 'Lydia' };
const members = [person];
person = null;

console.log(members);

标签函数

源链接

以下代码输出结果是啥？

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

String.raw

源链接

以下代码输出结果是啥？

console.log(String.raw`Hello\nworld`);

Number.isNaN & isNaN

源链接

以下代码输出结果是啥？

const name = 'Lydia Hallie';
const age = 21;

console.log(Number.isNaN(name));
console.log(Number.isNaN(age));

console.log(isNaN(name));
console.log(isNaN(age));

ES6 Module

源链接

以下代码输出结果是啥？

// index.js
console.log('running index.js');
import { sum } from './sum.js';
console.log(sum(1, 2));

// sum.js
console.log('running sum.js');
export const sum = (a, b) => a + b;

源链接

以下代码输出结果是啥？

// counter.js
let counter = 10;
export default counter;

// index.js
import myCounter from './counter';

myCounter += 1;

console.log(myCounter);

关于 js modules 更多可参考 这里

宏任务、微任务

源链接

以下代码输出结果是啥？

const myPromise = Promise.resolve(Promise.resolve('Promise'));

function funcOne() {
  setTimeout(() => console.log('Timeout 1!'), 0);
  myPromise.then(res => res).then(res => console.log(`${res} 1!`));
  console.log('Last line 1!');
}

async function funcTwo() {
  const res = await myPromise;
  console.log(`${res} 2!`)
  setTimeout(() => console.log('Timeout 2!'), 0);
  console.log('Last line 2!');
}

funcOne();
funcTwo();

箭头函数

先明确下箭头函数和普通函数的几个区别：（参考 箭头函数）

其中最重要的特性是，箭头函数没有自己的 this 对象，它的 this 是定义时上层作用域中的 this

源链接

以下代码输出结果是啥？

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

console.log(shape.diameter());
console.log(shape.perimeter());

92 这题的考点是箭头函数不能作为构造函数，所以它并没有 prototype 属性

98 这题比较脑经急转弯，箭头函数如果返回一个对象，需要用 () 包下

151 还是 this 相关，和第一题类似