2022.11.22 面试记录

1.打印结果

for(var i = 0;i < 10 ;i++){
	setTimeout(()=>{
		console.log(i)
	},i*100)
}

for(var i = 0; i < 10; i++) {
	var j = i;
	setTimeout(()=>{
		console.log(j)
	},i*100)
}

解答

// 使用函数参数按值传递的特点
for(var i = 0;i < 10 ;i++){
	(function(j) {
		setTimeout(()=>{
			console.log(j)
		},i*100)
	})(i)
}

// 使用函数参数按值传递的特点
for(var i = 0;i < 10 ;i++){
	setTimeout((j)=>{
		console.log(j)
	}
	,i*100
	,i)
}

// 使用 let 构建块级作用域
for(let i = 0;i < 10 ;i++){
	setTimeout(()=>{
		console.log(i)
	},i*100)
}

反思

2. this 问题

class Foo {
	zoo = 100;
	bar() {
		setTimeout(this.baz)
	}
	baz() {
		console.log(this.zoo)
	}
}

new Foo().bar();

解答

反思

3. CSS 优先级

4. 如何覆盖子组件样式

1. 传递 style 属性

2. 传递 className 属性

3. 组件属性定义在一个 @layer 中，外部在全局写一个新的 @layer 覆盖，这样写比直接在全局写的好处是不会污染其他的组件，但是坏处写组件时也要按 @layer 规则来书写。

5. render 方法在什么时候会执行

解答

1. 组件初次渲染时

2. 组件内部 state 发生变化时

3. 父组件 render() 方法执行时

4. 主动执行 froceUpdate() 方法

反思

6. React 避免重复渲染的方法

1. React.pureComponent ，这个组件内部实现了 componentShouldUpdate() 生命周期，会对组件的 props 和 state 进行浅比较。

2. React.memo 高阶组件，这个组件返回一个新的组件，会对组件的 props 进行浅比较。

3. componentShouldUpdate() 生命周期，手动比较 props 和 state 的变化，如果返回false，则会跳过组件 render 方法。

4. React.useMemo 钩子，在钩子的回调中返回一个组件，并传递依赖项。

5. React.useCallback 钩子，如果子组件的 props 只传递了 props，那么使用 React.useCallback 缓存会减少重复渲染。另外使用 React.memo 时也需要配合 React.useCallback 来使用。

6. Redux 的 dispatch ，当子组件只调用方法时，可以将方法抽离到 dispatch 中，只传递 dispatch 方法，这个方法不会更新。

反思

7. 动画的属性，写一个 App 删除队列动画

解答

// 定义动画
@keyframe animate {
	// 定义关键帧
	0% {
	}
	100 % {
	}
}

.box {
	animation: 3s ease-in 1s 2 reverse both paused animate;
	// 时间 时间函数 延迟 执行次数 方向 执行前和执行后的显示方法 动画运行状态 动画名
}

1. 删除前拿到所有后面兄弟元素的位置，然后计算他们的目标位置。

2. 使用 JS 操作给他们加上 transform 属性移动他们的位置。

3. 移动过程中为删除元素执行删除动画，但是并没有真的删除。

4. 删除和移动动画执行完毕时，删除元素。

5. 这里考虑到优化，动画的连续执行应使用 requestAnimationFrame 来合并关键帧上的 Dom 操作。

8. async 和 await 相关

解答

反思

9. 手写深拷贝

解答

function getType(obj) {
	return Object.prototype.toString.call(obj).slice(8, -1);
}

function cloneDeep(obj) {
	let result;
	const type = getType(obj);

	if (type === "Object") {
		result = {};
	} else if (type === "Array") {
		result = [];
	} else {
		return obj;
	}

	for (let k in obj) {
		if(getType(obj[k]) === 'Object' || getType(obj[k]) === 'Array') {
			result[k] = cloneDeep(obj[k]);
		}
		result[k] = obj[k];
	}

	return result;
}

反思

总结