美团酒旅前端实习(g)

1、自我介绍
2、项目中遇到的问题（样式冲突）

3、css选择器优先级

在项目中遇到的样式冲突问题可能是由于 CSS 选择器优先级不当引起的。CSS 选择器的优先级是确定应用于元素的样式的一种机制，它决定了当多个样式规则应用于同一元素时，哪个样式规则将会被应用。

CSS 选择器优先级通常由以下几个部分组成，按优先级递减的顺序排列：

内联样式：通过 style 属性直接给元素指定的样式，具有最高的优先级。
ID 选择器：通过 # 符号指定的 ID 选择器，每个 ID 选择器都会具有更高的优先级。
类选择器、属性选择器和伪类选择器：包括类选择器（.class）、属性选择器（[attribute]）和伪类选择器（:pseudo-class），它们的优先级相同，但比元素选择器的优先级高。
元素选择器和伪元素选择器：包括元素选择器（tagname）和伪元素选择器（::pseudo-element），它们的优先级最低。
通配选择器：使用 * 符号指定的通配选择器，其优先级最低，一般情况下不建议使用。

在处理样式冲突时，可以根据以上规则来调整 CSS 选择器的优先级，确保所需的样式规则能够正确应用到目标元素上。如果发生了样式冲突，可以考虑通过增加选择器的特异性（specificity）来解决，例如使用更具体的选择器，或者使用 !important 来强制指定某个样式规则。但是要注意，滥用 !important 可能会导致后期的维护困难，建议尽量避免使用它。

4、var，let，const

var、let 和 const 是 JavaScript 中用于声明变量的关键字，它们之间有一些区别：

var：
- var 是 ES5 中引入的声明变量的关键字。
- 声明的变量存在变量提升（hoisting）的特性，即变量可以在声明之前使用。
- var 声明的变量的作用域是函数作用域，不受块级作用域的限制。
- 使用 var 声明的变量可以被重复声明，而且不会报错。
let：
- let 是 ES6 中引入的声明变量的关键字。
- 声明的变量不存在变量提升，即变量只能在声明之后使用。
- let 声明的变量的作用域是块级作用域，不会受到函数作用域的限制。
- 使用 let 声明的变量可以修改其值，但不能被重复声明。
const：
- const 也是 ES6 中引入的声明变量的关键字。
- 声明的变量必须进行初始化，并且不能再重新赋值。
- const 声明的变量的作用域同样是块级作用域。
- const 声明的对象和数组是可以修改内部属性或元素的，但不能重新赋值。

5、防抖节流区别

防抖（Debounce）和节流（Throttle）是一种优化高频率执行代码的技术，主要用于减少不必要的函数调用，提高性能。它们之间的区别如下：

防抖（Debounce）：
- 当持续触发事件时，防抖函数会在一定的延迟后执行一次回调函数。
- 如果在延迟时间内再次触发了相同的事件，则会重新开始计时，直到超过延迟时间后再执行回调函数。
- 适用于处理频繁触发的事件，如输入框输入事件、窗口大小改变事件等。
节流（Throttle）：
- 节流函数会在一定的时间间隔内执行一次回调函数。
- 即使在时间间隔内多次触发了相同的事件，也只会执行一次回调函数。
- 适用于处理高频率触发的事件，如滚动事件、鼠标移动事件等，可以控制事件处理函数的执行频率。

6、v-if和v-show

v-if 和 v-show 是 Vue.js 中用于条件渲染的两个指令，它们的作用类似，但在某些情况下有不同的应用场景。

v-if：

v-if 是 Vue.js 提供的条件渲染指令之一。
当表达式的值为真（true）时，元素会被渲染到 DOM 中；当表达式的值为假（false）时，元素将不会被渲染到 DOM 中。
在切换时，v-if 指令切换的是整个 DOM 元素，包括其内部的组件和事件监听器。因此，如果条件切换频繁，会有一定的性能开销。
适用于需要在条件判断改变时，完全销毁和重新创建 DOM 元素的情况。

<template>
  <div>
    <p v-if="isVisible">This is visible</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-show：

v-show 也是 Vue.js 提供的条件渲染指令之一。
不管表达式的值是真还是假，元素都会被渲染到 DOM 中，只是通过 CSS 控制其显示或隐藏。
在切换时，v-show 指令只是简单地切换元素的 CSS 属性 display，因此对性能影响较小。
适用于需要频繁切换显示和隐藏状态的元素，如菜单、折叠面板等。

<template>
  <div>
    <p v-show="isVisible">This is visible</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

综上所述，当需要频繁切换显示和隐藏状态的元素时，应优先使用 v-show，以减少不必要的 DOM 操作；而当需要根据条件完全销毁和重新创建 DOM 元素时，应使用 v-if。

7、事件循环说输出（秒）
8、自然数N，1-N里1出现的次数（暴力，别的不会）
9、数组拍平+去重（es6新数组方法秒）

1. 统计自然数1-N中1出现的次数

要统计自然数 1-N 中1出现的次数，可以使用暴力法逐个遍历数字并统计1出现的次数。具体步骤如下：

遍历从 1 到 N 的每一个数字。
对于每个数字，将其转换为字符串，并遍历字符串的每一位。
统计每一位上出现的1的次数，并累加到总次数中。
最终得到1-N中1出现的总次数。

以下是使用 JavaScript 实现的代码示例：

function countOnes(N) {
    let count = 0;
    for (let i = 1; i <= N; i++) {
        const str = i.toString();
        for (let j = 0; j < str.length; j++) {
            if (str[j] === '1') {
                count++;
            }
        }
    }
    return count;
}

// 示例用法
const N = 100; // 自然数N
console.log("1出现的次数：", countOnes(N));

2. 数组拍平并去重（ES6新数组方法）

要实现数组的拍平并去重，可以使用 ES6 中的数组方法来实现。具体步骤如下：

使用 flat() 方法将多维数组拍平为一维数组。
使用 new Set() 对一维数组进行去重。
使用 Array.from() 将 Set 转换为数组，得到拍平并去重后的数组。

以下是使用 JavaScript 实现的代码示例：

const arr = [1, 2, [3, 4], [5, 6, [7, 8]]];
const flatAndUnique = Array.from(new Set(arr.flat()));

console.log("拍平并去重后的数组：", flatAndUnique);

这样就可以实现数组的拍平并去重，得到所需的结果。

感觉还没睡醒，算法题没做出，八股也有道说反了
但是面试官也没好好问，每道都想了半天才说，一共就问了半个小时

前端面试题详解整理69|统计自然数1-N中1出现的次数,数组v-if和v-show ,css选择器优先级 ,var，let，const ,防抖节流区别 ,

美团酒旅 前端实习(g)