混合知识点

基本组件定义

<script setup lang="ts">
import message_info from './message_info.svg';
const props = defineProps({
visible: {
type: Boolean
},
confirmTitle: {
type: String,
default: '确定'
},
modalWidth: {
type: String,
default: '34rem'
}
});

const emit = defineEmits(['onClose', 'onConfirm']);

const handleClose = () => {
emit('onClose');
};

const handleConfirm = () => {
emit('onConfirm');
};
</script>

 

JavaScript面试题通常涵盖基础知识、编程技巧、数据结构、算法、以及JavaScript的高级特性等方面。
以下是一些常见的面试题及其答案：

原型和原型链：解释原型的概念，以及原型链是如何帮助实现继承的。
原型是JavaScript中实现继承的主要机制，
每个对象都会在其内部初始化时关联另一个对象，这个对象被称为原型。
通过原型，对象可以共享属性和方法，形成原型链。
继承：JavaScript中的继承可以通过原型链、构造函数、ES6的类等方式实现。

解释这些继承方式的原理及其优缺点。

new操作符：解释new操作符在JavaScript中做了什么。

new操作符创建一个用户定义的对象，并执行构造函数的代码，
同时设置对象内部的[[Prototype]]（即__proto__）指向构造函数的prototype对象。

改变this指向的方法：JavaScript中可以通过call、apply、bind等方法改变函数的this指向。
这些方法允许开发者在函数调用时动态地设置函数内部this的值。

闭包：闭包是JavaScript中的一个重要概念，它允许函数在其词法环境外部被调用时，仍然能够访问其外部词法环境中的变量。
闭包在JavaScript中有很多应用，如实现回调函数、模块封装等。

垃圾回收机制：解释JavaScript中的垃圾回收机制，包括如何通过引用计数和标记清除算法来管理内存。
异步编程：讨论JavaScript中的异步编程模型，包括回调函数、Promises、async/await等，并解释它们如何帮助处理异步操作。
数据类型和变量：讨论JavaScript中的数据类型（基本类型和引用类型），以及它们在内存中的存储方式。

深拷贝与浅拷贝：解释深拷贝和浅拷贝的概念，以及它们在实际编程中的应用和区别。
事件循环和异步操作：描述JavaScript的事件循环机制，以及它是如何处理异步操作的。

es6的新特性有：
1、块级作用域，可以在块级作用域中声明变量
2、箭头函数，一种新的函数声明方式
3、解构赋值，一种从数组或对象中提取值并赋值给变量的语；
4、默认参数，允许在函数定义时为参数提供默认值；
5、扩展运算符，可以将数组或对象展开，提取出其中的元素；
6、模板字符串；
7、类和模块；
8、迭代器和生成器；
9、promise对象；
10、模块化导入和导出等等

1. 块级作用域：ES6引入了let和const关键字，可以在块级作用域中声明变量。
使用let声明的变量只在当前作用域内有效，避免了变量提升和全局命名冲突的问题。
而使用const声明的常量是一个只读变量，一旦被赋值，就不能再改变。

2. 箭头函数：箭头函数是ES6中的一种新的函数声明方式，使用箭头（=>）取代了传统的function关键字。
箭头函数具有更简洁的语法，并且自动绑定了上下文，解决了回调函数中this指向问题。

3. 解构赋值：解构赋值是一种从数组或对象中提取值并赋值给变量的语法。在ES6中
可以使用解构赋值语法快速获取数组或对象中的元素，简化了代码编写和数据交换。

4. 默认参数：ES6引入了函数的默认参数，允许在函数定义时为参数提供默认值。
如果调用时未传递参数，将使用默认值。这样可以简化函数的使用，并且可以传递部分参数，而不是全部参数。

5. 扩展运算符：扩展运算符可以将数组或对象展开，提取出其中的元素。在函数调用或数组和对象字面量中，
使用...语法可以将数组或对象展开成独立的元素，或将多个元素合并成数组或对象。

