【华为OD技术面试真题 - 技术面】- 前端面试题（7）

华为OD面试真题精选

专栏：华为OD面试真题精选
目录: 2024华为OD面试手撕代码真题目录以及八股文真题目录

1. CSS画椭圆

.ellipse {
   
    width: 300px;
    height: 150px;
    background-color: blue;
    border-radius: 50%;
}

2. js会发生阻塞吗

JavaScript是一种单线程语言，意味着在大多数情况下，它在同一时间内只能执行一个任务。由于这个特性，某些操作确实可以造成阻塞，特别是那些耗时的同步任务。

主要阻塞情形：

1. 长时间运行的同步代码：如果JavaScript代码中有长时间运行的同步循环或计算，它会阻塞浏览器的主线程，导致用户界面无法响应用户操作，造成网页卡顿甚至暂时无响应。
2. 同步API调用：例如，使用alert()或prompt()这类同步API会立即中断代码执行，直到用户响应，期间浏览器无法处理其他任何任务。

如何避免阻塞：

• 异步编程：使用setTimeout, setInterval, Promise, async/await等异步编程技术可以帮助避免阻塞。这些技术允许JavaScript启动一个操作，然后在操作完成时通过回调、Promise解决或异步等待来处理结果，而不阻塞代码的其他部分。
• Web Workers：对于复杂和耗时的任务，可以使用Web Workers。Web Workers允许将一部分JavaScript操作放在后台线程中运行，这个线程是完全独立于主线程的，因此不会影响界面的响应性。

3. 扩展运算符？这种拷贝属于浅拷贝还是深拷贝，扩展运算符为什么算浅拷贝？深拷贝了解吗？

扩展运算符（...）在JavaScript中实现的是浅拷贝（shallow copy）。这意味着当使用扩展运算符复制数组或对象时，它只复制一层属性值。如果被复制的对象中的属性值是基本数据类型（如Number, String, Boolean），则会复制这些值。然而，如果属性值是引用数据类型（如数组、对象或函数），则复制的是对原数据的引用地址，而非数据本身。

为什么扩展运算符算是浅拷贝？

这是因为当使用扩展运算符复制数据结构（如对象或数组）时，对于数据结构中的每一个引用类型的子元素，扩展运算符仅仅复制其引用，而不是创建一个新的独立对象。这意味着如果原始数据结构中的引用类型的子元素发生变化，那么新复制的数据结构中的相应元素也会发生变化，因为它们指向同一个对象。

深拷贝

深拷贝（deep copy）在JavaScript中指的是创建一个新对象，其中不仅原始对象的第一层数据被复制，而且所有的嵌套对象也都被递归地复制。这样，新对象与原始对象之间不会共享任何项（包括所有的内部对象），它们是完全独立的。

如何实现深拷贝？

在JavaScript中，实现深拷贝的常见方法包括：

• 使用JSON.parse(JSON.stringify(object))：这种方法通过将对象转换成JSON字符串，然后再将字符串解析回对象，可以实现对象深拷贝。但这种方法有局限性，例如它不能复制函数、undefined、循环引用等。
• 使用第三方库如Lodash的_.cloneDeep(object)：Lodash提供了一个非常有效的深拷贝函数，可以处理各种数据类型和复杂的对象结构。
• 手动实现递归深拷贝：对于更复杂或特定需求的深拷贝，可以通过递归函数手动实现，以确保所有嵌套对象都被适当复制。

4. setTimeout和setInterval

.setTimeout和setInterval？setTimeout设置0会发生什么？为什么会这样？为什么会有setTimeout和setInterval这两个API

在JavaScript中，setTimeout和setInterval是两个非常重要的定时器函数，它们允许开发者在代码执行中设置延迟和定期执行任务。这些函数的设计和存在主要是因为JavaScript的单线程特性和非阻塞I/O模型。

setTimeout 和 setInterval

setTimeout:
setTimeout函数用于在指定的毫秒数后执行一个函数或一段代码。它只执行一次。

语法示例：

setTimeout(function() {
   
  console.log("Hello after 3 seconds");
}, 3000);

setInterval:
setInterval函数用于每隔指定的毫秒数重复执行指定的函数或执行代码片段，直到clearInterval()被调用或窗口被关闭。