当前位置：首页 > news >正文

前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

news 2025/9/13 0:01:03

HTML/CSS 面试题

什么是语义化 HTML？

说明：语义化 HTML 使用 HTML 标签来描述内容的含义，而不仅仅是其外观。使用语义化标签可以提高可读性和可访问性，并对 SEO 友好。

示例：

<header><h1>网站标题</h1>
</header>
<nav><ul><li><a href="#home">首页</a></li><li><a href="#about">关于</a></li></ul>
</nav>
<article><h2>文章标题</h2><p>文章内容...</p>
</article>
<footer><p>版权信息</p>
</footer>

盒子模型是什么？
1. 说明：CSS 盒子模型描述了每个元素的布局，包括内容、内边距（padding）、边框（border）和外边距（margin）。理解盒子模型对布局和样式设计至关重要。
2. 示例：
```
.box {width: 200px; /* 内容宽度 */padding: 20px; /* 内边距 */border: 5px solid black; /* 边框 */margin: 15px; /* 外边距 */
}
```

如何创建响应式设计？

说明：响应式设计使网页在不同设备上良好展示，通常使用媒体查询和流式布局。通过 CSS 适配不同屏幕尺寸。

示例：

/* 默认样式 */
.container {display: flex;flex-direction: row;
}/* 媒体查询 */
@media (max-width: 600px) {.container {flex-direction: column; /* 在小屏幕上改为列方向 */}
}

CSS 选择器的优先级是如何计算的？
1. 说明：CSS 选择器的优先级影响样式的应用。优先级从高到低为：内联样式 > ID 选择器 > 类选择器和属性选择器 > 标签选择器。
2. 示例：
```
<style>/* 标签选择器 */p {color: blue;}/* 类选择器 */.important {color: red;}/* ID 选择器 */#unique {color: green;}
</style><p id="unique" class="important">这段文本是绿色的。</p>
```
什么是 Flexbox 和 Grid，主要区别是什么？
- 说明：Flexbox 是用于一维布局（横向或纵向）的 CSS 布局模型，适合于处理单行或单列元素的对齐；Grid 是用于二维布局（行和列）的 CSS 布局模型，适合于更复杂的布局。
- 示例（Flexbox）：
```
.flex-container {display: flex;justify-content: space-between; /* 水平对齐 */
}
```
- 示例（Grid）：
```
.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 三列布局 */
}
```
什么是 CSS 预处理器？为什么使用它？
- 说明：CSS 预处理器（如 Sass、LESS）扩展了 CSS 的功能，支持变量、嵌套规则、混入等，使 CSS 代码更具可维护性和复用性。
- 示例（使用 Sass）：
```
$primary-color: blue;.button {background-color: $primary-color;&:hover {background-color: darken($primary-color, 10%);}
}
```

CSS 动画和过渡的区别是什么？

说明：CSS 过渡是元素在状态变化时的平滑过渡，通常涉及两个状态的变化；CSS 动画允许在多帧之间定义关键帧，创建更复杂的动画效果。

示例（过渡）：

.box {width: 100px;height: 100px;transition: background-color 0.5s;
}.box:hover {background-color: red; /* 悬停时改变背景色 */
}

示例（动画）：

@keyframes example {from {background-color: red;}to {background-color: yellow;}
}.box {width: 100px;height: 100px;animation: example 2s infinite; /* 持续循环动画 */
}

如何使用媒体查询实现响应式布局？
- 说明：媒体查询允许根据不同设备的特性（如屏幕宽度）应用不同的样式。
- 示例：
```
@media (max-width: 768px) {.container {flex-direction: column; /* 小屏幕时使用列布局 */}
}
```
如何优化网页的加载速度？
- 说明：可以通过减少 HTTP 请求、压缩图片、使用 CDN、最小化 CSS 和 JavaScript 文件等手段提升网页性能。
- 示例：
```
<link rel="stylesheet" href="styles.min.css"> 
```
DOCTYPE 的作用是什么？
- 说明：DOCTYPE 声明定义了文档类型，告诉浏览器使用哪种 HTML 或 XHTML 规范来渲染页面。它有助于确保页面在标准模式下呈现，而不是怪异模式。
- 示例
```
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>Hello, World!</h1>
</body>
</html>
```

