前端面试（2023/6/30）

第一次面试有点紧张感觉没有准备好

浅拷贝和深拷贝的区别： 浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存（分支）。 深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是“值”而不是“引用”（不是分支）

浅拷贝和深拷贝实现的方法：

浅拷贝：Array.slice（）或concat（）

深拷贝：使用手写的递归方法，递归方法实现深度克隆原理：遍历对象、数组直到里边都是基本数据类型，然后再去复制，就是深度拷贝

es6中获取对象数据的方法

element-ui自定义： 在官网中找到想要的组件，将其复制到

事件代理： 事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件冒泡（一个事件发生后会在子元素和父元素之间传播）

常用的数组方法

• conccat()用于合并两个或多个数组，此方法不会改变现有数组，而是返回一个新数组
• find()用于数组中满足提供的测试函数的第一个元素的值，否则返回undefind。
• findIndex()返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1。
• includes()用来判断一个数组是否包含一个指定的值，根据情况有则返回true否则false
• indexof()返回在数组中可以找到一个给定元素的第一个索引，如果不存在则返回-1
• join()将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回者字符串。如果数组只有一个项目那么将返回项目而不使用分隔符
• pop()从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度
• push()将一个或多个元素添加到数组的末尾，并返回该数组的长度。
• shift()从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
• unshift()将一个或多个元素添加到数组的开头，并返回该数组的新长度。
• splice()通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组
• reverse()将数组中元素的位置颠倒并返回数组，该方法会改变原数组
• sort()用原地算法对数组的元素进行排序并返回数组

flex布局（弹性布局）的常见属性：

• flex-direction:决定主轴方向
• flex-wrap:定义是否换行
• justify-content: 定义项目在主轴方向上的对齐方式
• align-items: 定义项目在交叉轴方向的对齐方式
• align-content: 定义多根轴的对齐方式

优化页面的方法：

网络优化： 使用缓存；减少https请求；使用多个域名避免DNS查询损耗；

页面优化：降低css选择器的复杂度；减少重绘和回流

JS的性能优化：防抖和节流；使用事件委托

图片的优化：懒加载