前端面试基础二

typeof 能判断哪些类型?

考点: js 变量类型

• 识别所有值类型
• 识别函数
• 判断是否是引用类型(不可在细分)

判断所有值类型

let a; typeof a // 'undefined'
const str = 'abc'; typeof str // 'string'
const n = 100; typeof str // 'number'
const b = true; typeof str // 'boolean'
const s = Symbol('s'); typeof str // 'symbol'

识别函数

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

判断是否是引用类型(不可在细分)

typeof null // 'object'
typeof ['a', 'b'] // 'object'
typeof {x: 100} // 'object'

发散面试题-深拷贝

const obj1 = {
    age: 30,
    name: 'yang',
    address: {
        city: '北京',
        area: '昌平'
    },
    arr: ['a', 'b', 'c']
}

const obj2 = deepClone(obj1)

obj2.address.city = '上海'
console.log(obj1.address.city) // 北京
console.log(obj2.address.city) // 上海

/**
 * @description: 深拷贝
 * @param {object} obj 要深拷贝的对象 
 * @return: {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
}

何时使用 == 何时使用 === ?

考点: 强制类型转换

== 运算符

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

== 尽量让他们的值转换之后去对比相等

什么时候用 === ?

// 除了 == null 之外, 其它的一律都用 ===, 如
const obj = { x: 100 }
if (obj.a == null) {}
// 相当于 if (obj.a === null || obj.a === undefined) {}

if 语句和逻辑运算

// 一下是 falsely 变量, 除此之外都是 truly 变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

逻辑判断

console.log(10 && 0) // 0
console.log(0 && 10) // 0
console.log('' || 'abc') // abc
console.log(!window.abc) // true

值类型和引用类型的区别?

考点: 强制类型转换

const obj1 = { x: 100, y: 200 }
const obj2 = obj1
let x1 = obj1.x
obj2.x = 101
x1 = 102
console.log(obj1) // { x: 101, y: 200 }

window.onload 和 DOMContenLoaded 的区别?

考点: 页面加载过程

...

JS 创建 10 个 <a> 标签, 点击的时候弹出对应的序号

考点: js 作用域

...

手写节流 throttle, 防抖 debounce

考点: 性能, 体验优化

...

Promise 解决了什么问题?

考点: js 异步

...

前端知识体系

JS 基础语法

JS-Web-API

开发环境

运行环境