高效学习三部曲: 找准知识体系；刻意训练；及时反馈;

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个<a>标签，点击的时候弹出对应的序号?(考点-JS作用域)
  答： let i,a;
for(let i=0;i<10;i++){
    a = document.createElement("a");
    a.innerHTML = i + "<br/>"
    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，才能具备网页开发的基础】

10. JS-Web-API-BOM【内容虽然不多，但是你不能不会】

---

11. JS-Web-API-事件【事件不会，等于残废，必考！必考！】

12.JS-Web-API-Ajax【每个工程师必须熟练掌握的技能】

---

13.JS-Web-API-存储【内容虽然不多，但不可不会】

---

14.http 面试题【前后端分离的时代，网络请求是前端的生命线】

---

15.开发环境【不会这些，你就会被认定是菜鸟小白，没做过项目】

---

16. 运行环境【这些会了，你就可以飞了】

---

17. 总结【很有必要带你避免面试犯低级错误】

---

18. 真题模拟【我是来告诉你答案是什么】

补充

JS的十大经典算法

冒泡排序（Bubble Sort）
选择排序（Selection Sort）
插入排序（Insertion Sort）
希尔排序（Shell Sort）
归并排序（Merge Sort）
快速排序（Quick Sort）
堆排序（Heap Sort）
计数排序（Counting Sort）
桶排序（Bucket Sort）
基数排序（Radix Sort）