【每日一练】前端面试题集锦1

啊儿法

已于 2024-08-23 15:21:38 修改

阅读量802

点赞数 26

分类专栏：前端面试题文章标签： javascript 开发语言面试前端 vue.js 数据结构经验分享

于 2024-08-20 15:09:43 首次发布

本文链接：https://blog.csdn.net/qq_44814187/article/details/141359095

版权

前端面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 基础知识

1.1 (JS) 数组去重的几种方式

a) 使用循环和判断

const arr = [1, 2, 2, 3, 4, 4, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i])
  }
}
console.log('去重后数组', uniqueArr)

b) 使用filter和indexOf
利用indexOf会返回首个被找到的元素在数组中的位置(若没有找到则返回-1)

const arr = [1, 2, 2, 3, 4, 4, 5]
const uniqueArr = arr.filter((item, index, self) =>
  self.indexOf(item) === index
)
console.log('去重后数组', uniqueArr)

使用Set集合与解构(或Array.from)

const arr = [1, 2, 2, 3, 4, 4, 5]
const uniqueArr = [...new Set(arr)]
// const uniqueArr = Array.from(new Set(arr))

使用map对象和Array.from()

const arr = [1, 2, 2, 3, 4, 4, 5]
const uniqueArr = Array.from(new Map(arr.map(item => [item, item])).values())

1.2 (JS) Map对象的了解：

map对象是键值对的集合，可以记住键的原始插入顺序，任何值（对象或者原始值）都可以作为键或值。
map中的键只能出现一次。
键的相等：键的比较基于“零值相等”算法。这意味着NaN是与NaN相等的（虽然NaN !== NaN)，剩下所有其它的值是根据 === 运算符的结果判断是否相等。

（1）创建map对象并储值

const myMap = new Map();
myMap.set(0, "zero");
myMap.set(1, "one");

（2）map的迭代遍历

使用for…of遍历键值对

for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
// 0 = zero
// 1 = one

使用for…of遍历键

for (const key of myMap.keys()) {
  console.log(key);
}
// 0
// 1

使用values遍历值

for (const value of myMap.values()) {
  console.log(value);
}
// zero
// one

使用forEach遍历

myMap.forEach((value, key) => {
  console.log(`${key} = ${value}`);
});
// 0 = zero
// 1 = one

（3）map转二维数组与二维数组转map

map转二维数组

const kvArray = [
  ["key1", "value1"],
  ["key2", "value2"],
];

// 使用常规的 Map 构造函数可以将一个二维的键值对数组转换成一个 Map 对象
const myMap = new Map(kvArray);

二维数组转map
- 法1：使用展开运算符 console.log([...myMap])
- 法2：使用Array.fromconsole.log(Array.from(myMap));

（4）复制，合并，比较Maps

const myMap1 = new Map([[1, 'one']])
const myMap2 = new Map(myMap1)
console.log(myMap2.get(1)); // one
console.log(myMap2 === myMap1); // false，浅比较 不为同一个对象引用

1.3 (CSS) 盒模型是什么：

页面上的每个元素都会生成一个盒模型，这个盒模型包含了：_内容（content), 内边距(padding), 边框(border) 和外边距（margin) _。可以分为标准盒模型和IE盒模型：

标准盒模型的盒子宽度: 左右border + 左右padding + width
IE盒模型的盒子宽度：width
box-sizing: content-box; 表示标准盒子模型
box-sizing: border-box; 表示IE盒子模型

1.4 (CSS) CSS选择器有哪些

基本选择器：
- 通配符选择器（*）
- 标签选择器（div, p, input等标签）
- 类选择器（.classname选择所有具有classname类的元素，.classname1.classname2选择_同时_拥有classname1和classname2两个类的元素）
- ID选择器：按照id属性选择一个与之匹配的元素（项目中每个ID属性都应当是唯一的）
- 属性选择器：按照给定的属性，选择与之匹配的所有元素([attr], [attr=value]

例：页面元素：

<div class="test" test="2">属性选择器2</div>
<div class="test" test="3">属性选择器3</div>

样式:

.test {
  width: 100px;
  height: 100px;
}

.test[test='2'] {
  background-color: gray;
}

.test[test='3'] {
  background-color: blue;
}

（扩展）组合器：
- 后代组合器：“ ”（空格）。如：div span匹配所有位于div元素内的span元素
- 直接子代组合器：> 选择前一个元素的直接子代节点。如ul > li匹配直接嵌套在
  - 元素内的所有li元素
- 一般兄弟组合器：~ 选择兄弟元素，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。
- 紧邻兄弟组合器：+ 选择相邻元素，后一个元素紧跟前一个之后，且共享同一个父节点

1.5 (vue) route和router的区别

router是Vue Router的实例，用于全局路由的管理和操作，如路由的跳转、历史记录的控制等。提供了push, replace, go等方法用于执行路由变化和页面跳转。可以通过$router对象在Vue组件中获取当前应用程序的路由状态，并执行路由相关的操作。
route是当前路由信息的对象，包含了当前路由的详细信息，用于在组件中获取当前路由的状态和信息。是一个只读对象，不能直接修改其属性值。如this.$route.query获取当前页面的query

2. 数据结构与算法

2.1 题目描述

小红在玩一个三消游戏，游戏中n个球拍成一排，每个球都有一个颜色。若有3个颜色相同的球连在一起，则消除这3个球，然后剩下的球会重新连在一起。在没有3个颜色相同的球连在一起时，小红可以在任意一个球的左边（或右边）添加一个任意颜色的球。
小红觉得这个游戏很难，因此她准备按任意顺序重新排序这n个球。小红想知道在她重新排序这n个球后，最少需要添加多少个球才可以消除所有的球。

输入描述

nums: number[]

输出描述

输出一个整数表示答案

示例1

输入： [3, 1, 2, 3, 1, 3]
输出: 3
说明：重新排列后为[3, 3, 3, 2, 1, 1], 小红只需要再补充1一个1，
  2个2，就可以消除所有的球，即最少总共需要补充3个球

个人解答（可能有错误，因为我是上网搜到的题，然后自己做的而已，欢迎指正）

 function minBallsToAdd(nums) {
  const countMap = new Map();
  // 1. 统计每种颜色球的数量
  for (const num of nums) {
    countMap.set(num, (countMap.get(num) || 0) + 1);
  }
  // 2. 统计每种颜色球的数量，如果余数不为0，则要补多少
  let ballsToAdd = 0;
  for (const value of countMap.values()) {
    const remainder = value % 3;
    if (remainder !== 0) {
      ballsToAdd += 3 - remainder;
    }
  }

  return ballsToAdd
}