a# 万得前端一面

分a，b面
聊项目，用到场景

1.两个盒子，内盒子如何垂直水平居中（ab面都有，子绝父相）

要实现两个盒子内部的垂直水平居中，可以使用 Flexbox 布局。使用 Flexbox 可以很容易地实现水平和垂直居中，而且不需要设置固定的尺寸。下面是一种方法：

HTML 结构：

<div class="container">
  <div class="box">
    <!-- 内容 -->
  </div>
  <div class="box">
    <!-- 内容 -->
  </div>
</div>

CSS 样式：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 可以根据实际情况调整 */
}

.box {
  width: 200px; /* 盒子的宽度 */
  height: 200px; /* 盒子的高度 */
  border: 1px solid #000; /* 边框样式 */
}

在这个示例中，.container 使用 Flexbox 布局，并设置了 justify-content: center; 和 align-items: center; 来实现水平和垂直居中。.box 代表内部的盒子，你可以根据需要设置它们的尺寸和样式。

2.给具有target属性的a标签设置样式（答的选属性［targetName］，好像错了）

要给具有 target 属性的 <a> 标签设置样式，你可以使用 CSS 选择器 [attribute] 来选择带有指定属性的元素。在这种情况下，你可以使用 [target] 来选择带有 target 属性的 <a> 标签。以下是一个示例：

a[target] {
  /* 设置样式 */
}

这样的 CSS 规则将匹配所有带有 target 属性的 <a> 标签，并且你可以在其中设置你想要的样式。

3.em和rem的区别（根元素）

em 和 rem 都是用于设置字体大小和元素尺寸的 CSS 单位，但它们之间有一些重要的区别，主要是相对于根元素的不同。

em： em 是相对长度单位，它相对于元素自身的字体大小来计算。如果没有其他样式设置字体大小，则 1em 等于元素的父元素的字体大小。如果元素嵌套在其他元素中，em 单位将根据它们各自的字体大小进行累积。
rem： rem 也是相对长度单位，但它相对于根元素（html 元素）的字体大小来计算。这意味着 1rem 等于根元素的字体大小。与 em 不同，rem 单位不会受到父元素字体大小的影响，只受根元素字体大小的影响。

因此，主要区别在于 em 单位是相对于元素自身的字体大小，而 rem 单位是相对于根元素的字体大小。通常情况下，使用 rem 单位更方便，特别是在构建响应式设计时，因为它可以使得尺寸相对于根元素而不是父元素进行缩放。

4.如何设置和展示小于12px的元素如6px（Transfrom：scale（0.5））

要设置和展示小于12px的元素，你可以使用 CSS 的 transform 属性来缩放元素大小。具体来说，你可以使用 scale() 函数来缩放元素的大小。例如，如果要将元素的大小缩小一半（50%），可以使用 transform: scale(0.5)。以下是一个示例：

.small-element {
  transform: scale(0.5); /* 将元素缩小为原来的一半 */
}

然后，在 HTML 中将该类应用到需要缩小的元素上：

<div class="small-element">这是一个小于12px的元素</div>

这样就可以将元素的大小缩小为原来的一半（即6px），并展示在页面上。

5.数组去重（ab面都有，用setter自动去重，答的map复杂了）

6.原声数组的方法

JavaScript 原生数组对象提供了许多方法来操作数组。以下是一些常用的原生数组方法：

push()： 在数组末尾添加一个或多个元素，并返回新数组的长度。

const array = [1, 2, 3];
array.push(4);
console.log(array); // [1, 2, 3, 4]

pop()： 删除并返回数组的最后一个元素。

const array = [1, 2, 3];
const lastElement = array.pop();
console.log(lastElement); // 3
console.log(array); // [1, 2]

shift()： 删除并返回数组的第一个元素。

const array = [1, 2, 3];
const firstElement = array.shift();
console.log(firstElement); // 1
console.log(array); // [2, 3]

unshift()： 在数组开头添加一个或多个元素，并返回新数组的长度。

const array = [2, 3];
array.unshift(1);
console.log(array); // [1, 2, 3]

concat()： 连接两个或多个数组，并返回新数组。

const array1 = [1, 2];
const array2 = [3, 4];
const newArray = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4]

slice()： 返回数组的一部分，不修改原数组。

const array = [1, 2, 3, 4, 5];
const newArray = array.slice(1, 3);
console.log(newArray); // [2, 3]

splice()： 在指定位置添加或删除元素，并返回被删除的元素组成的数组。

const array = [1, 2, 3, 4, 5];
const removedElements = array.splice(1, 2, 'a', 'b');
console.log(removedElements); // [2, 3]
console.log(array); // [1, 'a', 'b', 4, 5]

这些是常用的一些原生数组方法，还有其他许多方法可以对数组进行操作，具体使用取决于具体的需求。

7.js数据类型

6. 原生数组的去重方法通常有以下几种：

