保利威（立方科技）前端实习 笔试

一.不定项选择（10 * 5)
1.生命周期相关
2.Cookie、LocalStorage、SessionStorage区别
3.跨域问题
4.var const let
5.箭头函数，普通函数区别
这些问题涉及到前端开发中的一些基础概念和常见问题，下面我来逐一详细解答：

1. 生命周期相关： Vue 组件生命周期钩子函数包括 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed。它们分别代表了组件在不同阶段执行的操作。例如，beforeCreate 在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用，mounted 在挂载的元素被新创建的 vm.$el 替换，并挂载到实例上去之后调用。

2. Cookie、LocalStorage、SessionStorage 区别：

   • Cookie：存储在客户端的小段文本信息，会随着每次HTTP请求自动发送到服务器端。可以通过JavaScript的document.cookie API进行读取和设置，但是有一些限制，比如每个cookie的大小不能超过4KB。
   • LocalStorage：存储在客户端的持久化数据，不会随着HTTP请求自动发送到服务器端。与Cookie相比，LocalStorage的容量更大（一般5MB），并且可以通过localStorage对象进行读取和设置。
   • SessionStorage：与LocalStorage类似，但是数据仅在当前会话期间有效，关闭浏览器标签页或窗口后会被清除。可以通过sessionStorage对象进行读取和设置。

3. 跨域问题： 跨域是指在浏览器同源策略下，当前页面请求的资源与当前页面的来源不同，导致请求被浏览器阻止的情况。解决跨域问题的常见方式包括：

   • JSONP：通过动态创建 <script> 标签实现跨域请求数据。
   • CORS：服务端设置响应头中的 Access-Control-Allow-Origin，允许特定域的请求。
   • 代理：在客户端与服务端之间设置代理服务器进行请求转发。
   • WebSocket：使用WebSocket协议进行通信，绕过同源策略的限制。
   • 服务器设置：在Nginx或其他Web服务器上进行相关设置，允许跨域请求。

4. var、const、let：

   • var：用于声明变量，存在变量提升，作用域为声明所在的函数或全局范围。可以重复声明同名变量，且没有块级作用域。
   • const：用于声明常量，声明时必须初始化，一旦赋值后不可更改。作用域同 let，也存在块级作用域。
   • let：用于声明块级作用域的变量，不存在变量提升，只在块级作用域内有效。不可重复声明同名变量。

5. 箭头函数与普通函数区别：

• 箭头函数没有自己的this，会捕获其所在上下文的this值作为自己的this值。
• 箭头函数不能通过new关键字调用，也没有prototype属性。
• 箭头函数没有arguments对象，可以使用剩余参数(rest parameters)代替。
• 箭头函数不能作为构造函数使用，因为它没有[[Construct]]方法。

以上是对所提出问题的详细解答，希望对你有所帮助。如果有任何疑问，欢迎进一步提问。

6.哪些一定不会引起重排四个选项：visible,color,padding,boder

在给定的选项中，padding 和 border 是不会引起重排的。因为重排是由于布局或尺寸变化引起的，而 padding 和 border 只会影响元素的内部尺寸，不会改变元素在文档流中的位置或大小，因此不会触发重排。

visible 和 color 是 CSS 样式属性，它们也不会引起重排，因为它们只影响元素的外观，而不会改变元素的尺寸或布局。

因此，正确答案是：padding 和 border。

7.原型原型链
8.Vue-Router history和hash
9.盒模型

7. 原型和原型链

原型 (Prototype)

• 在 JavaScript 中，每个对象都有一个原型对象（prototype）。
• 原型对象是一个普通的对象，用于实现对象之间的属性继承。
• 对象可以通过 __proto__ 属性访问其原型对象。

原型链 (Prototype Chain)

• 原型链是一种对象之间通过原型对象进行属性查找的机制。
• 如果一个对象无法在自身属性中找到所需的属性或方法，它会沿着原型链向上搜索直到找到为止。
• 原型链的顶端是 Object.prototype，它是所有对象的根原型。

8. Vue-Router 中的 history 和 hash

hash 模式

• 在 hash 模式下，路由信息会以 URL 中的哈希值的形式呈现，例如 http://example.com/#/about。
• 由于哈希值的变化不会触发页面重新加载，因此使用 hash 模式可以在不刷新页面的情况下更新路由信息。
• hash 模式的主要缺点是 URL 中会出现 # 符号，不够美观。

history 模式

• 在 history 模式下，路由信息会以常规 URL 的形式呈现，例如 http://example.com/about。
• 使用 history 模式时，路由信息不会通过哈希值，而是通过 HTML5 的 history API 进行管理。
• history 模式的优点是 URL 更加美观，但需要服务器端配置支持。

9. 盒模型

盒模型 (Box Model)

• 在网页布局中，每个 HTML 元素都被看作是一个矩形的盒子，这个矩形盒子由内容区域、内边距、边框和外边距组成。
• 内容区域 (Content Area)：盒子中用于显示内容的区域，由元素的宽度和高度决定。
• 内边距 (Padding)：内容区域与边框之间的空间，用于控制元素内容与边框的距离。
• 边框 (Border)：包围在内边距外部的边框线，用于定义元素的边界。
• 外边距 (Margin)：盒子与其他元素之间的空间，用于控制元素与其他元素的距离。

盒模型的两种标准

