JS面试题

已于 2023-08-18 17:24:33 修改
阅读量149 收藏
点赞数
分类专栏： 前端面试 文章标签： javascript 前端 开发语言 面试
于 2023-07-03 15:10:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_44963501/article/details/131513110
版权

const,let和var

// 1、声明提升
console.log(name) // undefined
var name='jing'

//2、没有局部作用域
function fun(){
    for(var i;i<3;i++){
        console.log(i)
    } 
    console.log(i) // 3 let的话会报错
}
fun()

//3、声明覆盖 let的话会报错
var name = 'zhangsan'
var name = 'lisi'
console.log(name) // lisi


// 不可以只定义不赋值，不可以重复赋值
const a; // 报错
const b=1
b=2 // 报错

深拷贝和浅拷贝

 基本数据类型，赋值 ，没有什么拷贝不拷贝的

// 1、基本数据类型 
// 赋值    硬说的话是深拷贝
let a = 5
let b = a
b = 3

 数组/对象赋值，浅拷贝

// 2、赋值-数组与对象的都是浅拷贝

let arr = [1,2,3]
let newArr = arr
newArr.push(4) 
console.log(arr,newArr) // [1,2,3,4]

解构赋值-深拷贝？浅拷贝？
 一维解构赋值深拷贝，多维解构赋值浅拷贝


let arr = [1,2]
let newArr = [...arr]
newArr.push(3) // 不影响arr

let arr2 = [[1,2],[3,4]]
let newArr2 = [...arr2]
newArr[0].push(6) // arr一样变化

JSON.parse(JSON.stringify())实现深拷贝

function不可以  // function=> 'function'

let arr = [{
            name:'张三',
            age:2,
            },
            {
            name:'李四',
            age:3,
            }]

let newArr = JSON.parse(JSON.stringIfy(arr))
newArr.push({id:0}} // 不影响arr

