前端面试题—面试题整理(4)

发表于 分类于 ， 阅读时长 ≈ 2 分钟

一 面试题汇总(Boss直聘分享-达昌技术)

  1. 图片懒加载和预加载
  2. ES6新增哪些特性
  3. 深拷贝和浅拷贝

二 面试题解答(仅供参考)

2.1 图片懒加载和预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
图片懒加载和预加载都是用于优化网页性能的技术，但它们的应用场景和实现方式有所不同。

1-图片懒加载（Lazy Loading）：

1.1-图片懒加载是指延迟加载页面中的图片，直到图片进入可视区域时才加载图片内容。
这样可以减少页面的加载时间和带宽占用，提高页面的加载速度和用户体验。
1.2-实现图片懒加载的方式通常是通过监听滚动事件，在图片进入可视区域时再进行图片加载。
常见的实现方式包括使用 Intersection Observer API、监听滚动事件和计算元素位置等。
1.3-优点：减少页面加载时间，提高用户体验；节省带宽资源，降低服务器压力。
1.4-缺点：可能导致部分用户在浏览过程中出现图片“闪现”的现象。

2-图片预加载（Preloading）：

2.1-图片预加载是指在页面加载完成之前提前加载页面中需要使用到的图片资源，
以提高用户在浏览页面时的加载速度和流畅度。
2.2-实现图片预加载的方式通常是在页面加载时提前创建 <img> 元素，
设置 src 属性为需要预加载的图片 URL，这样浏览器会提前下载图片资源到本地缓存。
2.3-优点：提前加载图片资源，加快用户浏览页面的速度和流畅度；
减少用户在浏览页面时因加载图片而产生的等待时间。
2.4-缺点：增加了页面的初始加载时间，可能导致页面加载速度变慢；
可能浪费带宽资源，因为有些图片可能用户并不会浏览到。

综上所述，图片懒加载适用于需要延迟加载图片以减少页面加载时间的场景，
而图片预加载适用于需要提前加载图片以提高用户浏览体验的场景。
在实际应用中，可以根据具体的需求和页面情况来选择合适的技术来优化页面性能

2.2 ES6新增哪些特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
ECMAScript 6（简称 ES6）是 JavaScript 的一次重大更新，引入了许多新的语法特性和功能。
以下是 ES6 中一些重要的新增特性：

1-let 和 const 声明：

let 声明变量，具有块级作用域。
const 声明常量，不可重新赋值。

2-箭头函数：

使用箭头 (=>) 定义函数，简化了函数的定义和语法。

3-模板字符串：

使用反引号 (`) 来创建多行字符串，支持变量插值。

4-解构赋值：

可以从数组或对象中提取值，并赋值给变量。

5-默认参数值：

函数参数可以指定默认值，简化了函数的调用。

6-扩展运算符：

使用 ... 语法将数组或对象展开成多个参数。

7-类和继承：

引入了类的概念，支持面向对象的编程风格。

8-模块化：

引入了模块化的语法，可以方便地导入和导出模块。

9-Promise：

引入了 Promise 对象，用于处理异步操作，简化了异步编程。

10-Generators：

引入了生成器函数，可以通过迭代器控制函数的执行流程。

11-Symbol：

引入了 Symbol 数据类型，用于创建唯一标识符。

12-Map 和 Set 数据结构：

引入了 Map 和 Set 数据结构，提供了更方便的键值对和集合操作。

13-Proxy 和 Reflect：

引入了 Proxy 和 Reflect 对象，用于实现元编程和拦截操作。

14-新的数据类型和方法：

引入了新的数据类型如 ArrayBuffer、TypedArray、Map、Set 等，
以及新的方法如 Object.assign、Array.from 等。

这些是 ES6 中一些重要的新增特性，它们使得 JavaScript 语言更加强大、灵活和易用，
为 JavaScript 开发提供了更多的可能性和便利性。

2.3 深拷贝和浅拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
深拷贝（Deep Copy）和浅拷贝（Shallow Copy）是在 JavaScript 中常用的两种对象复制方法，
它们之间有着不同的特点和应用场景。

1-浅拷贝（Shallow Copy）：
1.1-浅拷贝是指只复制对象的一层属性，如果属性是基本类型，则直接复制其值；
如果属性是引用类型，则复制其引用，即两个对象会共享同一个引用类型的属性。
1.2-常见的浅拷贝方法包括 Object.assign()、扩展运算符 ...、Array.prototype.slice() 等。
1.3-浅拷贝只复制对象的一层结构，如果对象内部还有嵌套的对象，则嵌套对象仍然会被共享。

let obj1 = { a: 1, b: { c: 2 }};
let obj2 = Object.assign({}, obj1);
obj2.b.c = 3;

console.log(obj1.b.c); // 输出 3，因为 obj1 和 obj2 共享了嵌套对象 b

2-深拷贝（Deep Copy）：
2.1-深拷贝是指完全复制对象的所有层级，包括对象的所有属性和属性的属性，
从而创建一个新的对象，新对象和原对象完全独立，互不影响。
2.2-实现深拷贝的方法较为复杂，通常需要递归地遍历对象的所有属性，并逐一复制。
2.3-常见的实现深拷贝的方法包括递归复制、JSON 序列化与反序列化、
使用第三方库（如 lodash 的 _.cloneDeep() 方法）等。

let obj1 = { a: 1, b: { c: 2 }};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.b.c = 3;

console.log(obj1.b.c); // 输出 2，因为 obj1 和 obj2 没有共享嵌套对象 b
总的来说，浅拷贝只复制对象的一层结构，而深拷贝则完全复制了对象的所有层级。
在选择使用深拷贝还是浅拷贝时，需要根据具体的应用场景和需求来决定。

三 参考

  • ChatGPT3.5