6. 模板字符串：模板字符串是一种更方便的字符串拼接方式，使用反引号（`）定义字符串，并可以在其中插入变量和表达式，
提高了代码的可读性和可维护性。

7. 类和模块：ES6引入了类（class）的语法糖，使得面向对象编程更加简洁和易用。类可以通过extends关键字实现继承，
使用super关键字调用父类的方法。此外，ES6还引入了模块化的概念，通过import和export关键字可以方便地导入和导出模块。

8. 迭代器和生成器：ES6中引入了迭代器和生成器的概念，可以简化处理集合和异步编程的复杂度。迭代器是一个包含next()方法的对象，
可以按照定义的顺序逐个返回值。而生成器是一种特殊的函数，可以通过yield关键字将状态保存下来，并在需要的时候恢复执行。

9. Promise对象：Promise是异步编程的一种解决方案，可以避免回调地狱和提供更好的错误处理。
Promise对象可以表示一个异步操作的最终完成或失败，并能够链式调用和处理多个异步操作。

10. 模块化导入和导出：ES6中的模块化语法可以更好地组织和管理代码，提供了import和export关键字，
以及export default关键字来导入和导出模块。

1. 箭头函数（Arrow Functions）：箭头函数是一种更简洁的函数声明方式，它使用箭头（=>）来定义函数，并且自动绑定了上下文（this）。
2. 模块化（Modules）：ES6引入了模块化系统，允许开发者将代码分割成多个独立的模块，以便更好地组织和管理代码。
3. 解构赋值（Destructuring Assignment）：解构赋值允许你从数组或对象中提取值，并将其分配给变量，这有助于简化代码和提高可读性。
4. 类和继承（Classes and Inheritance）：ES6引入了类的概念，让面向对象编程更容易，并支持类之间的继承关系。
5. 模板字符串（Template Strings）：模板字符串允许你在字符串中插入表达式，而不需要复杂的字符串连接操作，
提高了字符串的可读性和可维护性。
6. Promise：Promise是一种处理异步操作的方式，它提供了更好的控制流和错误处理机制，用于处理回调地狱问题。
7. const 和 let：ES6引入了const和let关键字，用于声明变量，const用于声明常量，而let用于声明块级作用域变量，
改善了变量的作用域控制。
8. 默认参数（Default Parameters）：ES6允许你在函数声明中为参数设置默认值，这样在调用函数时可以省略某些参数，而不会导致错误。
9. 块级作用域（Block Scope）：引入let和const关键字，允许在块级作用域中声明变量，使得变量的作用范围更加清晰和可控。

顺丰面试题：
JavaScript基础：‌考察对JavaScript语言本身的掌握程度，‌包括变量作用域、‌闭包、‌原型链、‌事件处理等概念。‌
DOM操作：‌测试对DOM操作的理解，‌如如何修改页面元素、‌事件监听器的添加与移除、‌以及如何使用JavaScript来动态改变页面内容。‌
Vue.js框架：
‌由于Vue.js在现代前端开发中的广泛应用，‌顺丰前端面试可能会涉及到Vue.js的生命周期、‌组件通信、‌状态管理等方面的知识。‌
前端性能优化：‌考察对前端性能优化的理解，‌如代码分割、‌懒加载、‌缓存策略等。‌
数据结构和算法：‌可能会涉及到一些基本的数据结构和算法问题，‌如数组、‌链表、‌栈、‌队列等的使用，‌以及常见的排序和搜索算法。‌

面试题实例：‌
Call 和 Apply, bind 的区别？‌ 这些问题旨在测试对JavaScript中函数调用和this上下文的理解。‌
Vue 生命周期的理解？‌ 考察对Vue.js框架中组件生命周期的理解，‌包括各个生命周期钩子的作用和执行时机。
‌
编程题：‌可能会给定一个具体的编程问题，‌要求编写代码实现特定的功能，‌以此来测试应聘者的编程能力和问题解决能力。‌

系统设计和架构：‌对于有经验的应聘者，‌可能会被问及过去项目中前端系统的设计和架构经验，‌
以及如何处理大规模或高并发的场景

 

HTML5有哪些更新

1. 语义化标签
header：定义文档的页眉（头部）
nav：定义导航链接的部分
footer：定义文档或节的页脚（底部）
article：定义文章内容
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容（侧边）
2. 媒体标签
（1） audio：音频

<audio src='' controls autoplay loop='true'></audio>
属性：

controls 控制面板
autoplay 自动播放
loop=‘true’ 循环播放
（2）video视频

<video src='' poster='imgs/aa.jpg' controls></video>
属性：

poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
controls 控制面板
width
height
（3）source标签

因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

<video>
<source src='aa.flv' type='video/flv'></source>
<source src='aa.mp4' type='video/mp4'></source>
</video>
3. 表单
表单类型：

email ：能够验证当前输入的邮箱地址是否合法
url ： 验证URL
number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
color ： 提供了一个颜色拾取器
time ： 时分秒
date ： 日期选择年月日
datatime ： 时间和日期(目前只有Safari支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件
表单属性：

placeholder ：提示信息
autofocus ：自动获取焦点
autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
表单必须提交过
必须有name属性。
required：要求输入框不能为空，必须有值才能够提交。
pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
multiple：可以选择多个文件或者多个邮箱
form=" form表单的ID"
表单事件：

oninput 每当input里的输入框内容发生变化都会触发此事件。
oninvalid 当验证不通过时触发此事件。
4. 进度条、度量器
progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少
meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
high/low：规定被视作高/低的范围
max/min：规定最大/小值
value：规定当前度量值
设置规则：min < low < high < max

5.DOM查询操作
document.querySelector()
document.querySelectorAll()
它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储
HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
7. 其他
拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：
<img draggable="true" />
画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
地理定位：Geolocation（地理定位）用于定位用户的位置。‘
总结：

（1）新增语义化标签：nav、header、footer、aside、section、article

（2）音频、视频标签：audio、video

（3）数据存储：localStorage、sessionStorage

（4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

（5）input标签新增属性：placeholder、autocomplete、autofocus、required

（6）history API：go、forward、back、pushstate

移除的元素有：

纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes

原文链接：https://blog.csdn.net/2301_79577017/article/details/139993787

在Vue中，可以通过全局Vue.directive()方法或在组件内通过directives选项来自定义指令。

全局自定义指令示例

Vue.directive('my-directive', {
// 钩子函数
bind(el, binding, vnode, oldVnode) {
// 指令绑定到元素上时调用
},
inserted(el, binding, vnode, oldVnode) {
// 被绑定元素插入父节点时调用 binding可以获取指令的属性值

},
update(el, binding, vnode, oldVnode) {
// 被绑定于元素所在的模板更新时调用
},
componentUpdated(el, binding, vnode, oldVnode) {
// 被绑定元素所在模板完成一次更新周期时调用
},
unbind(el, binding, vnode, oldVnode) {
// 指令与元素解绑时调用
}
});

JS数组常用的方法总结20种

1、join(): 数组转字符串

2、push() 和 pop(): 数组尾部添加/移除一项

3、shift() 和 unshift(): 数组头部移除/添加一项

4、reverse(): 数组数据反转

5、sort() : 数组内的数据进行排序(默认为升序)

6、slice() : 截取指定位置的数组

7、splice() : 向数组中添加，或从数组删除，或替换数组中的元素

8、toString() : 将数组转换成字符串

9、indexOf() : 查询在数组中指定的数据返回该数据的索引

10、forEach() : 遍历数组

11、map() : 同forEach功能，遍历数组

12、filter(): 过滤

13、find() ： 数组循环

14、findIndex() : 数组循环

15、every() : 判断数组中每一项是否都满足条件

16、some(): 判断数组中是否存在满足条件的项

17、reduce() : 逐个遍历迭代数组的所有项，然后构建一个最终返回的值

18、concat() : 用于连接两个或多个数组