前端面试常问题（持续整理中）

最新推荐文章于 2024-09-18 23:16:25 发布

王昱潇

最新推荐文章于 2024-09-18 23:16:25 发布

阅读量1.9k

点赞数

分类专栏：前端学习笔记文章标签： javascript js

本文链接：https://blog.csdn.net/qs52955339/article/details/115523195

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

学习笔记

36 篇文章 0 订阅

订阅专栏

1、js的运行机制？

js主要用途是和用户互动，用来操作DOM，所以js是单线程的，避免了同时操作同一个DOM的矛盾问题。

2、arguments对象是什么？

它是一个类数组对象，它有length属性，但是没有数组的方法。

它是如何转化成数组的呢？

使用ES6中的【...】(展开运算符)

在ES5中的话可以使用Array.prototype.slice.call(arguments)。

注：slice()方法返回一个新的数组丢向，这一对象是由begin和end决定的原数组的浅拷贝（包括begin，不包括end），原数组不会被改变。

示例：

注：箭头函数是没有arguments对象的。

3、哪些操作会造成内存泄露？

闭包
意外的全局变量
没有被清除的定时器
脱离DOM的引用（获取了一个元素，但元素后面被删除的，但是依然在类型中保留了元素的引用，导致没有被回收）

4、ES6的新特性有哪些？

块级作用域
类
箭头函数
展开运算符 (...)
模板字符串（ ${} ）
异步方法promise等等

5、什么是高阶函数？

将函数作为参数或返回值的函数

function func(params, callback) {
      return callback(params)
    }

6、手动实现 Array.prototype.map 方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>手写map</title>
</head>
<body>
  <script>
    var arr = [1, 2, 3]
    var array = arr.map((item, index) => {
      return item*2
    })
    console.log(array)

    function map(arr, mapCallback) {
      //检查参数是否正确
      if(!Array.isArray(arr) || !arr.length || typeof mapCallback !== 'function') return[]
      else {
        //map会返回一个新数组
        let result = []
        for(let i = 0, len = arr.length; i<len; i++) {
          result.push(mapCallback(arr[i], i ,arr))
        }
        return result
      }
    }

    console.log(map(arr, (item) => {
      return item* 2
    }))
  </script>
</body>
</html>

7、数组扁平化处理

数组扁平化是指将一个多维数组变成一个一维数组。

例：const arr = [1,[2,[3,[4,5]]],6]; => [1,2,3,4,5,6]

方法一：

使用数组自带的扁平化方法 flat()

方法二：

使用正则表达式

方法三：使用递归

方法四：使用reduce方法

8、找出页面中所有的标签，不重复的

考点：获取页面元素、数组去重

注：Set返回的并不是真正的数组，需要用展开运算符转换成数组

9、一个页面从输入Url到页面加载显示完成，这个过程都发生了什么？

浏览器根据请求的url 交给DNS域名解析，找到真实ip，向服务器发送请求
服务器交给后端返回数据
浏览器对加载到的资源(html, css, js) 进行语法的解析建立相应的结构
载入解析到的资源文件，渲染页面

10、一次性插入几万个DOM，如何实现页面不卡顿

思路：虚拟滚动 => 只渲染可视化的区域，当用户滚动的时候实时替换渲染的内容

链接一个不错的案例

性能优化：虚拟列表，如何渲染10万条数据的dom，页面同时不卡顿 - 请叫我宋某某 - 博客园

11、前端页面懒加载判断滚动条是否触底，触底就请求第二页的数据

    $(function (){
        //上来的时候默认加载第一页的数据
        var num = 1
        imgList(num)

        $(window).scroll(function (){
            //获取当前视口的高度
            var _h = $(this).height()
            //获取当前页面的高度
            var h = $(document).height()
            //获取滚动条距离顶部的高度
            var scrollTop = Math.ceil( $(this).scrollTop)  //取整

            if(scrollTop + _h >= h) {
                //滚动条触底
                num++
                imgList(num)
            }
        })
    })

    function imgList() {
        //加载后端接口数据的方法
    }

12、src和href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。