面试官：使用 js 实现有序数组原地去重

170期题目

1. 使用 js 实现有序数组原地去重

2. JavaScript 中如何取消请求

3. 说说你对盒子模型的理解

上面问题的答案会在第二天的公众号(程序员每日三问)推文中公布

也可以小程序刷题，已收录500+面试题及答案

169期问题及答案

1. 请手写“快速排序”？

function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }

  const pivot = arr[0];
  const left = [];
  const right = [];

  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }

  return [...quickSort(left), pivot, ...quickSort(right)];
}

// 示例
const unsortedArray = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
const sortedArray = quickSort(unsortedArray);
console.log(sortedArray);

这是一个简单的快速排序实现。基本思路是选择数组中的一个元素作为基准（这里选择第一个元素），然后将数组分为两个部分，小于基准的放在左边，大于基准的放在右边。然后对左右两部分分别进行递归排序，最终合并得到有序数组。

请注意，这只是一个演示，实际应用中可能需要考虑一些优化和边界情况。

2. 有哪些方式可以实现样式隔离？

样式隔离是前端开发中常用的一种技术，它可以确保在一个组件或模块中定义的样式不会影响到其他组件或模块。以下是几种实现样式隔离的常见方式：

1. 命名约定：

• 使用一致的命名约定，例如BEM（Block Element Modifier）或其他命名规范，以确保样式不会冲突。

• 在每个组件的样式类名前面添加独特的前缀，以确保样式不会泄漏到其他组件。

CSS Modules：

• 使用CSS Modules，它允许在每个模块中本地作用域定义样式，避免全局样式的冲突。

• CSS Modules 通过在类名上添加哈希值或其他唯一标识符，确保样式的唯一性。

Scoped CSS（Vue和其他框架）：

• 在一些前端框架中，如Vue和Scoped CSS，样式可以被封装到组件范围内，不会对全局样式产生影响。

• 通过在style标签上添加scoped属性，框架会自动处理样式的隔离。

CSS-in-JS：

• 使用CSS-in-JS库，例如Styled Components、Emotion等，可以将样式直接嵌入到JavaScript中，并确保每个组件的样式是局部的，不会污染全局。

• 这些库通常使用唯一的标识符来确保样式的隔离性。

Shadow DOM：

• 使用Web标准的Shadow DOM技术，它允许将DOM和样式封装在一个独立的Shadow DOM中，防止样式泄漏到外部。

• 在自定义元素中使用Shadow DOM，可以实现最强大的样式隔离。

Isolated Frameworks：

• 使用一些框架，如Angular和Stencil，它们提供了自己的组件封装和样式隔离机制，确保组件之间的样式不会相互影响。

选择哪种方式取决于项目的具体需求和使用的技术栈。在大型应用中，通常会结合多种方法来实现更强大的样式隔离。

3. html和css中的图片加载与渲染规则是什么样的？

在HTML和CSS中，图片加载与渲染涉及到浏览器的一系列行为。以下是图片加载与渲染的基本规则：

1. 图片加载规则：

• 按需加载： 浏览器在解析HTML时，会发现<img>标签，然后开始加载图片。图片默认是按需加载的，只有在浏览器渲染到对应图片位置时才会触发加载。

• 懒加载： 使用loading="lazy"属性可以启用懒加载，使得图片在视口附近时才会加载。这可以提高页面加载速度，尤其对于长页面或包含大量图片的页面。

• 预加载： 使用<link rel="preload">标签可以提前加载图片，以加速后续的渲染。这对于优化关键资源的加载顺序和时间很有帮助。

2. 图片渲染规则：

• 渲染时机： 一旦图片加载完成，浏览器将在合适的时机将其渲染到页面上。这通常发生在图片加载完成后，以及其他正在进行的渲染任务之后。

• CSS样式： 图片的外观可以通过CSS样式进行控制，例如设置图片的宽度、高度、边框等属性。CSS可以通过选择器将样式应用到指定的图片。

• 背景图片： 图片还可以作为元素的背景。这时，可以使用background-image属性来设置背景图片，并通过其他背景相关的属性进行调整。

• Responsive Images（响应式图片）： 使用<picture>标签、srcset属性等，可以实现响应式图片，根据不同的屏幕尺寸加载不同分辨率或裁剪的图片。

• 图片优化： 通过使用合适的图片格式（如WebP）、压缩图片等优化手段，可以提高页面性能，减小图片加载所需的带宽。

总体而言，浏览器会根据HTML和CSS的描述加载和渲染图片，开发者可以通过懒加载、预加载、响应式图片等技术来优化页面加载性能。

因为微信公众号修改规则，如果不标星或点在看，你可能会收不到我公众号文章的推送，原创不易，请大家将本公众号星标，看完文章后记得点下赞或者在看，谢谢各位！

学习不打烊，充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题，每天坚持花20分钟来学习与思考，在千变万化，类库层出不穷的今天，不要等到找工作时才狂刷题，提倡每日学习。