🎯 JS面试清单 - 第一部分（基础知识）
更新：我建议查看这里的 v2 版本：https://www.freecodecamp.org/news/javascript-interview-prep-cheatsheet/
准备下次面试？❓ 我这里有一份完美的清单。仔细检查一遍，你就能信心满满地迎接面试啦💃
📝先决条件
- 具备网络工作原理的基本知识
- 熟悉 HTML/CSS、JS（尤其是 ES6+ 语法）
🧰 数组方法
最常被问到的问题：map，，，，filterfindreduceforEach
❓ 使用示例：解决问题
// Return the words with more than 6 letters
const words = ['react', 'script', 'interview', 'style', 'javascript']
const ans = words.filter((word) => word.length > 6)
console.log(ans) // ['interview', 'javascript']
我建议你先自己做一遍练习，检验一下你的知识水平。
请在下方评论区留下你的解决方案⬇️
通常，接下来会问：不用数组方法能做到吗？
let newArr = []
for (let i = 0; i < words.length; i++) {
if (words[i].length > 6) {
newArr.push(words[i])
}
}
console.log(newArr)
❓ map 和 forEach 的区别
map返回一个新的数组，forEach而不是
// Return a new array where even numbers are multiplied by 2
let arr = [1, 2, 3, 4, 5, 6, 7]
function consoleEven(arr) {
let data = arr.map((num) => (num % 2 === 0 ? num * 2 : num * 1))
console.log(data) // [1, 4, 3, 8, 5, 12, 7]
}
consoleEven(arr)
function consoleEven(arr) {
let data = arr.forEach((num) => (num % 2 === 0 ? num * 2 : num * 1))
console.log(data) // undefined
}
consoleEven(arr)
- 方法链可以在……中实现，
map但不能。forEach
// we are converting the new array back to original
function consoleEven(arr) {
let data = arr
.map((num) => (num % 2 === 0 ? num * 2 : num * 1))
.map((item) => (item % 2 === 0 ? item / 2 : item / 1))
console.log(data)
}
consoleEven(arr)
注意： map不要forEach修改原始数组。
❓ 地图的 Polyfill
这是一个比较高级的概念，我们将在第二部分中讲解。
✔️ var、let 和 const
❓ 范围之间的区别
❓ 输出
var a = 3
var a = 4
let b = 3
let b = 4
const c = 3
const c = 4
console.log(a) // 4
console.log(b) // Syntax Error
console.log(c) // Syntax Error
注意：了解不同类型的错误很有帮助。
🚩 吊装
JavaScript 的默认行为是将声明移到顶部。
function宣言var被高高举起
注意：var声明会被提升，而不是值。
❓ 输出/解释错误
function consoleNum() {
console.log(num)
var num = 10
}
consoleNum() // undefined
// Why? Also, why undefined & not error
// This is how runtime sees this
{
var num
console.log(num)
num = 9
}
✔️ == vs ===
==将操作数转换为相同类型，然后进行比较。
===描述严格的相等性检查。它检查类型和内容是否相同。
❓ 输出
let a = null
let b
console.log(a == b) // true
console.log(a === b) // false
// why?
console.log(typeof a) // object
console.log(typeof b) // undefined
注意：解释你的答案总是一个好习惯。
✔️这
要详细解释需要另写一篇文章。这里我只列出一些要点。
this指的是object函数所属的源，简单来说，就是指向函数调用的所有者（点号左边）。
它的价值取决于它的调用方式。
❓ 隐式绑定与显式绑定
隐式绑定是指使用点号表示法在对象中调用函数。
function myFunc() {
console.log(this)
}
const obj = {
bool: true,
myFunc: myFunc,
}
显式绑定是指强制函数使用某个对象作为其绑定对象this。
实现方法：
❓ 输出
const myData = {
name: 'Rajat',
city: 'Delhi',
displayStay: function () {
console.log(this.name, 'stays in', this.city)
},
}
myData.displayStay()
// create an object yourData and try to use displayStay
const yourData = {
name: 'name',
city: 'city'
}
// answer
myData.displayStay.call(yourData)
注意：对于箭头函数，这取决于词法作用域，也就是说，取决于声明箭头函数的外部函数。
✔️异步和延迟
async 和 defer 是boolean可以与 script 标签一起加载的属性。它们对于将外部脚本加载到网页中非常有用。
❓ 区别
🏢 亚马逊、沃尔玛和 Flipkart 等大型公司都曾提出过这个问题
用图片解释效果最好：
如果存在多个相互依赖的脚本，请使用defer. 延迟执行脚本会按照其定义的顺序执行。
如果要加载不依赖于任何其他脚本执行的外部脚本，请使用async.
注意：异步属性不保证脚本的执行顺序。
💾本地和会话存储
❓ 区别
localStorage：即使关闭会话，数据仍然保留。
sessionStorage：会话结束时（例如，关闭浏览器标签页时），数据将丢失。
// save
localStorage.setItem('key', 'value')
// get saved data
let data = localStorage.getItem('key')
// remove saved data
localStorage.removeItem('key')
// Same for sessionStorage
⏱️ 定时器 - setTimeout、setInterval、clearInterval
setTimeout()该方法会在指定的毫秒数后调用函数或计算表达式。
setInterval()对指定的时间间隔执行相同的操作。
最后，clearInterval()用于停止计时器。
❓ 输出
console.log('Hello')
setTimeout(() => {
console.log('lovely')
}, 0)
console.log('reader')
// output
Hello
reader
lovely
一个稍微棘手的问题：
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
console.log(i)
}, i * 1000)
}
// output
6
6
6
6
6
简要说明：当setTimeout再次出现时，整个循环已经运行完毕，并且的值i已变为 6。
现在，假设我们想要的结果是 1 2 3 4 5，该怎么办？
var➡️let
为什么这样做会有效？var因为它是全局作用域的，而另一个let作用域是局部作用域的，所以每次迭代都会创建let一个新的对象。i
如果您在解决这些输出问题时遇到困难，请不要担心。订阅第二部分，我们将讲解事件循环和其他高级主题。
特别感谢🗣️ Akansha在roc8举办的精彩讲座，正是这次讲座促成了这篇博文的诞生。欢迎访问她的主页。
如果您觉得这篇文章有用，请分享并留言。
PS：我在推特上发了一些超赞的帖子🧵🔥
文章来源：https://dev.to/rajatetc/js-interview-checklist-part-1-basics-10k6