2024金三银四前端面试划重点了，讲清楚了就是逢面必过

程序员的金三银四求职宝典

又到了一年一度的金三银四，前端的孩子们太难了，大环境不好，不好好学习，生产队的驴也会下岗，别闲着了，这篇文章给你面试划重点了！！！！！

1.必问一：const，var，let的区别

• 只有var可以垮块访问，其他都不能垮块访问。 var也可以重新声明和更新变量，也可以提升到其作用域的顶部。 三个都不能垮函数访问 let声明变量更安全，在声明之前尝试使用 let 变量，会得到一个 Reference Error。

• var 声明是全局作用域或函数作用域，而 let 和 const 是块作用域。var 变量可以在其作用域内更新和重新声明； let变量可以更新但不能重新声明；const 变量既不能更新也不能重新声明。 它们都被提升到了作用域的顶部。但是，var 变量是用 undefined 初始化的，而 let 和 const 变量不会被初始化。 var 和 let 可以在不初始化的情况下声明，而const 必须在声明时初始化。

1.var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
2.let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
3.const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。
4.同一个变量只能使用一种方式声明，不然会报错。

• 代码实例，块作用域{}中的区别，加深理解

    //原先js作用域有全局作用域，函数作用域，es6新增了块级作用域{},if和for的{}也是块级作用域

    {
   
        var a = 1;
        console.log(a); // 1
    }
    console.log(a); // 1
    // 可见，通过var定义的变量可以跨块作用域访问到。

    (function A() {
   
        var b = 2;
        console.log(b); // 2
    })();
    // console.log(b); // 报错，
    // 可见，通过var定义的变量不能跨函数作用域访问到

    if(true) {
   
        var c = 3;
    }
    console.log(c); // 3
    for(var i = 0; i < 4; i++) {
   
        var d = 5;
    };
    console.log(i); // 4   (循环结束i已经是4，所以此处i为4)
    console.log(d); // 5
    // if语句和for语句中用var定义的变量可以在外面访问到，
    // 可见，if语句和for语句属于块作用域，不属于函数作用域。

    {
   
        var a = 1;
        let b = 2;
        const c = 3;    

        {
   
            console.log(a);     // 1    子作用域可以访问到父作用域的变量
            console.log(b);     // 2    子作用域可以访问到父作用域的变量
            console.log(c);     // 3    子作用域可以访问到父作用域的变量

            var aa = 11;
            let bb = 22;
            const cc = 33;
        }

        console.log(aa);    // 11   // 可以跨块访问到子 块作用域 的变量
        // console.log(bb); // 报错   bb is not defined
        // console.log(cc); // 报错   cc is not defined
    }


    console.log (greeter);
    var greeter = "say hello"
    //undefined

   //var变量的提升到作用域的顶部，并使用undefined值进行初始化
    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"
    //'say hello'

2.必问二：bind、call、apply的区别

先看一下bind、call、apply的代码用法，

var a = {
   
    user:"良人",
    fn: function(arg1, arg2) {
   
        console.log(this.user)  // 良人
        console.log(arg1+ arg2) // 2
    }
}
var b = a.fn

1、bind的用法

var c = b.bind(a) // 返回一个已经切换this指向的新函数
c(1,1)

2、apply的用法

b.apply(a, [1, 1])  // 将b添加到a环境中

第一个参数是this指向的新环境
第二个参数是要传递给新环境的参数
注意： 第一个参数为null时表示指向window

3、call的用法

b.call(a, 1, 1) // 将b添加到a环境中

第一个参数是this指向的新环境
第二、三…个参数是传递给新环境的参数
注意： 第一个参数为null时表示指向window

总结： 只有apply参数是数组，bind方法可以让函数想什么时候调用就什么时候调用。apply、call方法只是临时改变了this指向。

下面来一道笔试题深入理解一下：

console.log.call.apply(a => a, [1,2])输出结果是2

3. 必问三:谈谈ajax，axios和fetch的区别

• ajax基于xmlHttpRequest的请求，
• Axios是对XMLHttpRequest的封装，
• Fetch是一种新的获取资源的接口方式，并不是对XMLHttpRequest的封装。

总结:最大的不同点在于Fetch是浏览器原生支持，而Axios需要引入Axios库。
一般用的较多的是axios，比如拦截取消请求等，功能丰富一些。

4.必问四:Cookie、LocalStorage、SessionStorage和IndexedDB四种存储方式的区别

其中只有cookie由服务器操作，其他都是在客户端操作，下面从4个方面展开叙述一下他们区别

• 数据容量

cookie：4kb
localstorage和sessionstorage：5-10MB
indexedDB:50-100MB(谷歌)，取决于浏览器和操作系统

• 生命周期

cookie：可以设置过期时间，可以在浏览器会话之间持久保存数据
localstorage：长期存储
indexedDB：长期存储
sessionstorage：浏览器会话期间有效，关闭页面就没了

• 数据访问和安全

cookie在每次http请求头中会被发送到服务器，增加网络流量，可以设置路径，域名和安全标志限制访问，但容易被垮站点脚本攻击。
localstorage，indexedB，sessionstorage：在同源策略是安全的，在客户端，不会发送到服务器

• 功能

cookie：用于会话跟综和存储少量数据
localstorage和sessionstorage：提供了基本的键值对存储，适用于存储较大的数据。
indexDB：提供了强大的查询和搜索，支持事务操作，适合存储和操作大量结构化数据。可用于1.收集用户日志，2.缓存请求数据，3.大文件上传，文件分片存储到indexDB库，动态更新上传状态，异常状态可以定位问题再重新上传。

具体实例代码如下：
-------- cookie ---------------

// 设置Cookie
document.cookie = 
"username=lisi; expires=Thu, 15 Dec 2023 16:00:00 UTC; path=/";

// 读取Cookie
let cookies = document.cookie;
console.log(cookies);

// 删除Cookie，设置Cookie的过期时间为过去的时间
document.cookie = 
"username=; expires=Thu, 01 Jan 1980 00:00:00 UTC; path=/;";

-------- LocalStorage -------------

// 设置LocalStorage 
localStorage.setItem("key", "value");
localStorage.setItem("username", "lisi");

// 读取LocalStorage 
const value = localStorage.getItem("key");
console.log(value);
let username = localStorage.getItem("username"); 
console.log(username);

// 删除LocalStorage 
localStorage.removeItem("username");

------- LocalStorage （非关系型数据库）-----------

// 设置SessionStorage
sessionStorage.setItem("key", "value");

// 读取SessionStorage
const value = sessionStorage.getItem("key");
console.log(value);

// 删除SessionStorage
sessionStorage.removeItem("key"