文章目录
- JS数组去重的几个方法
- 讲下es6新增symbol 数据类型
- v-model原理是什么
- vue响应式原理
- vue中的data 为什么是个函数？
- 前端有几种缓存方式
JS数组去重的几个方法
在JavaScript中，可以使用几种方法对数组进行去重：
- 使用Set：Set是ES6中引入的数据结构，它可以存储唯一值。我们可以将数组转换为Set，然后再将其转回数组，这样就实现了去重。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
- 使用filter()方法：可以使用数组的filter()方法筛选出唯一的元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
return self.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
- 使用reduce()方法：可以使用数组的reduce()方法来逐个比较元素并创建新的数组。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((prev, curr) => {
if (!prev.includes(curr)) {
prev.push(curr);
}
return prev;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
这些都是常见的数组去重方法，可以根据自己的需求选择合适的方法。
讲下es6新增symbol 数据类型
ES6中引入了一种新的原始数据类型，即Symbol（符号）。Symbol是一种唯一且不可变的数据类型，它可以用作对象属性的标识符。
创建Symbol对象可以使用全局Symbol函数，并且可以传递一个可选的描述参数。
以下是一些关于Symbol的特点和用法：
- Symbol的唯一性：每个通过Symbol函数创建的Symbol值都是唯一的，即使它们的描述相同。
const symbol1 = Symbol('foo');
const symbol2 = Symbol('foo');
console.log(symbol1 === symbol2); // false
- Symbol作为属性标识符：可以将Symbol作为对象属性名来避免命名冲突。
const obj = {
[Symbol('name')]: 'Alice',
[Symbol('name')]: 'Bob'
};
console.log(obj); // {Symbol(name): 'Alice', Symbol(name): 'Bob'}
- 遍历Symbol属性：使用Object.getOwnPropertySymbols()方法可以获取对象中的所有Symbol属性。
const obj = {
[Symbol('name')]: 'Alice',
[Symbol('age')]: 25,
gender: 'female'
};
const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // [Symbol(name), Symbol(age)]
- 使用内置的Symbol值：ES6提供了一些内置的Symbol值，用于表示特殊行为或元信息。例如，Symbol.iterator表示对象是否可迭代，Symbol.hasInstance表示对象是否为某个构造器的实例等。
const arr = [1, 2, 3];
console.log(arr[Symbol.iterator]); // function values() { ... }
const obj = {};
console.log(obj[Symbol.hasInstance]); // function [Symbol.hasInstance](value) { ... }
Symbol是一种非常有用的数据类型，它可以用于创建唯一的属性名、避免命名冲突，并且可以与其他数据类型一起使用。
v-model原理是什么
v-model是Vue.js框架中的一个指令，用于实现表单元素与数据双向绑定。当使用v-model指令时，它会在表单元素上创建一个属性绑定，将表单元素的值与指定的数据属性进行双向绑定。
下面是v-model的原理：
-
根据指令的参数（通常是一个变量），Vue会将一个
value属性和一个input事件添加到与指令绑定的表单元素上。 -
当表单元素的值发生变化时，会触发
input事件。 -
当
input事件被触发时，Vue会通过该事件获取到最新的值，并将其赋值给指定的数据属性。 -
同时，Vue还会在绑定的表单元素上设置初始值，将数据属性的值反映到表单元素上。
-
当数据属性的值改变时，由于双向绑定的机制，表单元素的值也会自动更新。
通过以上步骤，v-model指令实现了表单元素与指定数据属性之间的双向绑定，使得数据的更新能够立即反映到用户界面，同时用户界面上的变化也能同步更新到数据模型中。
需要注意的是，v-model指令并非只适用于表单输入元素（如input、select、textarea），还可以用于自定义组件中，但前提是该组件要实现对应的value属性和input事件。
总结而言，通过v-model指令，Vue.js框架能够简化表单元素与数据绑定的操作，提高开发效率。
vue响应式原理
Vue.js的响应式原理是通过使用JavaScript的Object.defineProperty方法来劫持对象的属性访问，从而实现数据的变化检测和视图更新。
以下是Vue.js的响应式原理的核心步骤：
-
数据初始化：在Vue实例的创建过程中，Vue会对
data属性中的每个属性进行遍历，并使用Object.defineProperty将其转换为“响应式”的属性。 -
对象属性劫持：对于每个属性，Vue会为其创建一个监听器Dep（依赖），用来收集订阅该属性变化的Watcher（观察者）。
- 当代码访问该属性时，会触发监听器Dep的
depend方法，用来收集依赖该属性的Watcher。 - 当属性发生变化时，会触发监听器Dep的
notify方法，通知所有依赖该属性的Watcher进行更新。
- 当代码访问该属性时，会触发监听器Dep的
-
视图渲染：Vue通过模板编译将模板转换为Render函数，并生成虚拟DOM树（VNode）。当数据发生变化时，Watcher会触发重新渲染视图的操作。
-
数据劫持：当触发数据的
set操作时，Vue会通过监听器Dep的notify方法通知所有依赖该属性的Watcher进行更新。 -
视图更新：Watcher接收到通知后，会调用对应的更新函数，在更新函数中重新生成虚拟DOM树，并通过比对算法（Diff算法）找出变化的部分，然后将变化的部分进行更新。
通过以上步骤，Vue.js实现了数据与视图之间的双向绑定和自动更新。当数据发生变化时，自动触发视图的更新，当视图中的交互操作改变了数据时，也会同步更新到数据源。这让开发者能够以更直观、简洁的方式编写代码，并提升了开发效率。
vue中的data 为什么是个函数？
在Vue中，data选项可以是一个函数或一个对象。通常情况下，推荐将data定义为一个函数。
data被定义为一个函数的主要原因是为了保证每个组件实例都能拥有独立的数据副本，而不是共享同一个数据引用。当data选项是一个对象时，所有组件实例会共享同一个data对象，这可能导致状态的交叉污染和数据共享问题。
将data定义为一个函数可以解决这个问题，每次创建组件实例时，Vue会调用该函数来获取真实的数据对象，确保每个组件实例都拥有独立的数据副本。这样做的好处是，每个组件实例的数据都是相互隔离的，互不影响。
示例：
data() {
return {
message: 'Hello Vue!'
};
}
通过将data定义为函数，每个组件实例引用的都是一个全新的数据对象，确保了数据的独立性和封装性。
总结而言，将data定义为函数的作用是为了确保每个组件实例拥有独立的数据，避免状态污染和数据共享问题，提高了组件的可复用性和封装性。
前端有几种缓存方式
在前端开发中，常见的几种缓存方式有以下几种：
-
浏览器缓存：浏览器缓存是指浏览器在加载网页时将一些资源（如CSS、JavaScript、图片等）保存到本地磁盘中，下次再加载同样的资源时可以直接使用本地缓存而不需要重新下载。可以通过设置响应头中的
Cache-Control、Expires等字段来控制浏览器缓存的策略。 -
HTTP 缓存：HTTP 缓存是通过在网络请求和响应的过程中添加特定的头部字段来实现的。常见的 HTTP 缓存头部字段有
ETag、If-None-Match、Last-Modified、If-Modified-Since等。通过合理设置这些头部字段，可以使浏览器和服务器之间进行缓存控制，从而减少重复请求和数据传输。 -
Service Worker 缓存：Service Worker 是运行在浏览器后台的脚本，可以拦截和处理网络请求。通过使用 Service Worker，可以实现离线缓存和自定义缓存策略。开发者可以通过在 Service Worker 中缓存需要的资源，使得在离线状态下仍然能够访问网页内容。
-
Web Storage：Web Storage 是 HTML5 提供的一种浏览器缓存方式，包括了 localStorage 和 sessionStorage 两种机制。localStorage 可以用来存储大量的数据，并且会一直保存在客户端，除非主动清除或者过期。sessionStorage 只在当前会话（浏览器标签页）中有效，关闭标签页后数据会被清除。
-
内存缓存：内存缓存通常是指将数据存储在内存中，例如在 JavaScript 中使用变量、对象、数组等来保存数据，这样能够快速读取和操作数据，但页面刷新或关闭后缓存数据会被清除。
需要根据具体的需求和场景选择适合的缓存策略，以提高用户体验和性能。不同的缓存方式可以相互结合使用，共同发挥作用。
