前端面试题

一、Vue

1. Vue.js中的mixins有何作用？如何使用?

1. mixins可复用，可以在多个组件之间共享代码。mixins 提供了一种将公共逻辑抽象到可复用模块的方式，从而避免代码重复，并提高代码的可维护性和可复用性。
2. 使用 mixins 的主要目的是将一组功能逻辑抽象出来，然后在需要这些功能的组件中引入并使用。它们类似于组件之间的共享代码库。
3. 需要注意的是，当 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. 浅拷贝

1. 会改变原对象
2. 只发生了值拷贝，指针指向了同一个地址

• 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. 深拷贝

1. 不会改变原对象
2. 开辟一个新的栈，两个对象的属性完全相同，但是对应两个不同的地址，不会改变另一个对象的属性
3. 新对象跟原对象不共享内存

• ._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