前端JavaScript 面试题汇总

前端还没入门就被迫踏入后端的大门

已于 2024-04-03 14:33:40 修改

阅读量1.3k

点赞数 5

分类专栏：前端面试题文章标签： javascript 前端面试

于 2024-04-03 14:32:23 首次发布

本文链接：https://blog.csdn.net/qq_38144981/article/details/137344786

版权

前端面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript 面试题汇总

1. 根据下面 ES6 构造函数的书写方式，要求写出 ES5 的

class Example {
  constructor(name) {
    this.name = name;
  }
  init() {
    const fun = () => {
      console.log(this.name);
    };
    fun();
  }
}
const e = new Example('Hello');
e.init();

2. 数组去重有哪些方法？（美团 19 年）

3. 描述下列代码的执行结果

foo(typeof a);
function foo(p) {
  console.log(this);
  console.log(p);
  console.log(typeof b);
  let b = 0;
}

4. 描述下列代码的执行结果

class Foo {
  constructor(arr) {
    this.arr = arr;
  }
  bar(n) {
    return this.arr.slice(0, n);
  }
}
var f = new Foo([0, 1, 2, 3]);
console.log(f.bar(1));
console.log(f.bar(2).splice(1, 1));
console.log(f.arr);

5. 描述下列代码的执行结果

01 function f(count) {
02    console.log(`foo${count}`);
03    setTimeout(() => { console.log(`bar${count}`); });
04 }
05 f(1);
06 f(2);
07 setTimeout(() => { f(3); });

6. 描述下列代码的执行结果

var a = 2;
var b = 5;
console.log(a === 2 || (1 && b === 3) || 4);

7. 描述下列代码的执行结果

export class ButtonWrapper {
  constructor(domBtnEl, hash) {
    this.domBtnEl = domBtnEl;
    this.hash = hash;
    this.bindEvent();
  }
  bindEvent() {
    this.domBtnEl.addEventListener('click', this.clickEvent, false);
  }
  detachEvent() {
    this.domBtnEl.removeEventListener('click', this.clickEvent);
  }
  clickEvent() {
    console.log(`The hash of the button is: ${this.hash}`);
  }
}

8. 箭头函数有哪些特点

9. 说一说类的继承

10. new 操作符都做了哪些事？

11. call、apply、bind 的区别？

12. 事件循环机制（宏任务、微任务）

13. 你了解 node 中的事件循环机制吗？node11 版本以后有什么改变

14. 什么是函数柯里化？

15. promise.all 方法的使用场景？数组中必须每一项都是 promise 对象吗？不是 promise 对象会如何处理？

16. this 的指向哪几种？

17. JS 中继承实现的几种方式

18. 什么是事件监听

19. 什么是 js 的闭包？有什么作用？

20. 事件委托以及冒泡原理

21. let const var 的区别？什么是块级作用域？如何用？

22. ES5 的方法实现块级作用域（立即执行函数） ES6 呢？

23. ES6 箭头函数的特性

24. 箭头函数与普通函数的区别？

25. JS 的基本数据类型有哪些？基本数据类型和引用数据类型的区别

26. NaN 是什么的缩写

27. JS 的作用域类型

28. undefined==null 返回的结果是什么？undefined 与 null 的区别在哪？

29. 写一个函数判断变量类型

30. js 的异步处理函数

31. defer 与 async 的区别

32. 浏览器事件循环和任务队列

33. 原型与原型链（美团 19 年）

34. 作用域与作用域链（美团 19 年）

35. 闭包及应用场景以及闭包缺点（美团 19 年）

36. 继承方式（美团 19 年）

37. 原始值与引用值（美团 19 年）

38. 描述下列代码的执行结果

const first = () =>
  new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
      console.log(7);
      setTimeout(() => {
        console.log(1);
      }, 0);
      setTimeout(() => {
        console.log(2);
        resolve(3);
      }, 0);
      resolve(4);
    });
    resolve(2);
    p.then((arg) => {
      console.log(arg, 5); // 1 bb
    });
    setTimeout(() => {
      console.log(6);
    }, 0);
  });
