前端面试题打卡(持续更新)
文章目录
-
- 1.面向对象与面向过程编程有什么不一样
- 2.数组扁平化处理
- 3.手写深拷贝
- 4.防抖和节流函数
- 5.手写一个new
- 6.JS中的继承
-
- 方案一：原型继承
1.面向对象与面向过程编程有什么不一样
面向过程(c语言)：就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。
优点：
1. 流程化使得编程任务明确，在开发之前基本考虑了实现方式和最终结果，具体步骤清楚，便于节点分析。
2. 效率高，面向过程强调代码的短小精悍，善于结合数据结构来开发高效率的程序。
缺点：
1.代码重用性低，扩展能力差，后期维护难度比较大。
面向对象(python,java)：是把构成问题事务分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。
优点:
1. 结构清晰，程序是模块化和结构化，更加符合人类的思维方式；。
2. 易扩展，代码重用率高，可继承，可覆盖，可以设计出低耦合的系统。
3. 易维护，系统低耦合的特点有利于减少程序的后期维护工作量。
缺点：
1. 开销大，当要修改对象内部时，对象的属性不允许外部直接存取，所以要增加许多没有其他意义、只负责读或写的行为。这会为编程工作增加负担，增加运行开销，并且使程序显得臃肿。
2. 性能低，由于面向更高的逻辑抽象层，使得面向对象在实现的时候，不得不做出性能上面的牺牲，计算时间和空间存储大小都开销很大。
2.数组扁平化处理
let arr = [1, 1, 2, [3, 2, 4], [1, 2], [1, 2, 3, 4, 5, 6]];
//第一种方法 使用flat
console.log(arr.flat())
//第二种递归
const fn = arr => {
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
fn(arr[i]);
} else {
newArr.push(arr[i]);
}
}
}
//第三种方法 reduce
Array.prototype.flatten = function () {
return this.reduce(function (prev, cur, curIndex, arr) {
return Array.isArray(cur) ? prev.concat(cur.flatten()) : prev.concat(cur);
}, []);
}
3.手写深拷贝
function deepClone(obj) {
// 传入的参数不是期望值
if (typeof obj !== "object" || obj == null) {
return obj
}
//单独处理 时间类型和 正则类型
if (obj instanceof Date) {
return Date(obj)
}
if (obj instanceof RegExp) {
return RegExp(obj)
}
// 1 初始化一个结果对象
let result
// 处理结果对象
if (obj instanceof Array) {
result = [];
} else {
result = {
}
}
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = deepClone(obj[key]);
}
}
// 返回一个结果
return result
}
4.防抖和节流函数
//防抖函数
function debounce(fn, delay) {
//通过闭包的方式将timer存到内存中
var timer = null;
//1.删除定时器 2.初始化新的定时器
return function () {
clearTimeout(timer)
timer = setTimeout(function () {
fn.call(this)
}, delay)
}
}
function a() {
console.log('hello')
}
var b = debounce(a, 1000)
for (let i = 0; i < 10; i++) {
b();
}
//节流函数（方法,延迟）
function thro(fn,delay){
//通过闭包的方式将最后一次执行的时间存到内存中
var lastTime = 0
return function(){
var nowTime = new Date().getTime()
//判断当前时间减去上一次时间是否大于延迟 true->执行fn
//给latstime 重新赋值
if(nowTime - lastTime > delay){
//这里要注意一下this的指向问题
fn.call(this)
lastTime = nowTime
}
}
}
function a() {
console.log('hello')
}
var b = thro(a, 1000)
for (let i = 0; i < 10; i++) {
b();
}
5.手写一个new
function myNew(fn, ...args) {
// 1.创建一个新对象
let obj = {
};
// 2.关联原型
obj.__proto__ = fn.prototype;
// 3.改变this指向
let result = fn.apply(obj, args);
//4.如果这个函数有返回值，则返回；否则，就会默认返回新对象
return result instanceof Object ? result : obj;
}
function father(name, age) {
this.name = name;
this.age = age;
}
father.prototype.say = function () {
console.log(this.age)
}
let child = myNew(father, '章三', 12)
child.say()
6.JS中的继承
方案一：原型继承
原型继承(让父类中的属性和放在子类实例的原型链上)
过程：就两步
- 将子类的原型 指向父类的实例上: CHILD.prototype = new PARENT()
- 为了保证原型重定向后的完整性:CHILD.prototype.constructor = CHILD
特点：
- 其他语言的继承一般都是拷贝继承，但是原型继承的原理就是把父类的原型放到子类的原型链上，实例调取父类的方法都是通过__proto__原型链查找机制完成的（不是拷贝是直接查找）。
- 子类可以重写父类的方法(会导致父类其他的子类的实例也受到影响)。
- 父类中私有或者共有的属性方法最后都变成了子类中的共有的属性方法。
一句话就是：由于原型继承是通过把父类的原型放到子类的原型链上实现的，所以会导致父类的其他子类的实例也会受到影响，父类中私有或者共有的属性方法最后都变成了子类中的共有的属性方法。
// tips2 继承:子类继承父类中的属性和方法 (目的是让子类的实例调取父类中的方法)
function A(x) {
this.x = x;
}
A.prototype.getX = function() {
console.log(this.x)
}
function B(y) {
this.y = y;
}
// 将B的原型 指向A的实例上 实现让B的实例调用A中的方法
B.prototype = new A(200)
B.prototype.getY = function() {
console.log(this.y)
}
// 为了保证原型重定向后的完整性
B.prototype.constructor = B;
let b1 = new B(100)
b1.getX() //200
b1.getY() //100