使用 Set 数据结构：利用 Set 对象不允许包含相同的值的特性，将数组转换为 Set，然后再转换回数组。

const array = ['a', 'b', 'a', 'c', 'b'];
const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // ["a", "b", "c"]

使用 filter 方法：遍历数组，通过 filter 方法筛选出不重复的元素。

const array = ['a', 'b', 'a', 'c', 'b'];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // ["a", "b", "c"]

使用 reduce 方法：利用 reduce 方法遍历数组，将不重复的元素添加到新数组中。

const array = ['a', 'b', 'a', 'c', 'b'];
const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // ["a", "b", "c"]

7. JavaScript 中的数据类型包括基本数据类型和引用数据类型。基本数据类型包括：

字符串（String）
数字（Number）
布尔值（Boolean）
空（Null）
未定义（Undefined）
符号（Symbol）（ES6 新增）

引用数据类型包括：

对象（Object）
数组（Array）
函数（Function）
日期（Date）
正则表达式（RegExp）
等等

基本数据类型是存储在栈内存中的简单数据段，而引用数据类型是存储在堆内存中的对象，它们的值是对象的引用（内存地址）。JavaScript 中的数据类型由 JavaScript 引擎自动管理，无需手动指定。

8.ajax的使用

AJAX（Asynchronous JavaScript and XML）是一种用于创建快速交互式网页应用的技术。它允许在不重新加载整个页面的情况下，通过后台服务器异步加载数据，以实现动态更新页面的内容。

以下是使用 AJAX 的基本步骤：

创建 XMLHttpRequest 对象： 使用 JavaScript 创建一个 XMLHttpRequest 对象，用于与服务器进行通信。

var xhr = new XMLHttpRequest();

设置请求参数： 设置要发送的请求的方法、URL 和是否异步标志等。

xhr.open('GET', 'https://example.com/api/data', true);

设置回调函数： 在请求完成时，设置一个回调函数，以处理从服务器返回的响应数据。

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText); // 处理服务器返回的数据
  }
};

发送请求： 发送请求到服务器。

xhr.send();

通过上述步骤，我们就可以使用 AJAX 向服务器发送请求并获取响应数据。通常情况下，可以将上述代码封装成一个函数，以便在需要时调用。

除了使用原生的 XMLHttpRequest 对象，现代的前端开发中还可以使用诸如 Fetch API 或第三方库（例如 Axios）来简化 AJAX 请求的处理过程。这些方法提供了更简洁、可读性更好的代码，以及更强大的功能和更好的兼容性。

9.拦截器的作用和使用场景

拦截器（interceptors）是在发送请求或响应被处理之前拦截它们的函数。在前端开发中，拦截器通常用于实现对请求或响应的全局处理和控制，例如添加公共的请求头、处理错误、认证等。

拦截器的作用和使用场景包括但不限于：

添加公共请求头： 在每个请求发送之前，可以使用拦截器来添加公共的请求头，例如身份验证信息、用户令牌等。
处理错误： 可以使用拦截器来捕获请求过程中的错误，并进行统一的处理，例如显示错误信息、重试请求或跳转到错误页面。
认证： 可以在拦截器中进行用户认证，检查用户是否具有访问权限，如果没有权限则拦截请求或重定向到登录页面。
日志记录： 可以使用拦截器来记录请求和响应的日志，便于调试和分析问题。
请求转换： 可以在拦截器中对请求进行转换或格式化，例如将请求数据转换为特定格式或添加额外的信息。
响应处理： 可以在拦截器中对响应进行处理，例如解析响应数据、处理特定的状态码或格式化响应数据。

总的来说，拦截器提供了一种方便的方式来管理和控制请求和响应的流程，使得在应用中可以统一处理一些通用的逻辑和行为，提高了代码的可维护性和复用性。

10.for循环中for in和for of的区别（一个返回索引，一个返回值，没答上来）

当使用 for...in 循环时，它遍历对象的可枚举属性，并返回属性的键（索引）。而使用 for...of 循环时，它遍历可迭代对象（如数组、字符串、Set、Map 等），并返回对象的值。

以下是一个示例说明：

// 使用 for...in 循环遍历对象的属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // 输出属性的键，即 'a', 'b', 'c'
}

// 使用 for...of 循环遍历数组的值
const arr = [1, 2, 3];
for (const value of arr) {
  console.log(value); // 输出数组的值，即 1, 2, 3
}

在以上示例中，for...in 循环返回了对象的键，而 for...of 循环返回了数组的值。

反问：
技术栈使用vue或react哪个更多
（使用react，会有导师一对一指导）
前端招聘竞争力（校招每年都在招，疫情裁员时间也在招）
实习工资（hr面再谈）

作者：叙叙影abc
链接：www.nowcoder.com/feed/main/d…
来源：牛客网

前端面试题详解整理42|拦截器，ajax的使用,内盒子如何垂直水平居中,原声数组的方法 ,具有target属性的a标签设置样式,em和rem的区别,