高效学习三部曲: 找准知识体系；刻意训练；及时反馈;
1.介绍【说说面试的那些事儿】
1. typeof 能判断哪些类型？(考点-JS变量类型)
答：object undefined string number boolean symbol
2. 何时使用 === 何时使用 == ？(考点-强制类型转换)
答：两等 == (称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；)
100 == ‘100’ // true
0 == ‘’ // true
0 == false // true
false == '' // true
null == undefined // true
三等 === (称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false)
100 === ‘100’ // false
0 === ‘’ // false
0 === false// false
false === '' // false
null === undefined // false
3. window.onload 和 DOMContentLoaded的区别？(考点-页面渲染过程)
答：
4. JS 创建10个标签，点击的时候弹出对应的序号?(考点-JS作用域)
答： let i,a;
for(let i=0;i<10;i++){
a = document.createElement("a");
a.innerHTML = i + "
"
a.addEventListener("click",function(e){
e.preventDefault();
alert(i)
})
$("#app").append(a)
}
5. 手写节流 throttle, 防抖 debounce?(考点-性能，体验优化)
答：
6. Promise 解决了什么问题?(考点-JS异步)
答：
2.面试前的准备【要知己知彼，不打无准备之仗】
3.CSS 面试题【不多说了，前端面试 CSS 是必考知识，不过关直接回家】
4.JS基础-变量类型和计算【不会变量，别说你会JS】
3. 值类型和引用类型的区别
答: 值类型 ： let a= 100;b = a ; a = 200; console.log(b) // 100 这里A 是A B是B 互不干涉
引用类型: let a = {age:20}; let b= a; b.age = 20; console.log(a.age) // 21 相互干扰
栈：队列优先,先进先出 (值类型) 由上向下
堆：先进后出； (引用类型) 由下向上
***********************************************************
4. 手写深拷贝
答: 浅拷贝
const obj1 = {
age:20,
name:"xxx",
address:{
city:"beijing"
},
arr:["a","b","c"]
}
const obj2 = obj1
obj2.address.city = "shagnhai";
console.log(obj1.address.city) // shanghai
// 深拷贝 {Object} obj 要拷贝的对象
function deepClone(obj = {})
{
if(typeof obj !== "object" || obj == null)
{
return obj; // obj 是null ，或者不是对象和数组，直接返回
}
// 初始化返回结果
let result;
if(obj instanceof Array) // 判断是不是数组
{
result = []
}else{
result = {}
for(let key in obj)
{
if(let key in obj){
// 保证 key 不是原型的属性
if(obj.hasOwnProperty(key))
{
// 递归调用
result[key] = deepClone(obj[key])
}
}
}
// 返回结果
return result ;
}
***********************************************************
5. 字符串拼接
数字+ 数字 数字+字符串 布尔值 + 字符串
***********************************************************
6. ==
两等 == (称为等值符，当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；)
100 == ‘100’ // true
0 == ‘’ // true
0 == false // true
false == '' // true
null == undefined // true
三等 === (称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false)
100 === ‘100’ // false
0 === ‘’ // false
0 === false// false
false === '' // false
null === undefined // false
7. if
5.第5章 JS基础-原型和原型链【三座大山之一，必考！！！】
1. class 和继承
例：
class Student{
constructor(name,number) {
this.name = name
this.number = number
}
asyHi(){
console.log(
`姓名${this.name},学号 ${this.number}`
)
}
}
// 通过类 new 对象/实例
let Stu = new Student("张三",100);
console.log(Stu.name)
console.log(Stu.number)
Stu.asyHi();
继承 ：extends
class Student extends People{
constructor(name) {
super(name)
}
}
***********************************************************
2. 类型判断 instanceof
a instanceof Array 判断 a 是不是一个数字
a instanceof Object 判断 a 是不是一个对象
、
***********************************************************
3. 原型和原型链
每个class 都有显示原型 prototype
每个实例都有隐私式原 型 _proto_
实例的 _proto_ 指向对应 class 的 prototype
360截图16570129346053.png
360截图17001022163620.png
6.第6章 JS基础-作用域和闭包【三座大山之二，不会闭包，基本不会通过】
1. this 的不同应用场景，如何取值?
1.1 作为普通函数
function fn1(){
console.log(this)
}
fn1(); // window
1.2 使用call apply bind
fn1.call({x:100}) // {x:100}
const fn2 = fn1.bind({x:200})
fn2() // {x:200}
1.3 作为对象方法被调用
// this 即当前对象
1.4 在class 方法中调用
// this 即当前对象
1.5 箭头函数
// this 即当前对象
const zhangsan = {
name:"张三",
sayHi(){
// this 即当前对象
console.log(this)
},
wait(){
setTimeout(() => {
// this 即当前对象（上级）
console.log(this)
})
}
}
***********************************************************
2. 手写 bind 函数
Function.prototype.bind1 = function(){
// 将参数解析为数组
const args = Array.prototype.slice.call(arguments)
// 获取 this（取出数组第一项，数组剩余的就是传递的参数）
const t = args.shift()
const self = this // 当前函数
// 返回一个函数
return function() {
// 执行原函数，并返回结果
return self.apply(t,args);
}
}
***********************************************************
3. 实际开发中闭包的应用场景
3.1 隐藏数据
3.2 做一个简单的 cache工具
3.3
***********************************************************
4. 闭包
一.什么是闭包
闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)
闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在函数执行完之后依旧保持没有被垃圾回收处理掉
所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方
作用域应用的特殊情况，有两种表现：
4.1 函数作为参数被传递
// 函数作为参数
let b = 100
function print(fn){
let b = 200
fn1()
}
// 因为作用域 所有只会向上找
function fn1(){
console.log(b)
}
print(fn); // 100
4.2 函数作为返回值被返回
// 函数作为返回值
function create(){
let a = 100;
return function(){
// 因为作用域 所有只会向上找
console.log(a)
}
}
const fn = create();
const a = 200;
fn() // 100
***********************************************************
5.作用域和自由变量
// 作用域
let a =0 ;
function fun1(){
let a1 = 100
function fun2(){
let a2 = 200
function fun3() {
let a3 = 300
console.log(a+a1+a2+a3)
return a+a1+a2+a3
}
fun3()
}
fun2()
}
fun1()
作用域： 全局作用域 函数作用域 块级作用域(es6)
7.第7章 JS基础-异步【三座大山之三，必考！！！】
7.1 同步和异步的区别是什么?
基于JS是单线程语言
// 异步 (callback 回调函数) 不会阻塞代码执行
console.log(100)
setTimeout(()=>{
console.log(200)
},1000)
console.log(300)
// 同步 会阻塞代码执行
console.log(100)
alert(200)
console.log(300)
***********************************************************
7.2 手写用Promise 加载一张图片
const url ="/xxxx.png"
function loadImg(src){
return new Promise(
(resolve,reject) => {
const img = document.createElement("img");
img.onload = () =>{
resolve(img)
}
img.onerror = () =>{
reject(new Error(`图片加载失败${src}`))
}
img.src = src
})
}
// 调用
loadImg(url).then(img=>{
console.log(img.width)
return img
}).then(img => {
.....
})
***********************************************************
7.3 前端使用异步的场景
网络请求 & 定时任务
console.log("start")
$.get('./data1.json',function(data){
console.log(data)
}
console.log('end')
***********************************************************
7.4 单线程和异步
JS 是单线程语言，只能同时做一件事儿
浏览器和node.js 以支持JS启动进程
JS 和DOM渲染共同用一个线程，因为JS 可修改DOM 结构
遇到等待(网络，定时任务)不能卡住
所以需要异步
回调 callback 函数形式
***********************************************************
7.5 场景
// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function(){
console.log('loaded')
}
img.src="/xxx.jpg"
console.log('end')
console.log(1)
setTimeout(() => {
console.log(2)
},1000)
***********************************************************
7.6 callback hell 和 Promise（回调地狱）
// 回调地狱 例子 （callback hell 就是 callback 嵌套）
// 获取第一份数据
$.get(url1,(data1) => {
console.log(data1)
// 获取第二份数据
$.get(url1,(data2) => {
console.log(data2)
// 获取第三份数据
$.get(url1,(data3) => {
console.log(data3)
})
})
})
// Promise（用来解决 地狱回调的）
function getData(url){
return new Promise((resolve,reject) => {
$.ajax({
url,
success(data){
resolve(data)
},
error(err){
reject(err)
}
})
})
}
// 调用 Promise
const url1 ="/data1.json"
const url2 ="/data1.json"
const url3 ="/data1.json"
getData(url1).then(data1 => {
console.log(data1)
return getData(url2)
}).then(data2 => {
console.log(data2)
return getData(url3)
}).then(data3 => {
console.log(data3)
}).catch(err => {
console.log(err)
})
***********************************************************
8.第8章 JS 异步进阶【想要进大厂，更多异步的问题等着你】
9.JS-Web-API-DOM【学会DOM，才能具备网页开发的基础】
- JS-Web-API-BOM【内容虽然不多，但是你不能不会】
- JS-Web-API-事件【事件不会，等于残废，必考！必考！】
12.JS-Web-API-Ajax【每个工程师必须熟练掌握的技能】
13.JS-Web-API-存储【内容虽然不多，但不可不会】
14.http 面试题【前后端分离的时代，网络请求是前端的生命线】
15.开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】
- 运行环境【这些会了，你就可以飞了】
- 总结【很有必要带你避免面试犯低级错误】
- 真题模拟【我是来告诉你答案是什么】
补充
JS的十大经典算法
冒泡排序（Bubble Sort）
选择排序（Selection Sort）
插入排序（Insertion Sort）
希尔排序（Shell Sort）
归并排序（Merge Sort）
快速排序（Quick Sort）
堆排序（Heap Sort）
计数排序（Counting Sort）
桶排序（Bucket Sort）
基数排序（Radix Sort）