JavaScript 面试题

JavaScript 的基本数据类型有哪些？

说明：JavaScript 中有七种基本数据类型：undefined、null、boolean、number、string、symbol（ES6 引入）和 bigint（ES11 引入）。

示例：

let num = 10;         // number
let str = "Hello";    // string
let isTrue = true;    // boolean
let nothing = null;    // null
let notDefined;        // undefined
let sym = Symbol();    // symbol
let bigInt = BigInt(123); // bigint

什么是闭包？
- 说明：闭包是指一个函数能够访问其外部作用域的变量，即使外部函数已经返回。闭包可以用来创建私有变量。
- 示例：
```
function outer() {let count = 0;return function inner() {count++;console.log(count);};
}
const increment = outer();
increment(); // 1
increment(); // 2
```

解释原型链的概念。

说明：JavaScript 中的对象通过原型链继承属性和方法。每个对象都有一个 __proto__ 属性，指向其构造函数的原型。

示例：

function Person(name) {this.name = name;
}
Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}`);
};const john = new Person('John');
john.greet(); // Hello, my name is John

JavaScript 中的 `this` 是什么？

说明：this 是一个动态绑定的关键字，指向函数执行时的上下文。它的值取决于调用函数的方式。

示例：

const obj = {name: 'Alice',greet() {console.log(`Hello, ${this.name}`);}
};
obj.greet(); // Hello, Aliceconst greetFunc = obj.greet;
greetFunc(); // Hello, undefined (在非严格模式下)

解释 == 和 === 的区别。
- 说明：== 是宽松比较，会进行类型转换；=== 是严格比较，不会进行类型转换。
- 示例：
```
console.log(0 == '0');  // true
console.log(0 === '0'); // false
```
什么是 Promise？如何使用？
- 说明：Promise 是用于处理异步操作的对象，表示一个可能在将来某个时间点完成的操作。它有三种状态：pending（进行中）、fulfilled（已完成）、rejected（已失败）。
- 示例：
```
const fetchData = () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve('Data fetched!');}, 1000);});
};fetchData().then(data => console.log(data)); // 1秒后输出 "Data fetched!"
```

什么是 async/await？

说明：async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码。async 声明一个异步函数，await 用于等待 Promise 完成。

示例：

const fetchData = () => {return new Promise((resolve) => {setTimeout(() => {resolve('Data fetched!');}, 1000);});
};const fetchAsyncData = async () => {const data = await fetchData();console.log(data);
};
fetchAsyncData(); // 1秒后输出 "Data fetched!"

解释事件冒泡和事件捕获。

说明：事件冒泡是指事件从目标元素向上冒泡到父元素的过程；事件捕获是指事件从父元素向下传播到目标元素的过程。可以通过 addEventListener 的第三个参数控制。

示例：

<div id="parent"><button id="child">Click me</button>
</div><script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');parent.addEventListener('click', () => {console.log('Parent clicked');
}, false); // false 为冒泡，true 为捕获child.addEventListener('click', () => {console.log('Child clicked');
}, false);
</script>

什么是节流（throttling）和防抖（debouncing）？

说明：节流是指限制某个函数在一定时间内只能执行一次；防抖是指在事件触发后等待一段时间，如果在这段时间内又触发了事件，则重新计时。

示例（节流）：

function throttle(fn, delay) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime > delay) {lastTime = now;fn.apply(this, args);}};
}

示例（防抖）：

function debounce(fn, delay) {let timer;return function(...args) {clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};
}

解释浅拷贝和深拷贝的区别。

说明：浅拷贝只复制对象的第一层属性，若属性是引用类型，复制的是地址；深拷贝则递归复制所有层级的属性。

示例（浅拷贝）：

const original = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, original);
shallowCopy.b.c = 3;
console.log(original.b.c); // 3 (原对象也受到影响)

示例（深拷贝）：

const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));
deepCopy.b.c = 3;
console.log(original.b.c); // 2 (原对象没有受到影响)

Vue.js 面试题

Vue 的核心概念是什么？
- 说明：Vue.js 是一个用于构建用户界面的渐进式框架。其核心概念包括响应式数据绑定、组件化开发和虚拟 DOM。
- 示例：
```
new Vue({el: '#app',data: {message: 'Hello Vue!'}
});
```
什么是 Vue 实例的生命周期钩子？
- 说明：Vue 实例在创建、挂载、更新和销毁的过程中会经历不同的生命周期阶段，生命周期钩子允许我们在这些阶段执行特定操作。
- 示例：
```
new Vue({data() {return {message: 'Hello!'};},created() {console.log('组件创建时调用');},mounted() {console.log('组件挂载后调用');},destroyed() {console.log('组件销毁前调用');}
});
```
如何在 Vue 中创建组件？
- 说明：Vue 组件是 Vue 应用的核心，通过 Vue.component() 或单文件组件（.vue 文件）来定义。
- 示例：
```
Vue.component('my-component', {template: '<div>A custom component!</div>'
});
```

什么是双向数据绑定，如何实现？

说明：双向数据绑定允许视图和模型之间同步变化。Vue.js 使用 v-model 指令实现双向绑定。

示例：

<div id="app"><input v-model="inputValue"><p>{{ inputValue }}</p> <!-- 实时显示输入的内容 -->
</div><script>
new Vue({el: '#app',data() {return {inputValue: ''};}
});
</script>

Vue 的计算属性与方法的区别是什么？
- 说明：计算属性是基于其依赖进行缓存的，当依赖改变时才会重新计算；方法是每次调用时都会执行。
- 示例：
```
new Vue({el: '#app',data() {return {number: 1};},computed: {double() {return this.number * 2; // 计算属性}},methods: {doubleMethod() {return this.number * 2; // 方法}}
});
```

Vue 中的指令是什么？

说明：指令是 Vue.js 特有的特殊属性，用于在 DOM 元素上应用特定的行为。常见的指令有 v-if、v-for、v-show 等。

示例：

<div id="app"><p v-if="isVisible">这个段落是可见的</p><button @click="toggleVisibility">切换可见性</button>
</div><script>
new Vue({el: '#app',data() {return {isVisible: true};},methods: {toggleVisibility() {this.isVisible = !this.isVisible; // 切换可见性}}
});
</script>

什么是 Vuex，如何使用？

说明：Vuex 是 Vue.js 的状态管理库，允许集中管理组件的状态。它通过 State、Getters、Mutations 和 Actions 进行状态管理。

示例：

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;}}
});new Vue({el: '#app',store,computed: {count() {return this.$store.state.count; // 获取状态}},methods: {increment() {this.$store.commit('increment'); // 提交变更}}
});

如何在 Vue 中实现路由？

说明：Vue Router 是 Vue.js 的官方路由管理器，允许在应用中实现导航和路由。

示例：

const router = new VueRouter({routes: [{ path: '/home', component: HomeComponent },{ path: '/about', component: AboutComponent }]
});new Vue({el: '#app',router
});

什么是 Vue 的过滤器，如何使用？

说明：过滤器用于对数据进行格式化和处理，在模板中使用。

示例：

Vue.filter('capitalize', function(value) {if (!value) return '';return value.charAt(0).toUpperCase() + value.slice(1);
});new Vue({el: '#app',data() {return {message: 'hello'};}
});

什么是服务端渲染（SSR），Vue 如何实现？
- 说明：服务端渲染是指在服务器上生成 HTML，并返回给客户端，提升首屏加载速度和 SEO 性能。Vue 可以通过 Nuxt.js 等框架实现 SSR。
- 示例：
```
// 使用 Nuxt.js
export default {asyncData(context) {return context.$axios.$get('/api/data').then(data => {return { data };});}
};
```

Vue 2 vs Vue 3 面试题

Vue 2 和 Vue 3 的响应式系统有什么区别？
- 说明：Vue 2 使用 Object.defineProperty 实现响应式，主要通过 getter/setter 劫持对象属性。而 Vue 3 则使用 Proxy API，实现更加高效和灵活的响应式系统。
- 示例（Vue 2）：
```
const vm = new Vue({data: {message: 'Hello'}
});
vm.message = 'World'; // 会触发视图更新
```
- 示例（Vue 3）：
```
const { reactive } = Vue;
const state = reactive({message: 'Hello'
});
state.message = 'World'; // 会触发视图更新
```

Vue 3 引入的 Composition API 有什么优势？

说明：Composition API 允许更灵活的代码组织和复用逻辑。它支持逻辑的组合，减少了大型组件中的代码耦合，提高了可读性。

示例：

// Vue 2
export default {data() {return { count: 0 };},methods: {increment() {this.count++;}}
};// Vue 3
import { ref } from 'vue';
export default {setup() {const count = ref(0);const increment = () => count.value++;return { count, increment };}
};

在 Vue 3 中如何创建一个组件？
- 说明：Vue 3 支持使用 Composition API 创建组件，同时也保留了 Options API 的使用方式。
- 示例（使用 Composition API）：
```
import { defineComponent } from 'vue';export default defineComponent({setup() {return () => <div>Hello, Vue 3!</div>;}
});
```
Vue 2 中的 $set 和 Vue 3 中的反应性系统如何处理新增属性？
- 说明：在 Vue 2 中，添加新属性需要使用 $set 方法才能使其响应式；而在 Vue 3 中，使用 Proxy 后，新增属性会自动变为响应式。
- 示例（Vue 2）：
```
const vm = new Vue({data: {obj: {}}
});
Vue.set(vm.obj, 'newProp', 'value'); // 新增属性使其响应式
```
- 示例（Vue 3）：
```
const { reactive } = Vue;
const state = reactive({ obj: {} });
state.obj.newProp = 'value'; // 新增属性自动响应
```
如何处理 Vue 2 和 Vue 3 中的事件监听？
- 说明：在 Vue 2 中使用 v-on 监听事件，而在 Vue 3 中可以使用 @ 符号简化语法。
- 示例（Vue 2）：
```
<button v-on:click="handleClick">Click me</button>
```
- 示例（Vue 3）：
```
<button @click="handleClick">Click me</button>
```
Vue 3 中的 Teleport 组件是什么？有什么用？
- 说明：Teleport 组件允许将子组件渲染到 DOM 的不同位置，通常用于模态框或工具提示等场景。
- 示例：
```
<template><teleport to="body"><div class="modal">这是一个模态框</div></teleport>
</template>
```
Vue 3 中的 v-model 有哪些变化？
- 说明：Vue 3 中的 v-model 允许更灵活的使用，支持多个 v-model 和自定义 modelValue 属性。
- 示例：
```
<input v-model="message" />
```
- 示例（多个 v-model）：
```
<MyComponent v-model:title="title" v-model:content="content" />
```
Vue 3 引入的 Suspense 组件有什么用途？
- 说明：Suspense 组件用于处理异步组件的加载状态，提供 fallback 内容直到异步组件加载完成。
- 示例：
```
<suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template>
</suspense>
```

Vue 3 中的 `provide/inject` 是如何工作的？

说明：provide/inject 允许父组件向其所有子组件提供数据，而不需要通过 props 层层传递。

示例：

// 父组件
import { provide } from 'vue';
export default {setup() {provide('key', 'value');}
};// 子组件
import { inject } from 'vue';
export default {setup() {const value = inject('key');console.log(value); // 'value'}
};

在 Vue 2 和 Vue 3 中如何处理错误捕获？
- 说明：Vue 2 中使用全局的 errorHandler 和组件内的 errorCaptured；而 Vue 3 采用了新的 API，可以在 setup 中使用 onErrorCaptured。
- 示例（Vue 2）：
```
Vue.config.errorHandler = (err, vm) => {console.error(err);
};
```
- 示例（Vue 3）：
```
import { onErrorCaptured } from 'vue';
setup() {onErrorCaptured((err) => {console.error(err);return false; // 继续传播});
}
```

FLutter

1. 什么是 Flutter？它的优势是什么？

Flutter 是 Google 提供的开源 UI 框架，用于构建跨平台应用程序。它允许使用 Dart 编程语言编写代码，并通过一个代码库生成适用于 iOS、Android、Web 和桌面应用的界面。
优势：
- 单一代码库支持多平台。
- 高性能，因为 Flutter 使用自己的渲染引擎。
- 丰富的自定义控件，提供了极大的设计自由。
- 热重载功能，提高开发效率。

2. StatefulWidget 和 StatelessWidget 有什么区别？

StatelessWidget 是不可变的，一旦构建完成，Widget 的状态不可更改，通常用于无状态的 UI 元素。
StatefulWidget 是可变的，可以在运行时动态更改状态，需要通过 setState 来更新 UI。

3. Flutter 中的状态管理有哪些方式？

Flutter 提供了多种状态管理的方式：
1. setState()：最基础的状态管理方式，适用于小范围的组件状态管理。
2. InheritedWidget：用于在组件树中跨越多个组件共享数据。
3. Provider：一种更现代且常用的状态管理库，基于 InheritedWidget，简化了状态管理流程。
4. Riverpod：Provider 的替代方案，提供更灵活的 API。
5. Bloc (Business Logic Component)：使用事件和状态流来管理应用程序状态。
6. GetX：轻量级的状态管理、依赖注入和路由管理框架。

4. 什么是 Hot Reload 和 Hot Restart？有什么区别？

Hot Reload：只重新加载 Dart 代码的更改，并保持应用程序的状态不变。这使得开发过程更加高效。
Hot Restart：重新启动应用程序，并重新加载所有状态和代码，类似于应用的冷启动。

5. Flutter 中的 Widget 树是什么？为什么重要？

在 Flutter 中，所有东西都是 Widget，Flutter 应用由一棵 Widget 树组成。Widget 树定义了应用程序的 UI 和布局，理解和构建有效的 Widget 树对于提高性能非常重要。

6. 什么是 Keys？为什么需要使用 Keys？

Keys 是 Flutter 中用于标识和跟踪 Widget 的特殊属性。它们在 Widget 树中起到识别作用，特别是在 List 或状态复杂的情况下，Keys 帮助 Flutter 正确地更新和维护 Widget。
使用场景：
- 在 ListView 中保持元素顺序不变。
- 当需要保留 StatefulWidget 状态时。

7. Flutter 中如何处理异步操作？

Flutter 提供了多种处理异步操作的方式：
1. 使用 async 和 await 处理异步函数。
2. 使用 Future 来表示异步操作的结果。
3. 使用 Stream 来处理一系列的异步事件，例如流式数据。

8. Flutter 中的 Navigator 和路由是什么？如何管理路由？

Navigator 是 Flutter 中用于管理应用页面导航的组件。它维护一个堆栈，用于跟踪屏幕导航。
路由管理：
1. 通过 Navigator.push() 和 Navigator.pop() 方法进行页面间的跳转和返回。
2. 使用 MaterialPageRoute 或自定义的 PageRoute 实现页面动画。
3. 通过 onGenerateRoute 或 Navigator 2.0 实现复杂的路由管理。

9. 什么是 FutureBuilder 和 StreamBuilder？它们的作用是什么？

FutureBuilder 是用于处理和显示 Future 数据的 Widget，适合一次性异步数据获取。
StreamBuilder 则用于处理流数据，适合用于多次异步数据变化的场景（如数据流）。

10. 如何优化 Flutter 应用的性能？

优化方法：
1. 避免在 build() 方法中执行繁重的计算。
2. 使用 const 构建不可变的 Widget。
3. 合理使用 ListView.builder 等延迟加载的列表控件。
4. 使用 RepaintBoundary 降低不必要的重绘。
5. 分析性能瓶颈，可以通过 Flutter DevTools 进行调试。

11. Flutter 中如何进行网络请求？

可以使用 Flutter 提供的 http 包进行网络请求。以下是一个简单的网络请求示例：

import 'package:http/http.dart' as http;
import 'dart:convert';Future<void> fetchData() async {final response = await http.get(Uri.parse('https://api.example.com/data'));if (response.statusCode == 200) {var data = jsonDecode(response.body);print(data);} else {throw Exception('Failed to load data');}
}

12. 如何在 Flutter 中实现动画效果？

Flutter 提供了多种方式实现动画，包括：
1. 使用 AnimatedBuilder 或 AnimatedWidget 来实现基本动画。
2. 使用 Tween 和 AnimationController 实现自定义动画。
3. 使用 Implicit Animations 如 AnimatedContainer、AnimatedOpacity 等简化常见动画效果的实现。

13. Flutter 中如何进行国际化 (i18n)？

Flutter 提供了 flutter_localizations 包来支持国际化。主要步骤包括：
1. 在 pubspec.yaml 中添加依赖：
```
dependencies:flutter_localizations:sdk: flutter
```
2. 使用 Intl 包来管理翻译文件。
3. 在 MaterialApp 中配置 localizationsDelegates 和 supportedLocales。

14. 什么是 Sliver？如何使用 Sliver Widgets？

Sliver 是一组可以延迟加载和滚动的 Widget。它们允许更灵活的滚动效果，特别是在大数据列表和自定义滚动布局中。常见的 Sliver 包括 SliverList、SliverGrid、SliverAppBar 等。

15. Flutter 中如何实现平台特定的代码？

Flutter 通过平台通道（Platform Channels）允许与原生代码（如 Android 的 Kotlin/Java，iOS 的 Swift/Objective-C）进行通信，从而调用平台特定的功能。
可以通过 MethodChannel 实现 Flutter 与原生代码的双向通信。

前端经典【面试题】持续更新HTML、CSS、JS、VUE、FLUTTER、性能优化等

HTML/CSS 面试题什么是语义化 HTML？ 说明：语义化 HTML 使用 HTML 标签来描述内容的含义，而不仅仅是其外观。使用语义化标签可以提高可读性和可访问性，并对 SEO 友好。示例： <header><h1>网站标题</h1&…...

编程日记 2024/10/29 20:18:50

【Linux知识】linux磁盘管理深入了解

文章目录常见磁盘管理命令行磁盘分区NASNAS 磁盘挂载🔐 如何设置NAS设备的访问权限？ Mkfs🧐 mkfs 命令支持哪些文件系统类型？ Mount🔑 在Linux中，如何安全地卸载挂载的文件系统？ 常见磁盘管理命…...

编程日记 2024/10/29 20:17:48

Qt Essential Classes

目录 QVariant QFlags QRandomGenerator 经典的Qt容器 QVector QList QMap QMultiMap QSet QHash QVariant 同std::variant是一样的，他是一个更加高级的union。在一个时间下，它虽然实际上只能是一种类型，但是一个variant可以hold住…...

编程日记 2024/10/29 20:16:47

小小猫棒onu替换家用光猫，薅运营商带宽羊毛，突破1000M

小小猫棒onu 一、总体步骤 1 记录原来光猫信息主要包括SN，ploam密码，loid、loid密码、 mac、上网的vlan id等一般gpon采用SN、ploam密码、SNploam密码三种中的一种认证方式一般Epon采用loid（逻辑id）、mac、loid mac三种中…...

编程日记 2024/10/29 20:15:46

软件测试学习笔记丨Selenium学习笔记：css定位

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/22511 本文为霍格沃兹测试开发学社的学习经历分享，写出来分享给大家，希望有志同道合的小伙伴可以一起交流技术，一起进步~ 说明：本篇博客基于sel…...

编程日记 2024/10/29 20:14:45

python数据处理常用操作

数据处理是机器学习中非常重要的一步，以下是一些常用的操作和示例代码： 1. 数据清洗处理缺失值： import pandas as pd# 读取数据 df pd.read_csv(data.csv)# 删除缺失值 df.dropna(inplaceTrue)# 用均值填充缺失值 df.fillna(df.mean(), i…...

编程日记 2024/10/29 20:06:36

解决minio跨域问题

MinIO 支持跨域资源共享(CORS)，允许你配置跨域请求的相关策略。以下是一个基本的CORS配置示例，你可以在MinIO的配置文件（例如config.json）中设置这些策略： 在Linux中 root/.minio 目录下如果没有就新建一个 config.jso…...

编程日记 2024/10/29 20:04:33

python 跳过当前循环

在 Python 中，可以使用 continue 语句来跳过当前循环的剩余部分，并继续下一次循环。continue 语句用于跳过循环体中剩余的语句，并立即开始下一次迭代。以下是一个简单的示例，演示了如何在 for 循环中使用 continue 语句&#xf…...

编程日记 2024/10/29 20:02:31

数据库数据恢复—Oracle ASM磁盘组掉线，ASM实例无法挂载的数据恢复案例

Oracle数据库数据恢复环境&故障： Oracle ASM磁盘组由4块磁盘组成。Oracle ASM磁盘组掉线 ，ASM实例不能mount。 Oracle数据库故障分析&恢复方案： 数据库数据恢复工程师对组成ASM磁盘组的磁盘进行分析。对ASM元数据进行分析发现ASM存储…...

编程日记 2024/10/29 20:01:30

jupyter notebook改变默认启动路径

安装好Anaconda 3以后，就可以使用Jupyter notebook了，但是我们打开Jupyter notebook后，发现界面是一个默认的目录，这个目录在哪里？如果想把自己写的程序文件保存在自己新建的一个文件夹里，修改默认目录到自…...

编程日记 2024/10/29 19:59:28

libevent源码剖析-基本数据结构

1 简介前面系列文章对libevent源码的主体结构，从reactor框架实现，到evbuffer和bufferevent实现原理，及libevent的例子进行了剖析，自此，我们便可基于libevent开发app了。从本文开始，主要来介绍下libevent源…...

编程日记 2024/10/29 19:58:26

往期文章汇总——射频测量+无线通信+软件无线电+6G科普

本节目录一、射频测量系列往期链接二、无线通信系列往期链接三、软件无线电系列往期链接四、6G科普系列往期链接本节内容一、射频测量系列往期链接射频测量 | 滤波器的关注指标射频测量 | 射频电路中的负载与滤波器射频测量 | 射频衰减器的功率系数射频测量 | 衰减…...

编程日记 2024/10/29 19:57:21

微信小程序 - 深 / 浅拷贝实现方法，微信小程序深拷贝与浅拷贝，函数方法封装直接调用使用，深拷贝cloneDeep和浅拷贝clone（深复制和浅复制）

前言在微信小程序中，你无法直接使用常规浏览器环境中的深浅拷贝方法。但可以借助 utils.js 实现，下面是方法。创建深浅拷贝函数依次打开小程序目录【utils】→【utils.js】，写入深拷贝函数并暴露出去。 // utils.js// 对象深拷贝函数 const deepClone = function(in…...

编程日记 2024/10/29 19:55:17

Log4Net配置详解及输出自定义消息类示例代码

1.简单使用实例 1.1 添加log4net.dll的引用。在NuGet程序包中搜索log4net并添加，此次我所用版本为2.0.17。如下图： 1.2 添加配置文件右键项目，添加新建项，搜索选择应用程序配置文件，命名为log4net.config&#xff0c…...

编程日记 2024/10/29 19:54:15

C++在实际项目中的应用第二节：C++与区块链

第五章：C在实际项目中的应用第二课：C与区块链区块链技术因其去中心化、不可篡改和透明性而受到广泛关注。在这门课程中，我们将深入探讨区块链的基本原理、智能合约的开发以及实际应用的案例分析，重点使用 C 作为实现语言&…...

编程日记 2024/10/29 19:52:12

浅记React面试丢人时刻

前提去面试了，技术面完一轮之后，突发的来了一次React的考察，哥们，猝不及防之下，脑袋直接清空，啥也想不起来了。现在想想，实属丢人，记录一下啥也没答出来的面试，钉在耻辱…...

编程日记 2024/10/29 19:50:07

Python入门：学会Python装饰器让你的代码如虎添翼！（Python如何不改动原有函数代码添加一些额外的功能）

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 什么是Python装饰器📝 如何编写Python装饰器📝 带参数的装饰器📝 Python装饰器的使用场景📝 注意事项📝 多装饰器的使用⚓️ 相关链接 ⚓️📖 介绍 📖 你是不是在写代码的时候，常常会想有没有…...

编程日记 2024/10/29 19:48:05

【C++】哈希冲突的解决办法：闭散列与开散列

哈希冲突解决上一篇博客提到了，哈希函数的优化可以减小哈希冲突发生的可能性，但无法完全避免。本文就来探讨一下解决哈希冲突的两种常见方法：闭散列和开散列 1.闭散列闭散列也叫开放定址法，发生哈希冲突时，如果哈…...

编程日记 2024/10/29 19:47:04

复刻系列-原神 5.1 版本先行展示页

复刻原神 5.1 版本先行展示页 0. 视频 BilBil站视频演示复刻-原神5.1版本先行展示页 1. 基本信息作者: 啊是特嗷桃系列: 复刻系列官方的网站: 《原神》官方网站-全新5.1版本「命定将焚的虹光」上线！复刻的网站: 《原神》复刻网站-全新5.1版本「命定将焚的虹光」…...

编程日记 2024/10/29 19:43:59

STM32 第3章如何用串口下载程序

时间：2024.10.28 一、学习内容 1、安装USB转串口驱动 1.1串口下载连接示意图 1、USB转串口模块在开发板上是一个独立的模块，可通过调帽与其他串口连接，USART1/2/3/4/5 2、只有USART1才具有串口下载的功能。 3、CH340是电平转换芯片，将电脑端输出的USB电平和单片机输…...

编程日记 2024/10/29 19:41:56

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/6/17 5:30:27

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/9/9 5:07:27

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2025/9/5 12:37:47

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南：从入门到实战一、Grunt 是什么？ Grunt是一个基于 Node.js 的前端自动化任务运行器，主要用于自动化执行项目开发中重复性高的任务，例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/9/6 5:46:56

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/9/2 17:48:09

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载四、智能指针…...

编程新知 2025/9/5 5:37:20

计算机基础知识解析：从应用到架构的全面拆解

目录前言 1、计算机的应用领域：无处不在的数字助手 2、计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...

编程新知 2025/9/1 22:59:56

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2025/9/7 8:46:59

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的，需要先安…...

编程新知 2025/9/11 15:59:36

HTML/CSS 面试题

什么是语义化 HTML？

盒子模型是什么？

如何创建响应式设计？

CSS 选择器的优先级是如何计算的？

什么是 Flexbox 和 Grid，主要区别是什么？

什么是 CSS 预处理器？为什么使用它？

CSS 动画和过渡的区别是什么？

如何使用媒体查询实现响应式布局？

如何优化网页的加载速度？

DOCTYPE 的作用是什么？

JavaScript 面试题

JavaScript 的基本数据类型有哪些？

什么是闭包？

解释原型链的概念。

JavaScript 中的 this 是什么？

解释 == 和 === 的区别。

什么是 Promise？如何使用？

什么是 async/await？

解释事件冒泡和事件捕获。

什么是节流（throttling）和防抖（debouncing）？

解释浅拷贝和深拷贝的区别。

Vue.js 面试题

Vue 的核心概念是什么？

什么是 Vue 实例的生命周期钩子？

如何在 Vue 中创建组件？

什么是双向数据绑定，如何实现？

Vue 的计算属性与方法的区别是什么？

Vue 中的指令是什么？

什么是 Vuex，如何使用？

如何在 Vue 中实现路由？

什么是 Vue 的过滤器，如何使用？

什么是服务端渲染（SSR），Vue 如何实现？

Vue 2 vs Vue 3 面试题

Vue 2 和 Vue 3 的响应式系统有什么区别？

Vue 3 引入的 Composition API 有什么优势？

在 Vue 3 中如何创建一个组件？

Vue 2 中的 $set 和 Vue 3 中的反应性系统如何处理新增属性？

如何处理 Vue 2 和 Vue 3 中的事件监听？

Vue 3 中的 Teleport 组件是什么？有什么用？

Vue 3 中的 v-model 有哪些变化？

Vue 3 引入的 Suspense 组件有什么用途？

Vue 3 中的 provide/inject 是如何工作的？

在 Vue 2 和 Vue 3 中如何处理错误捕获？