[...arr]是深拷贝吗

时间: 2024-01-06 22:06:06 浏览: 54

前端面试常见问题规整.pdf

文件中总结归纳了诸多前端在面试时常见问题。针对于每一个问题，都有详细的解答以及对应的原理分析。同时，对不同类型的问题进行了分组归纳。其中，包含了基础问题、JS问题、ES6问题、Vue问题等多个分组，可以直接依据分组找到相关的问题。后续可能持续更新。 ### 前端面试常见问题知识点汇总 #### 一、基础知识篇 **1. 实现水平垂直居中方式** 在前端开发中，实现元素的水平垂直居中是常见的需求之一。常用的实现方法包括： - **Flex 布局**：通过设置容器的 `display: flex;` 并结合 `justify-content: center;` 和 `align-items: center;` 来实现子元素的水平垂直居中。 - **绝对定位**：通过给元素设置 `position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);` 来实现。 - **margin 负值**：通过将父元素设置为 `position: relative;`，然后给子元素设置 `margin: auto;` 来实现水平居中，再配合 `top: 50%; transform: translateY(-50%);` 来实现垂直居中。 **2. 常用伪元素** - `::before`：在元素内容之前插入内容。 - `::after`：在元素内容之后插入内容。这些伪元素常用于添加装饰性的内容，例如图标、边框等，而不改变文档的实际结构。 **3. 移动端适配不同屏幕尺寸** 移动端适配可以通过以下几种方式实现： - **响应式设计**：使用 CSS 媒体查询和弹性布局，根据不同屏幕尺寸调整页面布局和元素大小。例如使用百分比、em 或 rem 单位来定义元素的相对大小。 - **弹性布局**：Flexbox 和 Grid 布局能够帮助元素在不同屏幕尺寸下自动调整位置和大小。 - **流式布局**：使用百分比单位和自适应容器来创建流式布局，使页面元素根据屏幕尺寸自动调整大小。 - **视口单位**：使用 vw 或 vh 单位来根据视口尺寸来定义元素大小。 **4. 弹性布局一行两列，一列固定宽，如何实现？** - 通过给定宽的一列设置 `flex: 0;`，给需要延展伸缩的一列设置 `flex: 1;` 来实现。 **5. Flex: 1 包含了什么？** `flex: 1;` 实际上是 `flex: 1 1 0%;` 的简写形式，包含了三个属性： - `flex-grow`：设置 flex 项主尺寸的增长系数。 - `flex-shrink`：指定了 flex 元素的收缩规则。 - `flex-basis`：指定了 flex 元素在主轴方向上的初始大小。 #### 二、BFC（块级格式化上下文） **6. BFC 特性** - **盒子排列**：BFC 中的块级盒子垂直排列，一个盒子紧跟在另一个盒子的下方。 - **边距折叠**：相邻块级盒子的垂直外边距会发生折叠，但不影响外部盒子。 - **不与浮动元素重叠**：BFC 内部的块级盒子会根据浮动元素的位置重新排列，避免重叠。 - **包含浮动元素**：BFC 会包含其内部所有浮动元素，避免高度塌陷。 - **阻止文本环绕**：BFC 会阻止文本环绕浮动元素。 **触发条件** - 根元素或包含根元素的元素。 - 浮动元素（`float` 不为 `none`）。 - 绝对定位元素（`position` 为 `absolute` 或 `fixed`）。 - 行内块（`inline-block`）元素。 - `overflow` 属性不为 `visible` 的块级元素。 #### 三、JavaScript 常见问题 **1. JS 的数据类型及判断** - **基本数据类型**：`Number`, `String`, `Boolean`, `Undefined`, `Null` - **复合数据类型**：`Object`, `Array` 对于基本数据类型，可以直接使用 `typeof` 来判断；对于 `null` 和 `Array` 类型，则可以使用 `== null` 和 `Array.isArray()` 方法。 **2. 数组去重方法** - **新建数组并循环遍历去重**：遍历数组，利用 `indexOf()` 或 `includes()` 方法判断元素是否已经存在于新数组中。 - **Set 数据类型**：使用 `[...new Set(array)]` 或 `Array.from(new Set(arr))`。 - **新建对象，遍历数组**：利用对象键值唯一性特性进行去重。 **3. 深拷贝和浅拷贝区别及实现** - **浅拷贝**：仅复制对象的第一层属性，深层属性仍然共享引用。 - **深拷贝**：完全复制对象的所有层级属性，包括嵌套对象。 **实现深拷贝的方法**： - **递归**：手动遍历对象的每一层属性，递归地进行复制。 - **JSON 序列化**：使用 `JSON.stringify()` 和 `JSON.parse()` 来转换对象，但需要注意这种方法无法处理循环引用的情况。 - **使用第三方库**：如 Lodash 的 `_cloneDeep` 方法。 **4. 防抖和节流** - **防抖**：在连续触发事件的情况下，只执行最后一次事件。常用于处理用户输入等频繁触发的事件。 - **节流**：规定一个单位时间内，只允许执行一次事件。适用于限制高频触发事件的频率，如滚动加载、拖拽等场景。 **实现防抖和节流的方法**： ```javascript function debounce(func, delay) { let timerId; return function(...args) { clearTimeout(timerId); timerId = setTimeout(() => { func.apply(this, args); }, delay); }; } function throttle(func, limit) { let inThrottle; return function(...args) { const context = this; if (!inThrottle) { func.apply(context, args); inThrottle = true; setTimeout(() => (inThrottle = false), limit); } }; } ``` 以上是前端面试中常见的问题及其解答和相关知识点的总结，希望对你有所帮助。

`[...arr]` 是浅拷贝，它创建了一个新数组，并将原始数组中的元素复制到新数组中。但是，如果原始数组中的元素是对象或其他引用类型，那么新数组中的元素实际上仍然是原始数组中的元素的引用。因此，在对新数组进行更改时，原始数组中的对应元素也会发生更改。如果要进行深拷贝，需要使用其他方法，例如 `JSON.parse(JSON.stringify(arr))` 或使用第三方库。

阅读全文

[...arr]是深拷贝吗

相关推荐

前端深拷贝浅拷贝的问题

js深拷贝与浅拷贝详解以及例子.pdf

深拷贝拷贝的是内容，浅拷贝拷贝的是指针

深拷贝和浅拷贝

javascript深拷贝和浅拷贝详解

Object.assign()浅拷贝还是深拷贝

如何实现arr1=arr2+arr3

数组深拷贝

用cpp实现一维数组的深拷贝实现二维数组深拷贝

用一维数组的深拷贝实现二维数组深拷贝，使用c++

vue深拷贝和浅拷贝

c# 数组深拷贝

TypeScript 数组深拷贝

js数组深拷贝

js 手撕浅拷贝和深拷贝

js实现深拷贝和浅拷贝

最新推荐

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能

"互动学习：行动中的多样性与论文攻读经历"

Fluent UDF进阶秘籍：解锁高级功能与优化技巧

在Vue项目中，如何利用Vuex进行高效的状态管理，并简要比较React中Redux或MobX的状态管理模式？

WStage平台：无线传感器网络阶段数据交互技术

关系数据表示学习