first().then((arg) => {
  console.log(arg, 7); // 2 aa
  setTimeout(() => {
    console.log(8);
  }, 0);
});
setTimeout(() => {
  console.log(9);
}, 0);
console.log(10);

39. 如何判断数组或对象（美团 19 年）

40. 对象深拷贝与浅拷贝，单独问了 Object.assign（美团 19 年）

42. 说说 instanceof 原理，并回答下面的题目（美团 19 年）

function A() {}
function B() {}
A.prototype = new B();
let a = new A();
console.log(a instanceof B); // true of false ?

###

43. 内存泄漏（美团 19 年）

44. ES6 新增哪些东西？让你自己说（美团 19 年）

45. weakmap、weakset（美团 19 年）

46. 为什么 ES6 会新增 Promise（美团 19 年）

47. ES5 实现继承？（虾皮）

48. 科里化？（搜狗）

49. 防抖和节流？（虾皮）

50. 闭包？（好未来---探讨了 40 分钟）

51. 原型和原型链？（字节）

52. 排序算法---（时间复杂度、空间复杂度）

53. 浏览器事件循环和 node 事件循环（搜狗）

54. 闭包的好处

55. let、const、var 的区别

56. 闭包、作用域（可以扩充到作用域链）

57. Promise

58. 实现一个函数,对一个 url 进行请求,失败就再次请求,超过最大次数就走失败回调,任何一次成功都走成功回调

59. 冒泡排序

60. 数组降维

61. call apply bind

62. promise 代码题

new Promise((resolve, reject) => {
  reject(1);
  console.log(2);
  resolve(3);
  console.log(4);
})
  .then((res) => {
    console.log(res);
  })
  .catch((res) => {
    console.log('reject1');
  });
try {
  new Promise((resolve, reject) => {
    throw 'error';
  })
    .then((res) => {
      console.log(res);
    })
    .catch((res) => {
      console.log('reject2');
    });
} catch (err) {
  console.log(err);
}

63. proxy 是实现代理，可以改变 js 底层的实现方式, 然后说了一下和 Object.defineProperty 的区别

64. 使用 ES5 与 ES6 分别实现继承

65. 深拷贝

66. async 与 await 的作用

67. 数据的基础类型（原始类型）有哪些

68. typeof null 返回结果

69. 对变量进行类型判断的方式有哪些

70. typeof 与 instanceof 的区别？ instanceof 是如何实现？

71. 引用类型有哪些，有什么特点

72. 如何得到一个变量的类型---指函数封装实现

73. 什么是作用域、闭包

74. 闭包的缺点是什么？闭包的应用场景有哪些？怎么销毁闭包？

75. JS的垃圾回收站机制

76. 什么是作用域链、原型链

77. new 一个构造函数发生了什么

78. 对一个构造函数实例化后. 它的原型链指向什么

79. 什么是变量提升

80. == 和 === 的区别是什么

81. Object.is 方法比较的是什么

82. 基础数据类型和引用数据类型，哪个是保存在栈内存中？哪个是在堆内存中？

83. 箭头函数解决了什么问题？

84. new 一个箭头函数后，它的 this 指向什么？

85. promise 的其他方法有用过吗？如 all、race。请说下这两者的区别

86. class 是如何实现的

87. let、const、var 的区别

88. ES6 中模块化导入和导出与 common.js 有什么区别

89. 说一下普通函数和箭头函数的区别

90. 说一下 promise 和 async 和 await 什么关系

91. 说一下你学习过的有关 ES6 的知识点

92. 了解过 js 中 arguments 吗？接收的是实参还是形参？

93. ES6 相比于 ES5 有什么变化

94. 强制类型转换方法有哪些？

95. 纯函数

96. JS 模块化

97. 看过 jquery 源码吗？