• 标准盒模型 (Standard Box Model)：元素的宽度和高度仅包括内容区域，不包括内边距、边框和外边距。
• IE 盒模型 (IE Box Model)：元素的宽度和高度包括内容区域、内边距和边框，但不包括外边距。

CSS 盒模型的属性

• box-sizing：用于指定元素的盒模型类型，可选值包括 content-box 和 border-box。
• padding、border、margin：分别用于设置元素的内边距、边框和外边距的大小。
• width、height：用于设置元素的宽度和高度。

在布局设计中，理解盒模型的概念和属性是非常重要的，可以帮助开发者更好地控制元素的尺寸和间距，从而实现各种复杂的布局效果。

10.哪些标识符是缓冲相关的

在前端技术面试中，关于缓冲相关的标识符通常指的是 CSS 属性中的一些属性值，它们用于控制元素的过渡或动画效果的缓冲方式。以下是一些常见的缓冲相关的标识符：

1. transition-timing-function：用于指定过渡效果的缓冲函数，控制过渡期间属性值的变化速度。常见的缓冲函数包括 ease、linear、ease-in、ease-out、ease-in-out 等。

2. animation-timing-function：类似于 transition-timing-function，用于指定动画效果的缓冲函数，控制动画的变化速度。

3. transition-duration：用于指定过渡效果的持续时间，即从开始到结束的过渡时长。

4. animation-duration：用于指定动画效果的持续时间，即动画完成一个周期所需的时间。

5. transition-delay：用于指定过渡效果开始前的延迟时间，即过渡效果何时开始。

6. animation-delay：用于指定动画效果开始前的延迟时间，即动画何时开始。

这些标识符可以帮助开发者控制元素的过渡和动画效果，使其更加流畅和自然。在面试中，了解这些标识符的作用和用法是很重要的，因为它们是前端开发中常用的技术之一。 二、编程题(2 * 25)
编写样式：通过媒体查询设置一些宽度（视口宽度）和边距之类的，还有居中布局
编写一个TrafficLightController类，实现红绿灯状态切换，并在控制台打印输出。要求如下：
（1）start()方法，实现红绿灯切换，绿灯：30s，黄灯3s，红灯20s
（2）changeDuration()方法，可以改变红绿灯持续时间
（3）stop()方法，停止切换
（4）可以使用Promise、async、await 下面是一个简单的 JavaScript 类 TrafficLightController，用于实现红绿灯状态切换，并在控制台打印输出：

class TrafficLightController {
    constructor() {
        this.colors = ['红灯', '绿灯', '黄灯'];
        this.durations = [20, 30, 3]; // 红灯20秒，绿灯30秒，黄灯3秒
        this.currentIndex = 0;
        this.timer = null;
    }

    async start() {
        console.log('交通灯开始工作...');
        while (true) {
            await this.switchLight(this.currentIndex);
            await this.sleep(this.durations[this.currentIndex] * 1000);
            this.currentIndex = (this.currentIndex + 1) % this.colors.length;
        }
    }

    changeDuration(index, duration) {
        if (index >= 0 && index < this.durations.length && duration > 0) {
            this.durations[index] = duration;
        }
    }

    stop() {
        clearInterval(this.timer);
        console.log('交通灯停止工作...');
    }

    switchLight(index) {
        return new Promise(resolve => {
            console.log(`当前交通灯颜色为：${this.colors[index]}`);
            resolve();
        });
    }

    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// 测试
const trafficLightController = new TrafficLightController();
trafficLightController.start();

这个类实现了红绿灯状态切换的功能，并使用了 Promise、async 和 await 来确保异步操作的顺序执行。你可以通过调用 start() 方法来启动交通灯的工作，通过调用 changeDuration() 方法来改变红绿灯持续时间，通过调用 stop() 方法来停止交通灯的工作。

class TrafficLightController {
    constructor() {
        // 定义交通灯的三种颜色和持续时间
        this.colors = ['红灯', '绿灯', '黄灯'];
        this.durations = [20, 30, 3]; // 红灯20秒，绿灯30秒，黄灯3秒
        this.currentIndex = 0; // 当前交通灯的索引
        this.timer = null; // 定时器对象，用于停止交通灯切换
    }

    // 启动交通灯切换
    async start() {
        console.log('交通灯开始工作...');
        while (true) {
            // 切换交通灯并等待指定时间
            await this.switchLight(this.currentIndex);
            await this.sleep(this.durations[this.currentIndex] * 1000);
            // 更新当前交通灯索引
            this.currentIndex = (this.currentIndex + 1) % this.colors.length;
        }
    }

    // 改变指定颜色的持续时间
    changeDuration(index, duration) {
        if (index >= 0 && index < this.durations.length && duration > 0) {
            this.durations[index] = duration;
        }
    }

    // 停止交通灯切换
    stop() {
        clearInterval(this.timer); // 清除定时器
        console.log('交通灯停止工作...');
    }

    // 切换交通灯并打印当前颜色
    switchLight(index) {
        return new Promise(resolve => {
            console.log(`当前交通灯颜色为：${this.colors[index]}`);
            resolve();
        });
    }

    // 异步等待指定的毫秒数
    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
}

// 测试
const trafficLightController = new TrafficLightController();
trafficLightController.start();

这个代码包含了详细的注释，解释了每个函数和变量的作用。使用 TrafficLightController 类可以实现交通灯状态切换，并在控制台打印输出。

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