手写deepClone方法，实现深拷贝

 // 引用数据类型 （数组/对象）
  function  deepClone(obj) {
      let targetObj = obj.constroctor === Array ? [] : {};
      for (key in obj) {
        if (obj.hasOwnProperty(key)) {
             
          if (obj[key] && typeof obj[key] === "object") {
             // obj[key]是引用数据类型
            //维护层代码，可省略
            targetObj[key] = obj[key].constroctor === Array ? [] : {};
            // 递归
            targetObj[key] = deepClone(obj[key]);
          } else {
            // 基本数据类型
            targetObj[key] = obj[key];
          }
        }
        return targetObj;
      }

this指向问题

全局，指向window，全局方法指向window

     console.log(this); // window

    // 全局方法的this，指向window
    function fun() {
        console.log(this); // window
    }
    fun() // window.fun()

 那么this是谁调用指向谁？不不不

  let o = {
        name: '小红',
        fun1: function () {
            console.log(this);// o 对象
        }
    }
    o.fun1() 

    var obj = {
        name: '小绿',
        fun1: function () {
            console.log(this.name);// 小绿
        }
    }
    window.obj.fun1()

this指向上一级调用者，可以说是点前面的那个 


    var j = {
        a: 10,
        b: {
            a: 12,
            fn: function () {
                console.log(this.a); // 12
                console.log(this); // b对象
            }

        }
    }
    j.b.fn() // 12

    // this指向上一级调用者，点前面的那个对象

 剪头函数的this呢？

指向外层，因为箭头函数是没有作用域的

   //   箭头函数

    var id = 88

    function fn5() {
        let id = 9999
        // 剪头函数没有作用域，没有this，指向外层
        setTimeout(() => {
            console.log(this.id); // 88
            console.log(this); // window

        }, 500)
    }
    fn5({
        id: 66
    })
    var q = {
        a: 10,
        b: {
            a: 12,
            fn: ()=> {
                console.log(this.a); // undefined
                console.log('q',this); // window
            }

        }
    }
    q.b.fn()

 改变this指向call，apply，bind

如果让fn5的内部打印的不是22，而且传入的age呢？

使用call，apply，bind

        var age = 22

        function fn5(args1, args2) {
            console.log('fn5', args1, args2);
        
            setTimeout(() => {
                console.log(this.age); 
                console.log(this);

            }, 500)
        }
        //改变this
        //call apply,bind
        //call 传参=> {} apply=>[] 会自动执行一次 ， bind不会自动执行
        fn5.call({
            age: 44
        }, 1, 2)
        fn5.apply({
            age: 55
        }, [3, 4])
        fn5.bind({
            age: 66
        }, 5, 6)() // 需要调用一下

区别 

        1、call和apply在改变完this。后会自动执行一次

                bind，不会自动执行

       2、 call传参方式是对象，apply传参是数组

闭包

闭包是什么？

方法返回一个方法！？感觉不准确，返回的方法里面需要引用了其中的变量

所以，闭包可以说是：包含被引用的变量（函数）的对象（看图解）

func1是闭包

产生闭包的条件？ 
  1. 存在函数嵌套（方法返回一个方法）
  2. 内部函数引用了外部函数的数据(变量/函数)，并执行了外部函数 ( 执行引用了其变量（函数）的函数之后，才产生闭包 

比如上图，再不行，看下图

闭包的作用 

前言

       let a = 'jing'

        function fun() {
            let b = 1
            console.log(a);
        }
        // console.log(b); // 报错
        fun()

 为什么访问不到b,可以访问到a?

在js中，，会有AO（临时变量对象active object ） =>包含{方法,局部变量}

AO程序执行完后，就会被垃圾机制回收

全局变量不会被回收

如何外层访问到b？用闭包。那么闭包的作用是

<!-- 1、避免变量污染 -->

<!-- 2、私有化 -->

<!-- 3、保存变量，常驻内存，（不会被回收机制回收） -->

// demo 1
   function fun2 () {
            let a = 2
            let b = 3

           function fn(c) {
                return {num:a+c,a}
            }
            // fn()
            return fn

        }
        let a = 999
        const fun3 = fun2()
        console.log(fun3(2)); // {num:4,2}
        console.log(fun3(3)); // {num:5,2}

// demo2
    function closeDemo(){
            let val = 0
            function changeVal(num){
                val+=num
            }
            return {
                add1:(num)=>{
                    changeVal(1)
                },
                value:()=>{
                    return val
                }
            }
        }
        let closeFun = closeDemo()
        closeFun.add1()
        closeFun.add1()
        console.log(closeFun.value()); // 2

1、 外部的a不影响内fun2中的a =》避免变量污染，私有化

2、分别传入c=2，c=3，可以得到 a=2，a+c 计算后的结果 =>保存变量，常驻内存

闭包的实际应用场景
防抖

固定时间内，多次触发合为一个，每次触发重头开始计算时间

const debounce = (fn, delay) => {
// 多个合为一个，每次触发重头开始计算时间
    let timer = null
    return () => {
        clearTimeout(timer)
        timer = setTimeout(fn(), delay)
    }
}
节流 

不论触发多少次，固定时间只能执行一次



const throttle = (fn, delay) => {
    // 不论多少次，固定时间只能一次
    let init = false
    let timer;
    return (event) => {
        if (init) return
        init = true // 记录状态
        clearTimeout(timer) // 进入先清空延时
        timer =  setTimeout(() => {
            // 到时间重置，可再次进入执行
            init = false
        }, delay)
        fn(event)
    }

}

obj = Object.create(null) 和 obj = {} 的区别

        let obj ={}
        let obj1 = Object.create(null)
        let obj2 = new Object()
         console.log('obj',obj,'obj1',obj1,'obj2',obj2);
        //  obj1 是很纯净的对象，没有原型链 
        // 因为没有原型链，循环时候效率会高一点

控制台打印结果 

 

    obj1 是很纯净的对象，没有原型链 
    因为没有原型链，循环时候效率会高一点 

new关键字

   function Person() {
            this.name = 'jing'
            this.fn = function () {
                console.log(`名字是${this.name}`);
            }

        }
        // let user = new Person()
        // console.log('user',user);

new的一瞬间发生了什么

// 1、 创建一个空对象

    let obj = new Object()
// 2、设置原型链
    
    obj.__proto__ = Person.prototype

// 3、改变this的指向

    let result = Person.call(obj)

// 4、判断返回类型

    if(typeof result =='object'){

        user = result
    }else{
        
        uesr = obj
    }

为何判断返回类型？

普通函数默认返回值：undefined

构造函数默认返回值：新创建的对象

事件委托

js事件委托，就好比委托前台帮自己收快递（统一处理某个事件），即将来的同事也可以来了后委托前台帮忙收快递（新添加的元素）

什么是事件委托？

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的托幼事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
</head>
<body>
    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <button id="btn">点击加一</button>
    <script>
        let ul = document.getElementById('ul')
        ul.onclick=function(event){
            event=   event||window.target
            console.log(event);
            let {target} = event
            // 事件委托
            if(target.nodeName==='LI'){
                alert(target.innerText)
            }
        }
        const btn = document.getElementById('btn')
        btn.onclick = (()=>{
            const el = document.createElement('li')
            el.textContent='4'
            ul.appendChild(el)
        })
    </script>
</body>
</html>

promise

为什么有pormise，之前是什么代替了promise的工作？

回调函数！之前对于异步后续要执行的逻辑。都用回调实现。一直回调，逻辑复杂会形成回调地狱。可维护性差

promise是什么

promise是一个构造函数，用于表示一个异步操作的最终完成 (或失败)及其结果值。

promise应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6-promise应用</title>
</head>
<body>
    <script>
        // 为什么会有promise，没有promise之前是谁实现了promise做的事情？
        // 回调函数 :想要顺序执行异步，就需要回调。但是逻辑复杂后，回调地狱，可维护性差
        // run(0)
        // setTimeout(()=>{
        //     run(1)
        //     setTimeout(()=>{
        //         run(2)
        //     },500)
        // ,1000})
        
        // Promise怎么用
        // Promise =》 承诺，诺言---->异步任务
        /*
       许一个承诺(送包包) new Promise ----> 开始等待 状态：pendding（等待）---->实现了 状态：（fulfilled 成功)--》送礼物resolve()
                                                        |
                                                        |  食言了(rejected 失败)
                                                        |
                                                        v
                                                    给出理由 reject()
        */
        let isForget = false // 是否记得
        let getLv = new Promise((resolve,reject)=>{
            if(isForget){
                let lv ={
                    color:'red',
                    price:'1999'
                }
                resolve(lv)
            }else{
                let err = new Error("加班太忙，忘记了")
                reject(err)
            }

        })
        let testFn = function(){
            getLv.then((fulfilled)=>{
                console.log('isForget = true,记得承诺，获包包');
                console.log(fulfilled);
            }).catch((rejected)=>{
                console.log('isForget = false,忘记了，给出理由');
                console.log(rejected.message);

            })
        }
        testFn()
    </script>
</body>
</html>

手写promise

github：promise相关

数组相关方法

jion （链接），split（分割）

push (尾部添加）返回：长度        pop（尾部删除）返回：删除项   

改变原数组

unshift（头部添加）返回：长度        shfit（头部删除）返回：删除项

改变原数组

splice(start,howmany,itemX)（移除，插入，更新）返回：更新/删除项       

slice(start,end)（移除）返回：删除项

区别：1、 splice 3个参数，slice参数两个

           2、splice 会改变原数组，slice不会

           3、splice可以给数组查询新元素，slice不能

            

axios取消请求

方式一：使用 CancelToken.souce 工厂方法创建一个 cancel token，

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://mdn.github.io/dom-examples/abort-api/sintel.mp4', {
  cancelToken: source.token
}).catch(function (thrown) {
  // 判断请求是否已中止
  if (axios.isCancel(thrown)) {
    // 参数 thrown 是自定义的信息
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

那么我们是如何判断请求的中止状态呢？

axios 为我们提供了一个 isCancel() 方法，用于判断请求的中止状态。isCancel() 方法的参数，就是我们在中止请求时自定义的信息。

方式二：通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel('Operation canceled by the user.');

事件循环机制先执行宏任务还是微任务？

<!-- 脚本 1 -->
<script>
  // 同步
  console.log("start1");
  // 异步宏
  setTimeout(() => console.log("timer1"), 0);
  new Promise((resolve, reject) => {
    // 同步
    console.log("p1");
    resolve();
  }).then(() => {
    // 异步微
    console.log("then1");
  });
  // 同步
  console.log("end1");
</script>

<!-- 脚本 2 -->
<script>
  // 同步
  console.log("start2");
  // 异步宏
  setTimeout(() => console.log("timer2"), 0);
  new Promise((resolve, reject) => {
    // 同步
    console.log("p2");
    resolve();
  }).then(() => {
    // 异步微
    console.log("then2");
  });
  // 同步
  console.log("end2");
</script>

执行结果

  • 宏任务包括：setTimeout setInterval Ajax DOM事件
  • 微任务：Promise async/await

整个浏览器循环应该是 先执行 宏任务 -> 同步代码 -> 微任务,直到当前宏任务中的微任务清理完毕,继续执行下一个宏任务,以此类推。Script是一个宏任务

 

高高i
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript面试题15道
wo_2123311的博客
04-26 4896
​ 1、JavaScript中数据类型有几种？ 在JavaScript中数据类型分2种，分别是简单数据类型和复杂数据类型。 简单数据类型有：undefined，null，number，string，布尔值。 复杂数据类型有：object，array，function，data等 2、在JavaScript中简单数据类型和复杂数据类型在内存中是如何存储的？ 简单数据类型：当我们声明一个简单数据类型的变量a时，栈里面会开辟一块新的存储空...
js 面试题
weixin_68166404的博客
09-01 363
​ pop() 删除数组的最后一个元素并返回删除的元素。​ reverse() 反转数组 ​ shift() 删除第一元素 并返回删除的元素 ，原数组会改变 ​ slice(1,2) 数组截取 参数1 开始位置 参数2结束位置 但不包含结束下标元素 ​ sort 排序。a++){ ​ if(arr[i]>arr[a]){ ​ [arr[i],arr[a]]=[arr[a],arr[i]] ​ } ​ } } console.log(arr)(注意a=i+1 不是a=a+1,使用了解构赋值的写法)...
前端人必看的JS面试题汇总
m0_49931406的博客
09-08 5179
前端开发虽然是一项实践性较强的工作，但是理论知识也是非常重要的，想要在众多求职者中脱颖而出，就要理论基础与实操技能两手抓。
【javaScript面试题】2023前端最新版javaScript模块，高频24问
嗨，朋友你好！我是前端领域的工作者
03-03 2万+
2023前端领域jsvaScript面试题精选
html，css，js面试题
zhangnx10000的博客
06-09 1524
它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所有的人能在这些设备上让网站运行正常浮动就是让元素可以向左或向右移动，浮动元素会从文档的正常流中脱离，但是他还是会影响布局，当一个元素浮动时，其他内容会“环绕”该元素浮动元素会脱离标准流(脱标)浮动的元素会一行内显示并且元素顶部对齐浮动的元素会具有行内块元素的特性浮动元素不会影响它前面的元素Ajax 是一种通过后台与服务器进行少量的数据交换，使页面实现异步更新。是一种创建交互式网页应用的网页开发技术。
js面试题
Yydemo1的博客
03-22 1339
现在对象的本身查找 =》对象的构造函数中查找=》对象的原型上查找=》构造函数的原型中查找=》Object.prototype中查找。方式三：Object.prototype.toString.call().(arr).indexOf('Array')>-1。1.浅拷贝：只复制引用，而未复制真正的值（指向同一块内存空间），其中一个被修改，其他也会被修改；1.对象是通过new出来的，所以对象之间不相等 注：引用类型例外，也就是浅拷贝的类型。语法：fn.call()、fn.apply()、fn.bind();
2024年前端面试题汇总
热门推荐
sun_qqq的博客
02-08 8万+
最近面试被打击的体无完肤，于是把面试题记录下来分享一下。vue真是必问框架，八股文该背的还是得背！
91道JavaScript面试题，内含详细讲解（涵盖入门到精通，自测JS掌握程度）
csdnlaoban的博客
04-18 727
4.1,说说你对作用域链的理解？4.2,this？4.3,请说出下列的值？
js面试题 高频 含答案
温情
06-30 1万+
1. 讲一下 var, let, const 的区别? var 声明的变量有变量提升的特性，而 let、const 没有 var 声明的变量会挂载到 windows 对象上，所以使用 var 声明的是全局变量，而 let 和 const 声明的变量是局部变量, 块级作用域外不能访问 同一作用域下 let 和 const 不能重复声明同名变量，而var可以 const声明的是常量，必须赋初值，一旦声明不能再次赋值修改，如果声明的是复合类型数据，可以修改其属性 2. js中的基础数据类型有哪
JavaScript面试题,JS面试题,WEB前端面试题下载.pdf
12-14
JavaScript 面试题知识点总结 JavaScript 面试题是前端开发领域中常见的面试题，涵盖了 JavaScript 基础、Web 前端开发等方面的知识点。本文将对 JavaScript 面试题的知识点进行总结，包括 Object.create、...
JavaScript面试题
11-16
### JavaScript面试题详解 #### 一、正则表达式匹配规则 **题目**: 判断字符串以字母开头，后面可以是数字、下划线或字母，长度为 6-30。 **解答**: 正则表达式是 JavaScript 中用于模式匹配的强大工具。本题中的...
JavaScript面试题汇总，内含答案
04-15
### JavaScript面试题知识点详解 #### 一、单选题知识点 **1. 语句运行错误** - **选项解析：** - A. `var obj = ( );`：这是一个空的函数调用，但在没有定义具体函数的情况下直接使用括号会引发语法错误。 - B...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1135
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 170
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 154
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 597
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 713
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 1054
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
JavaScript面试题及答案总结
《JavaScript 60道面试题及答案.docx》是一份包含60道JavaScript面试题及答案的文档。其中涵盖了各种JavaScript基础与进阶知识，供面试者参考和复习。 在JavaScript中，XMLHttpRequest对象是用于与服务器交互的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高高i

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值