98. 说一下 js 中的 this

99. apply call bind 区别，手写

100. 手写 reduce flat

101. == 隐试转换的原理？是怎么转换的

102. ['1', '2', '3'].map(parseInt) 结果是什么，为什么（字节）

103. 防抖，节流是什么，如何实现（字节）

104. 介绍下 Set、Map、WeakSet 和 WeakMap 的区别（字节）

105. setTimeout、Promise、Async/Await 的区别（字节）

106. Promise 构造函数是同步执行还是异步执行，那么 then 方法呢？（字节）

107. 情人节福利题，如何实现一个 new （字节）

108. 实现一个 sleep 函数（字节）

109. 使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果（字节）

110. 实现 5.add(3).sub(2) (百度)

111. 给定两个数组，求交集

112. 为什么普通 for 循环的性能远远高于 forEach 的性能，请解释其中的原因。

113. 实现一个字符串匹配算法，从长度为 n 的字符串 S 中，查找是否存在字符串 T，T 的长度是 m，若存在返回所在位置。

114. 使用 JavaScript Proxy 实现简单的数据绑定

115. 数组里面有 10 万个数据，取第一个元素和第 10 万个元素的时间相差多少（字节）

116. 打印出 1~10000 以内的对称数

117. 简述同步和异步的区别

118. 怎么添加、移除、复制、创建、和查找节点

119. 实现一个函数 clone 可以对 Javascript 中的五种主要数据类型（Number、string、 Object、Array、Boolean）进行复制

120. 如何消除一个数组里面重复的元素

121. 写一个返回闭包的函数

122. 使用递归完成 1 到 100 的累加

123. Javascript 有哪几种数据类型

124. 如何判断数据类型

125. console.log(1+'2')和 console.log(1-'2')的打印结果

126. JS 的事件委托是什么，原理是什么

127. 如何改变函数内部的 this 指针的指向

128. JS 延迟加载的方式有哪些？

129. 说说严格模式的限制

130. attribute 和 property 的区别是什么？

131. ES6 能写 class 么，为什么会出现 class 这种东西?

132. 常见兼容性问题

133. 函数防抖节流的原理

134. 原始类型有哪几种？null 是对象吗？

135. 为什么 console.log(0.2+0.1==0.3) // false

136. 说一下 JS 中类型转换的规则？

137. 深拷贝和浅拷贝的区别？如何实现

138. 如何判断 this？箭头函数的 this 是什么

139. call、apply 以及 bind 函数内部实现是怎么样的

140. 为什么会出现 setTimeout 倒计时误差？如何减少

141. 谈谈你对 JS 执行上下文栈和作用域链的理解

142. new 的原理是什么？通过 new 的方式创建对象和通过字面量创建有什么区别？

143. prototype 和 proto 区别是什么？

144. 使用 ES5 实现一个继承？

145. 取数组的最大值（ES5、ES6）

146. ES6 新的特性有哪些？

147. Promise 有几种状态, Promise 有什么优缺点 ?

148. Promise 构造函数是同步还是异步执行，then 呢 ? Promise 如何实现 then 处理 ?

149. Promise 和 setTimeout 的区别 ?

150. 如何实现 Promise.all ?

151. 如何实现 Promise.finally ?

152. 如何判断 img 加载完成

153. 如何阻止冒泡？

154. 如何阻止默认事件？

155. 如何用原生 js 给一个按钮绑定两个 onclick 事件？

156. 拖拽会用到哪些事件

157. document.write 和 innerHTML 的区别

158. jQuery 的事件委托方法 bind 、live、delegate、one、on 之间有什么区别？

159. $(document).ready 方法和 window.onload 有什么区别？

160. jquery 中$.get()提交和$.post()提交有区别吗？

161. await async 如何实现（阿里）

162. clientWidth,offsetWidth,scrollWidth 的区别

163. 产生一个不重复的随机数组

164. continue 和 break 的区别

