Javascript前端面试知识学习

Javascript前端面试知识学习

---

拿到一个面试题，第一时间看到->考点
如何看待做不完的题海->题可变，考点不变
so->看到题目先想到知识点，再会来看题目

• typeof能判断的类型？
  考点:js变量类型
• 何时使用=== , 何时使用 ==
  考点：强制类型转换
• window.onload和DOMContentLoaded区别
  考点：页面加载过程
• JS创建10个a标签，点击弹出对应的序号
  考点：JS作用域
• 手写节流throttle和防抖debounce
  考点：性能、体验优化
• Promise解决什么问题？
  考点：JS异步

---

JS前端知识体系

• JS基础语法
• JS-Web-API
• 开发环境
• 运行环境
  
  

---

第二章 变量类型和计算

• 题目
• typeof能判断哪些类型
• 何时使用=== , 何时使用 ==
• 值类型和引用类型的区别
• 手写深拷贝
• 知识点
• 值类型vs引用类型
• typeof运算符
• 深拷贝

---

值类型

            let a = 100;
            let b = a;
            a = 200;
            console.log(b)//100

引用类型

            let a = { age: 20 };
            let b = a;
            b.age = 21;
            console.log(a.age)//21
            // ab在堆中都指向同一个内存地址 所以b改变a也改变

深入分析

• 值类型
  

• 引用类型
  

为什么=会让引用类型指向同一个内存地址？

因为一个对象可能会很大，导致栈中value过大，如果此时复制该对象，会让系统运行很慢。

常见值类型

            let a //undefined
            const a //error
            const s = 'abc' //String
            const n = 100 //Number
            const b = true //Boolean
            const s = Symbol('s') //ES6 Symbol

常见引用类型

            const obj = { x: 100 }//object
            const arr = [1, 2, 3]// object
            const n = null// 特殊引用类型，指针指向空地址
            function fn() { } //特殊引用类型，但不用于存储数据
            //所以没有“拷贝、复制函数”这一说

typeof运算符

• 识别所有值类型

            let a //undefined
            const str = 'abc' //typeof str ,String 
            const n = 100 //typeof n ,Number
            const b = true //typeof b ,Boolean
            const s = Symbol('s') //typeof s,Symbol

• 识别函数

            typeof console.log//function
            typeof function () { } //function

• 判断是否是引用类型（不可再细分）

            typeof null //object
            typeof [1, 2] //object
            typeof { x: 100 } //object

深拷贝

            const obj1 = {
                age: 20,
                name: 'chen',
                address: {
                    city: 'beijing'
                },
                arr: [1, 2, 3]
            }
            const obj2 = obj1//浅拷贝 obj2与obj1指向相同内存地址
            const obj3 = deepClone(obj1)// 深拷贝 obj3与obj1指向不同内存地址

            obj2.address.city = 'hua'
            console.log(obj1.address.city)// hua
            obj3.address.city = 'chun'
            console.log(obj1.address.city) //hua
            console.log(obj3.address.city) //chun

            /**
            * 深拷贝
            * @param {Object} obj 要拷贝的对象
            */
            function deepClone(obj = {}) {
                if (typeof obj !== 'object' || obj == null) {
                    // obj是Null,或者不是对象和数组，直接返回
                    return obj
                }
                //初始化返回结果
                let result
                if (obj instanceof Array) {
                    result = []
                }
                else {
                    result = {}
                }

                for (let key in obj) {
                    // 保证key不是原型的属性
                    if (obj.hasOwnProperty(key)) {
                        //递归调用 ！目的在于找出多层对象里的值类型。
                        result[key] = deepClone(obj[key])
                    }
                }

                //返回结果
                return result
            }

• 浅拷贝与深拷贝的堆栈模型图

• 浅拷贝：复制所考虑的对象，而不复制他所引用的对象
  

• 深拷贝：深拷贝把要复制的对象所引用的对象都复制了一边
  

变量计算-类型转换

• 字符串拼接
• 出现条件：+号与字符串

            const a = 100 + 10 //110
            const b = 100 + '10' //'10010'
            const c = true + '10' // 'true10'

变量计算-类型转换

• ==运算符

            100 == '100'//true
            0 == ''//true
            0 == false //true
            false == '' //true
            null == undefined //true