一、Vue
1. Vue.js中的mixins有何作用?如何使用?
mixins
可复用,可以在多个组件之间共享代码。mixins
提供了一种将公共逻辑抽象到可复用模块的方式,从而避免代码重复,并提高代码的可维护性和可复用性。- 使用
mixins
的主要目的是将一组功能逻辑抽象出来,然后在需要这些功能的组件中引入并使用。它们类似于组件之间的共享代码库。- 需要注意的是,当
mixin
和组件中存在同名选项时,组件选项会覆盖mixin
中的选项。如果出现命名冲突,可以通过钩子函数进行处理,或者在组件中使用 $options 访问mixin
中的选项。
使用:
// exampleMixin.js
export const exampleMixin = {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
// 在需要使用这些功能的组件中引入 mixin,并在组件的 mixins 属性中使用它
import { exampleMixin } from './exampleMixin';
export default {
mixins: [exampleMixin],
// 组件的其他选项
};
二、JS
1.js数据类型有哪些
有八种数据类型,分别是Undefined、Null、Boolean、Number、Object、String、Symbol、BigInt。其中Symbol和BigInt是ES6中新增的
这些数据可以分为原始数据类型:String、Number、Boolean、Null、Undefined、Symbol和引用数据类型:Object、Array、Function
三、手写代码
1. 防抖
用户在一段时间频繁点击某事件,每点击一次,定时器都会被重置,比如游戏中点回城
function debounce(fn,delay){
let timer = null
return function(...args){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=>{
fn.apply(this,args)
},delay)
}
}
2. 节流
用户在一段时间频繁点击某事件,每次点击不会影响定时器,比如游戏中的技能冷却
function throttle(fn,delay){
let start = 0
return funciton(...args){
const now = Date.now()
if(now - start > delay){
start = now
fn.apply(this,args)
}
}
}
3. 浅拷贝
- 会改变原对象
- 只发生了值拷贝,指针指向了同一个地址
- Object.assign
- Array.prototype.slice()
- Array.prototype.concat()
function shallowClone (obj){
if(!obj || typeof obj !=='object') return obj
const newObj = Array.isArray(obj) ? [] :{}
for(let i of Object.keys(obj)){
newObj[i] = obj[i]
}
return newObj
}
4. 深拷贝
- 不会改变原对象
- 开辟一个新的栈,两个对象的属性完全相同,但是对应两个不同的地址,不会改变另一个对象的属性
- 新对象跟原对象不共享内存
- ._cloneDeep()
- JQuery.extend()
- JSON.parse(JSON.stringify())
//递归实现
function deepClone(obj){
if(typeOf obj !== 'object' || obj === null) return obj
const newObj = Array.isArray(obj)?[]:{}
for(let i of Object.keys(obj){
newObj[i] = deepClone(obj[i])
}
return newObj
}
//weakMap实现
//确保在深拷贝过程中不会因为循环引用而导致内存泄漏
function deepClone(obj,weakMap = new weakMap()){
if(typeOf obj !== 'object' || obj === null) return obj
if(weakMap.has(obj)) return weakMap.get(obj)
let result = Array.isArray(obj) ? [] : {}
weakMap.set(obj,result)
for(let i in obj){
if(obj.hasOwnProperty(i)){
result[i] = deepClone(obj[i],weakMap)
}
}
return result
}
let newObject = {
name: 'shuaige',
age: 12,
boo: true,
n: null,
un: undefined,
sy: Symbol('xx'),
big: 10n,
child: {
ele: 'boby',
x: 100
},
arr: [1, 2, 3],
reg: /^\d+$/,
fn: function () {
console.log(this.name);
},
time: new Date(),
err: new Error()
}
deepClone(newObject)
5. flat
创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中
Array.prototype.flat = function (depth=1){
let result = []
function flatten(array,currentDepth){
array.forEach(item=>{
if(Array.isArray(item) && currentDepth < depth){
flatten(item,currentDepth + 1)
}else{
result.push(item)
}
})
}
flatten(this,0)
return result
}
[1,2,[3,4,[5,6]]].flat(2)
//[1,2,3,4,5,6]
6. reduce
用于将数组的所有元素累积到一个单一的值中
Array.prototype.reduce = function(callback,initial){
if(this.length === 0 && !initial) throw new TypeError("Reduce of empty array with no initial value")
let acc = initial !== undefined ? initial : this[0]
let startIndex = initial !== undefined ? 0 : 1
for(let i = startIndex; i < this.length; i++){
acc = callback(acc,this[i],i,this)
}
return acc
}
//用例:
const numbers =[{ x: 1 }, { x: 2 }, { x: 3 }];
// 求对象数组中值的总和
const sum = objects.reduce(
(accumulator, currentValue) => accumulator + currentValue.x,
0,
);;
console.log(sum); //6