165. 如何在 jquery 上扩展插件，以及内部原理（腾讯）

166. async/await 如何捕获错误

167. Proxy 对比 Object.defineProperty 的优势

168. 原型链，可以改变原型链的规则吗?

169. 讲一讲继承的所有方式都有什么？手写一个寄生组合式继承

170. JS 基本数据类型有哪些？栈和堆有什么区别，为什么要这样存储。（快手）

171. setTimeout(() => {}, 0) 什么时候执行

172. js 有函数重载吗（网易）

173. 给你一个数组，计算每个数出现的次数，如果每个数组返回的数都是独一无二的就返回 true 相反则返回的 flase

174. 封装一个能够统计重复的字符的函数，例如 aaabbbdddddfff 转化为 3a3b5d3f

175. 写出代码的执行结果，并解释为什么？

function a() {
  console.log(1);
}
(function () {
  if (false) {
    function a() {
      console.log(2);
    }
  }
  console.log(typeof a);
  a();
})();

176. 写出代码的执行结果，并解释为什么？

alert(a);
a();
var a = 3;
function a() {
  alert(10);
}
alert(a);
a = 6;
a();

177. 写出下面程序的打印顺序，并简要说明原因

setTimeout(function () {
  console.log('set1');
  new Promise(function (resolve) {
    resolve();
  }).then(function () {
    new Promise(function (resolve) {
      resolve();
    }).then(function () {
      console.log('then4');
    });
    console.log('then2');
  });
});
new Promise(function (resolve) {
  console.log('pr1');
  resolve();
}).then(function () {
  console.log('then1');
});

setTimeout(function () {
  console.log('set2');
});
console.log(2);

new Promise(function (resolve) {
  resolve();
}).then(function () {
  console.log('then3');
});

178. javascript 中什么是伪数组？如何将伪数组转换为标准数组

179. array 和 object 的区别

180. jquery 事件委托

181. JS 基本数据类型

182. 请实现一个模块 math，支持链式调用`math.add(2,4).minus(3).times(2);`

183. 请简述 ES6 代码转成 ES5 代码的实现思路。

184. 下列代码的执行结果

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
console.log('script start');
setTimeout(function () {
  console.log('setTimeout');
}, 0);
async1();
new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
});
console.log('script end');

185. JS 有哪些内置对象？

186. DOM 怎样添加、移除、移动、复制、创建和查找节点

187. eval 是做什么的？

188. null 和 undefined 的区别？

189. new 操作符具体干了什么呢？

190. 去除字符串中的空格

191. 常见的内存泄露，以及解决方案

192. 箭头函数和普通函数里面的 this 有什么区别

193. 设计⼀个⽅法(isPalindrom)以判断是否回⽂(颠倒后的字符串和原来的字符串⼀样为回⽂)

194. 设计⼀个⽅法(findMaxDuplicateChar)以统计字符串中出现最多次数的字符

195. 设计⼀段代码，使得通过点击按钮可以在 span 中显示⽂本框中输⼊的值

196. map 和 forEach 的区别？

197. Array 的常用方法

198. 数组去重的多种实现方式

199. 什么是预解析（预编译）

200. 原始值类型和引用值类型的区别是什么？

201. 冒泡排序的思路，不用 sort

202. symbol 用途

203. 什么是函数式编程，应用场景是什么

204. 事件以及事件相关的兼容性问题

205. JS 小数不精准，如何计算

206. 写一个 mySetInterVal(fn, a, b)，每次间隔 a,a+b,a+2b 的时间，然后写一个 myClear，停止上面的 mySetInterVal

207. 合并二维有序数组成一维有序数组，归并排序的思路

208. 给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。

209. 有一堆整数，请把他们分成三份，确保每一份和尽量相等（11，42，23，4，5，6 4 5 6 11 23 42 56 78 90）(滴滴 2020)

210. 手写发布订阅（头条 2020）

211. 手写用 ES6proxy 如何实现 arr[-1] 的访问（滴滴 2020）

