前端高频面试题

2024-01-11 17:17:40

文章目录

1.var和let const的区别

var是 ES5语法，let const是ES6语法;var有变量提升
var和let是变量，可修改;const是常量，不可修改;
let const有块级作用域，var没有

2.typeof 返回哪些类型

值类型：undefined string number boolean symbol
引用类型：object（注意，typeof null === ‘object’’)
函数：function

3.列举强制类型转换和隐式类型转换

强制:parseInt parseFloat toString 等
隐式:if、逻辑运算、==、＋拼接字符串

4.手写深度比较，模拟lodash.isEqual

// 判断是否是对象或数组
function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}
// 全相等（深度）
function isEqual(obj1, obj2) {
    if (!isObject(obj1) || !isObject(obj2)) {
        // 值类型（注意，参与 equal 的一般不会是函数）
        return obj1 === obj2
    }
    if (obj1 === obj2) {
        return true
    }
    // 两个都是对象或数组，而且不相等
    // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
    if (obj1Keys.length !== obj2Keys.length) {
        return false
    }
    // 2. 以 obj1 为基准，和 obj2 一次递归比较
    for (let key in obj1) {
        // 比较当前 key 的 val —— 递归！！！
        const res = isEqual(obj1[key], obj2[key])
        if (!res) {
            return false
        }
    }
    // 3. 全相等
    return true
}

// 测试
const obj1 = {
    a: 100,
    b: {
        x: 100,
        y: 200
    }
}
const obj2 = {
    a: 100,
    b: {
        x: 100,
        y: 200
    }
}

console.log( isEqual(obj1, obj2) )

const arr1 = [1, 2, 3]
const arr2 = [1, 2, 3, 4]

5.split()和join()的区别

6.数组的pop push unshift shift 分别是什么

7.【扩展】数组的API，有哪些是纯函数?

纯函数概念：1. 不改变原数组（没有副作用）；2. 返回一个数组
纯函数：concat、map、filter、slice
非纯函数：push、pop、 shift、 unshift、 forEach、some、every、reduce、splice

8.数组slice和splice的区别

slice -切片，splice-剪接

9.[10, 20,30].map(parseInt)返回结果是什么?

map的参数和返回值
parseInt参数和返回值

parseInt函数将其第一个参数转换为一个字符串，对该字符串进行解析，然后返回一个整数或 NaN

const res = [10, 20, 30].map(parseInt)
console.log(res) // [10,NaN,NaN]

// 拆解
[10, 20, 30].map((num, index) => {
    return parseInt(num, index)
})

结果：[10,NaN,NaN]

10.ajax请求get和post的区别?

get 一般用于查询操作，post 一般用户提交操作
get 参数拼接在url 上 , post放在请求体内（数据体积可更大)
安全性:post易于防止 CSRF

11.函数call和apply的区别

12.事件代理（委托）是什么?

13.闭包是什么，有什么特性?有什么负面影响?

是什么
函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。
应用场景
作为参数被传入，作为返回值被返回
闭包的特性
①封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口；
②持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在；
负面影响：
使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

14.如何阻止事件冒泡和默认行为?

event.stopPropagation()
event.preventDefault()

15.查找、添加、删除、移动DOM节点的方法?

// 新建节点
const newP = document.createElement('p')
newP.innerHTML = 'this is newP'

// 插入节点
div1.appendChild(newP)

// 移动节点
const p1 = document.getElementById('p1')
div2.appendChild(p1)

// 移除节点 
div1.removeChild(node)

// 获取父元素
console.log(p1.parentNode)

16.如何减少DOM操作?

缓存DOM查询结果
多次DOM操作，合并到一次插入

17.解释jsonp 的原理，为何它不是真正的ajax ?

①jsonp的原理：就是利用浏览器可以动态地插入一段js并执行的特点完成的。

②为什么不是真正的 ajax?
ajax的核心是：通过XmlHttpRequest获取非本页内容，
jsonp的核心：动态添加<script>标签来调用服务器提供的js脚本。

具体可参考jasonp和ajax

18.document load 和ready的区别

19.== 和 ===的不同

== 会尝试类型转换
=== 严格相等

20.函数声明和函数表达式的区别

函数声明function fn) {…}
函数表达式const fn = function() {…}
函数声明会在代码执行前预加载，而函数表达式不会

21.new Object()和Object.create()的区别

等同于new Object) ，原型Object.prototype
Object.create(null)没有原型
Object.create(i…})可指定原型

22.关于this的场景题

this的值在执行的时候才知道，第一个this指向user本身，第二个this指向window
答案：1 undefined

23.关于作用域和*变量的场景题-1

答案：4 4 4

24.判断字符串以字母开头，后面字母数字下划线，长度6-30

const reg =/ [a-zA-Z]\w{5,29}$/

\w表示字母、数字或下划线

正则拓展
// 邮政编码
/\d{6}/

// 小写英文字母
/^[a-z]+$/

// 英文字母
/^[a-zA-Z]+$/

// 日期格式 2019.12.1
/^\d{4}-\d{1,2}-\d{1,2}$/

// 用户名
/^[a-zA-Z]\w{5, 17}$/

// 简单的 IP 地址匹配
/\d+\.\d+\.\d+\.\d+/

25.关于作用域和*变量的场景题-2

答案：100 10 10

26.手写字符串trim方法，保证浏览器兼容性

27.如何获取多个数字中的最大值

方法一手写function函数
方法二利用API

28.如何用JS实现继承?

class继承
prototype继承（不推荐）

29.如何捕获JS程序中的异常?

手动捕获（高风险地方）

自动捕获（其它地方）

30.什么是JSON ?

json是一种数据格式，本质是一段字符串。
json格式和JS对象结构一致，对JS语言更友好（全面替代了xml）
window.JSON是一个全局对象
JSON.stringify（对象->字符串） JSON.parse（字符串->对象）

31.获取当前页面url参数

传统方式，查找location.search
新API，URLSearchParams

function query(name) {
    const search = location.search
    const p = new URLSearchParams(search)
    return p.get(name)
}
console.log( query('b') )

码农公寓