JS 快速搞定前端技术

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

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,才能具备网页开发的基础】

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

  1. JS-Web-API-事件【事件不会,等于残废,必考!必考!】

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


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


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


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


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

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

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

补充

JS的十大经典算法

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

你可能感兴趣的:(JS 快速搞定前端技术)