212. 下列代码执行结果

console.log(1);
setTimeout(() => {
  console.log(2);
  process.nextTick(() => {
    console.log(3);
  });
  new Promise((resolve) => {
    console.log(4);
    resolve();
  }).then(() => {
    console.log(5);
  });
});
new Promise((resolve) => {
  console.log(7);
  resolve();
}).then(() => {
  console.log(8);
});
process.nextTick(() => {
  console.log(6);
});
setTimeout(() => {
  console.log(9);
  process.nextTick(() => {
    console.log(10);
  });
  new Promise((resolve) => {
    console.log(11);
    resolve();
  }).then(() => {
    console.log(12);
  });
});

213. Number() 的存储空间是多大？如果后台发送了一个超过最大自己的数字怎么办

214. 事件是如何实现的？(字节 2020)

215. 下列代码执行结果

Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => {
    console.log(res);
  });

Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });

216. 判断数组的方法，请分别介绍它们之间的区别和优劣

217. JavaScript 中的数组和函数在内存中是如何存储的？

218. JavaScript 是如何运行的？解释型语言和编译型语言的差异是什么？

219. 列举你所了解的编程范式？

220. 什么是面向切面（AOP）的编程？

221. JavaScript 中的 const 数组可以进行 push 操作吗？为什么？

222. JavaScript 中对象的属性描述符有哪些？分别有什么作用？

223. JavaScript 中 console 有哪些 api ?

224. 简单对比一下 Callback、Promise、Generator、Async 几个异步 API 的优劣？

225. Object.defineProperty 有哪几个参数？各自都有什么作用

226. Object.defineProperty 和 ES6 的 Proxy 有什么区别？

227. intanceof 操作符的实现原理及实现

228. 强制类型转换规则？

229. Object.is( ) 与比较操作符 “===”、“==” 的区别

230. `+` 操作符什么时候用于字符串的拼接？

231. object.assign 和扩展运算法是深拷贝还是浅拷贝

232. const 对象的属性可以修改吗

233. 如果 new 一个箭头函数的会怎么样

234. 扩展运算符的作用及使用场景

235. Proxy 可以实现什么功能？

236. 对象与数组的解构的理解

237. 如何提取高度嵌套的对象里的指定属性？

238. Unicode、UTF-8、UTF-16、UTF-32 的区别？

239. 为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?

240. escape、encodeURI、encodeURIComponent 的区别

241. use strict 是什么意思 ? 使用它区别是什么？

242. for...in 和 for...of 的区别

243. ajax、axios、fetch 的区别

244. 下面代码的输出是什么？（ D ）

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

245. 下面代码的输出是什么？（ C ）

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

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

A: 0 1 2 和 0 1 2
B: 0 1 2 和 3 3 3
C: 3 3 3 和 0 1 2

246. 下面代码的输出是什么？（ B ）

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

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

A: 20 和 62.83185307179586
B: 20 和 NaN
C: 20 和 63
D: NaN 和 63

247. 下面代码的输出是什么？（ A ）

+true;
!"Lydia";

A: 1 和 false
B: false 和 NaN
C: false 和 false

248. 哪个选项是不正确的？（ A ）

const bird = {
  size: 'small',
};

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

A: mouse.bird.size
B: mouse[bird.size]
C: mouse[bird["size"]]
D: 以上选项都对

249. 下面代码的输出是什么？（ A ）

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

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

A: Hello
B: undefined
C: ReferenceError
D: TypeError

250. 下面代码的输出是什么？（ C ）

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

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

A: true false true
B: false false true
C: true false false
D: false true true

251. 下面代码的输出是什么？（ D ）

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

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

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

A: orange
B: purple
C: green
D: TypeError

252. 下面代码的输出是什么？（ A ）

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

A: {}
B: ReferenceError: greetign is not defined
C: undefined

253. 当我们执行以下代码时会发生什么？（ A ）

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

