前端面试可能会被问到的问题

最新推荐文章于 2024-09-13 10:46:15 发布

YJ_YJ_YJ_

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量94

点赞数

文章标签：前端面试职场和发展

本文链接：https://blog.csdn.net/YJ_YJ_YJ_/article/details/128060373

版权

function函数和箭头函数区别。原型链。数组常用方法: 10个以上。简单数据类型和复杂数据类型。localStorage与sessionStorage区别。BFC。call、apply、bind

(1)函数传参的时候，传值类型和引用类型有什么区别？

首先我们要分清楚什么是传值类型，什么是引用类型？

在js中值类型也叫基本数据类型，分为以下五种：undefined、null、number、boolean、string

而引用数据类型也叫做复杂数据类型，分为以下三种：array、object、function

在本质上他们的区别为：基本数据类型的值存放在栈里面，赋值拷贝的是数据，修改拷贝后的数据不会对原来的值造成影响。复杂数据类型的栈中存放地址，堆中存放数据，赋值拷贝的是地址，修改拷贝后的数据对原有的数据有影响。

(2)数组常用方法: 10个以上

增：push unshift 返回的都是新数组的长度

删：pop shift 返回的都是删除的数组

改: splice（起始下标，删除的长度）

查：slice（起始下标，查询长度）

连接数组：concat（数组）

分隔数组：join（‘分隔符’）

翻转数组：reverse（数组）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        let arr = [10, 20, 30, 40, 50]

        /* 1.增删改查
        arr.push(...元素) : 往数组后面添加元素 , 返回数组长度 
        arr.unshift(...元素) : 往数组前面添加元素 , 返回数组长度
        arr.pop() : 删除数组最后一个元素, 返回删除的那个元素
        arr.shift() : 删除数组第一个元素, 返回删除的那个元素
        arr.splice(开始下标,删除几个元素,...在删除位置插入元素)
        arr.slice(起始下标,结束下标)查询指定范围的元素
        */

        let res = arr.push(60, 70, 80)
        console.log(arr)//[10,20,30,40,50,60,70,80]
        console.log(res)//8

        let res1=arr.unshift(0,5)
        console.log(res1);//10
        console.log(arr);//[0,5,10,20,30,40,50,60,70,80]

        let res2=arr.pop()
        console.log(res2);//80
        console.log(arr);//[0,5,10,20,30,40,50,60,70]

        let res3=arr.shift()
        console.log(res3);//0
        console.log(arr);//[5,10,20,30,40,50,60,70,80]

        let res4=arr.splice(2,2,100,110,120)
        console.log(res4);//[20, 30]
        console.log(arr);//[5, 10, 100, 110, 120, 40, 50, 60, 70]

        let res5=arr.slice(3,6)//范围为[3,6)不包括6
        console.log(res5);//[110,120,40]
        console.log(arr);//[5, 10, 100, 110, 120, 40, 50, 60, 70]
        // 2. arr.join('分隔符') : 把数组元素拼接成字符串
        let str = arr.join('|')//10|20|30|40|50|60|70|80
        console.log(str)
        // join()应用场景 :   有的歌曲是合唱的，后台就会给一个数组 ['李宗盛','林忆莲']
        //页面按照UI的设计显示歌手 '李宗盛&林忆莲'
        console.log(['李宗盛', '林忆莲'].join('&'))

        // 3. arr.reverse() : 翻转数组
        // 有的页面列表可以反向排列

        // 4. arr.sort( (a,b)=>a-b ) 

        let pArr = [
            { name: '张三', age: 18 },
            { name: '李四', age: 15 },
            { name: '王五', age: 22 },
        ]
        //根据年龄排序  a和b就是数组中相邻的元素
        pArr.sort((a, b) => {
            return a.age - b.age
        })
        console.log(pArr);

        const a = [
{ age: 51 }, { age: 23 }, { age: 53 }, { age: 12 }, { age: 24 }, { age: 33 }
 ]
 a.sort((a,b)=>a.age-b.age)
 console.log(a);

        // 5.arr.concat(数组):链接数组 
    </script>
</body>

</html>

(3)function函数和箭头函数区别

function函数的this值是指向于调用者，谁调用它，它就指向谁

new 函数名() : this -> new创建的实例对象
对象名.函数名() : this -> 对象
函数名() : this -> window

箭头函数没有自己的this值，它是取上级作用域的this值作为自己的this值来使用，同时箭头函数没有arguments，要用 rest 参数解决。箭头函数没有原型属性

(4)原型链

每一个对象都有原型__proto__，每一个函数都有原型对象prototype，函数中对象的原型__proto__全等于函数的prototype。当访问一个对象的属性时，如果对象的属性内部不存在这个属性，就会往对象的原型里面去找。这个原型同时也会有自己的原型，就会一直顺着找下去，这就是原型链。如果还找不到，属性则获取undefined，方法则报错xxx is not defined

(5)localStorage与sessionStorage区别

1.相同点

作用一致：用于存储数据

都是只能存储字符串类型数据(上限5MB)

2.不同点：存储方式不同

localStorage : 硬盘存储（永久存储，页面关闭还在，存在硬盘）

sessionStorage ：内存存储（临时存储，页面关闭了就消失）

3.localStorage与sessionStorage如何存储引用类型数据（数组和对象）

转json存储

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与
localStorage 不同：
localStorage 除非被清除，否则永久保存，一般为 5MB

sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除
(6)BFC
所谓BFC就是块级格式上下文，是我们浏览器自带的一种渲染模式。

有四种方式开启BFC盒子：