bark.animal = 'dog';

A 什么都不会发生
B: SyntaxError. You cannot add properties to a function this way.
C: undefined
D: ReferenceError

分析：

因为函数也是对象！（原始类型之外的所有东西都是对象）

函数是一种特殊类型的对象，我们可以给函数添加属性，且此属性是可调用的。

254. 下面代码的输出是什么？（ A ）

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

255. 下面代码的输出是什么？（ A ）

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

A: Person { firstName: "Lydia", lastName: "Hallie" } 和 undefined
B: Person { firstName: "Lydia", lastName: "Hallie" } 和 Person { firstName: "Sarah", lastName: "Smith" }
C: Person { firstName: "Lydia", lastName: "Hallie" } 和 {}
D: Person { firstName: "Lydia", lastName: "Hallie" } 和 ReferenceError

256. 事件传播的三个阶段是什么？（ D ）

A: 目标 > 捕获 > 冒泡
B: 冒泡 > 目标 > 捕获
C: 目标 > 冒泡 > 捕获
D: 捕获 > 目标 > 冒泡

257. 下面代码的输出是什么？（ C ）

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

sum(1, '2');

A: NaN
B: TypeError
C: "12"
D: 3

258. 下面代码的输出是什么？（ C ）

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

259. 下面代码的输出是什么？（ B ）

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

260. 下面代码的输出是什么？（ C ）

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

261. 下面代码的输出是什么？（ C ）

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

getAge(21);

A: "number"
B: "array"
C: "object"
D: "NaN"

262. 下面代码的输出是什么？（ C ）

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

getAge();

A: 21
B: undefined
C: ReferenceError
D: TypeError

263. 下面代码的输出是什么？（ A ）

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

A: 105
B: "105"
C: TypeError
D: "10*10+5"

264. cool_secret 可以访问多长时间？（ B ）

sessionStorage.setItem('cool_secret', 123);

A：永远，数据不会丢失。
B：用户关闭选项卡时。
C：当用户关闭整个浏览器时，不仅是选项卡。
D：用户关闭计算机时。

265. 下面代码的输出是什么？（ B ）

var num = 8;
var num = 10;

console.log(num);

A: 8
B: 10
C: SyntaxError
D: ReferenceError

266. 下面代码的输出是什么？（ C ）

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

A: false true false true
B: false true true true
C: true true false true
D: true true true true

267. 下面代码的输出是什么？（ C ）

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

A: { a: "one", b: "two" }
B: { b: "two", a: "three" }
C: { a: "three", b: "two" }
D: SyntaxError

268. 下面代码的输出是什么？（ C ）

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

269. 下面代码的输出是什么？（ A ）

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

270. 下面代码的输出是什么？（ B ）

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

271. 下面代码的输出是什么？（ B ）

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

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

A: First Second Third
B: First Third Second
C: Second First Third
D: Second Third First

272. 单击按钮时 event.target 是什么？（ C ）

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

A: div 外部
B: div 内部
C: button
D: 所有嵌套元素的数组

273. 单击下面的 html 片段打印的内容是什么？（ A ）

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

A: p div
B: div p
C: p
D: div

274. 下面代码的输出是什么？（ D ）

const person = { name: 'Lydia' };

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

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

A: undefined is 21 Lydia is 21
B: function function
C: Lydia is 21 Lydia is 21
D: Lydia is 21 function

275. 下面代码的输出是什么？（ B ）

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

typeof sayHi();

A: "object"
B: "number"
C: "function"
D: "undefined"

276. 下面这些值哪些是假值？（ A ）

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

A: 0 "" undefined
B: 0 new Number(0) "" new Boolean(false) undefined
C: 0 "" new Boolean(false) undefined
D: 所有都是假值。

278. 下面代码的输出是什么？（ B ）

console.log(typeof typeof 1);

A: "number"
B: "string"
C: "object"
D: "undefined"

279. 下面代码的输出是什么？（ C ）

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

A: [1, 2, 3, 7 x null, 11]
B: [1, 2, 3, 11]
C: [1, 2, 3, 7 x empty, 11]
D: SyntaxError

280. 下面代码的输出是什么？（ A ）

(() => {
  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

281. JavaScript 中的所有内容都是…（ A ）

A：原始或对象
B：函数或对象
C：技巧问题！只有对象
D：数字或对象

282. 下面代码的输出是什么?

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

A: [0, 1, 2, 3, 1, 2]
B: [6, 1, 2]
C: [1, 2, 0, 1, 2, 3]
D: [1, 2, 6]

283. 下面代码的输出是什么？（ B ）

!!null;
!!'';
!!1;

A: false true false
B: false false true
C: false true true
D: true true false

284. setInterval 方法的返回值什么？（ A ）

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

A：一个唯一的 id
B：指定的毫秒数
C：传递的函数
D：undefined

285. 下面代码的返回值是什么？（ A ）

[...'Lydia'];

A: ["L", "y", "d", "i", "a"]
B: ["Lydia"]
C: [[], "Lydia"]
D: [["L", "y", "d", "i", "a"]]

286. document.write 和 innerHTML 有哪些区别？

287. 假设有两个变量 a 和 b，他们的值都是数字，如何在不借用第三个变量的情况下，将两个变量的值对调？

288. 前端为什么提倡模块化开发？

289. 请解释 JSONP 的原理，并用代码描述其过程。

290. 列举几种 JavaScript 中数据类型的强制转换和隐式转换。

291. 分析以下代码的执行结果并解释为什么。

var a = { n: 1 };
var b = a;
a.x = a = { n: 2 };

console.log(a.x);
console.log(b.x);

292. 分析以下代码的执行结果并解释为什么。

// example 1
var a = {},
  b = '123',
  c = 123;
a[b] = 'b';
a[c] = 'c';
console.log(a[b]);

// example 2
var a = {},
  b = Symbol('123'),
  c = Symbol('123');
a[b] = 'b';
a[c] = 'c';
console.log(a[b]);

// example 3
var a = {},
  b = { key: '123' },
  c = { key: '456' };
a[b] = 'b';
a[c] = 'c';
console.log(a[b]);

293. 下面的代码打印什么内容？为什么？

var b = 10;
(function b() {
  b = 20;
  console.log(b);
})();

294. 下面代码中，a 在什么情况下会执行输出语句打印 1 ？

var a = ?;
if(a == 1 && a == 2 && a == 3){
 	console.log(1);
}

295. 介绍前端模块化的发展。

296. 请指出 document.onload 和 document.ready 两个事件的区别

297. 表单元素的readonly 和 disabled 两个属性有什么区别？

298. 列举几种你知道的数组排序的方法。

299. 区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”？

300. 如何编写高性能的 JavaScript？

301. 下面的代码输出什么？

var a = function () {
  return 5;
};
a.toString = function () {
  return 3;
};
console.log(a + 7);

前端还没入门就被迫踏入后端的大门

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
前端JavaScript 面试题汇总

前端js面试题汇总
复制链接

扫一扫

专栏目录

前端JavaScript 面试题汇总

JavaScript 面试题汇总

1. 根据下面 ES6 构造函数的书写方式，要求写出 ES5 的

2. 数组去重有哪些方法？（美团 19 年）

3. 描述下列代码的执行结果

4. 描述下列代码的执行结果

5. 描述下列代码的执行结果

6. 描述下列代码的执行结果

7. 描述下列代码的执行结果

8. 箭头函数有哪些特点

9. 说一说类的继承

10. new 操作符都做了哪些事？

11. call、apply、bind 的区别 ？

12. 事件循环机制（宏任务、微任务）

13. 你了解 node 中的事件循环机制吗？node11 版本以后有什么改变

14. 什么是函数柯里化？

15. promise.all 方法的使用场景？数组中必须每一项都是 promise 对象吗？不是 promise 对象会如何处理 ？

16. this 的指向哪几种 ？

17. JS 中继承实现的几种方式

18. 什么是事件监听

19. 什么是 js 的闭包？有什么作用？

20. 事件委托以及冒泡原理

21. let const var 的区别？什么是块级作用域？如何用？

22. ES5 的方法实现块级作用域（立即执行函数） ES6 呢？

23. ES6 箭头函数的特性

24. 箭头函数与普通函数的区别 ？

25. JS 的基本数据类型有哪些？基本数据类型和引用数据类型的区别

26. NaN 是什么的缩写

27. JS 的作用域类型

28. undefined==null 返回的结果是什么？undefined 与 null 的区别在哪？

29. 写一个函数判断变量类型

30. js 的异步处理函数

31. defer 与 async 的区别

32. 浏览器事件循环和任务队列

33. 原型与原型链 （美团 19 年）

34. 作用域与作用域链 （美团 19 年）

35. 闭包及应用场景以及闭包缺点 （美团 19 年）

36. 继承方式 （美团 19 年）

37. 原始值与引用值 （美团 19 年）

38. 描述下列代码的执行结果

39. 如何判断数组或对象（美团 19 年）

40. 对象深拷贝与浅拷贝，单独问了 Object.assign（美团 19 年）

42. 说说 instanceof 原理，并回答下面的题目（美团 19 年）

43. 内存泄漏（美团 19 年）

44. ES6 新增哪些东西？让你自己说（美团 19 年）

45. weakmap、weakset（美团 19 年）

46. 为什么 ES6 会新增 Promise（美团 19 年）

47. ES5 实现继承？（虾皮）

48. 科里化？（搜狗）

49. 防抖和节流？（虾皮）

50. 闭包？（好未来---探讨了 40 分钟）

51. 原型和原型链？（字节）

52. 排序算法---（时间复杂度、空间复杂度）

53. 浏览器事件循环和 node 事件循环（搜狗）

54. 闭包的好处

55. let、const、var 的区别

56. 闭包、作用域（可以扩充到作用域链）

57. Promise

58. 实现一个函数,对一个 url 进行请求,失败就再次请求,超过最大次数就走失败回调,任何一次成功都走成功回调

59. 冒泡排序

60. 数组降维

61. call apply bind

62. promise 代码题

63. proxy 是实现代理，可以改变 js 底层的实现方式, 然后说了一下和 Object.defineProperty 的区别

64. 使用 ES5 与 ES6 分别实现继承

65. 深拷贝

66. async 与 await 的作用

67. 数据的基础类型（原始类型）有哪些

68. typeof null 返回结果

69. 对变量进行类型判断的方式有哪些

70. typeof 与 instanceof 的区别？ instanceof 是如何实现？

71. 引用类型有哪些，有什么特点

72. 如何得到一个变量的类型---指函数封装实现

73. 什么是作用域、闭包

74. 闭包的缺点是什么？闭包的应用场景有哪些？怎么销毁闭包？

75. JS的垃圾回收站机制

76. 什么是作用域链、原型链

77. new 一个构造函数发生了什么

78. 对一个构造函数实例化后. 它的原型链指向什么

79. 什么是变量提升

11. call、apply、bind 的区别？

15. promise.all 方法的使用场景？数组中必须每一项都是 promise 对象吗？不是 promise 对象会如何处理？

16. this 的指向哪几种？

24. 箭头函数与普通函数的区别？

33. 原型与原型链（美团 19 年）

34. 作用域与作用域链（美团 19 年）

35. 闭包及应用场景以及闭包缺点（美团 19 年）

36. 继承方式（美团 19 年）

37. 原始值与引用值（美团 19 年）

102. ['1', '2', '3'].map(parseInt) 结果是什么，为什么（字节）

103. 防抖，节流是什么，如何实现（字节）

109. 使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果（字节）

143. prototype 和 proto 区别是什么？