前端知识点总结
基础类:
1、数据类型的转换和比较。 (+2) 数据类型转换
+true; //1 ,一元加号会尝试将 boolean 类型转换为数字类型。 true 被转换为 1 , false 被转换为 0 。
!"Lydia"; //false
1、函数传参
对象类型是引用传递
function person(per){
per.name = 'haha';
per.age = 3;
console.log(per)
}
person({name:"www", age: 2})
// {name: "haha", age: 3}
2、Object.is()和==,===的区别
Object.is方法在===的基础上增加了NaN和NaN是相等的;+0和-0是不相等的
延伸:== 隐式转换 规则; 运算符的优先级 ; (+1)
+0 === -0 //true
+0 === -'0' //true
+1 === -'1' //false
Object.is(+0, -0) //false
2、闭包题。 https://segmentfault.com/a/11...
3、事件委托。 https://segmentfault.com/a/11...
3、http协议状态码,301和302的区别,304缓存类型,强缓存和协商缓存的区别。
常见的状态码有200,301,302,304,400,404,401,500,502
其中以2开头的代表请求成功,
以3开头的是重定向,其中301是永久重定向,302是临时重定向,
强缓存和协商缓存[缓存](https://mp.weixin.qq.com/s/dnEbgNnu7rL9i2V_Zjjnyw)**(+3)**
4、js运行机制。 js运行机制 (+2)
5、es6用过哪些。promise的实现原理(+1),all方法(+2)。
Promise.all = function(arr){
let result = [], count = 0;
return new Promise(function(resolve, reject){
for(let item of arr){
item.then(res=>{
result[count] = res;
count++;
if(count === arr.length){
resolve(result);
}
})
};
});
};
let promise1 = new Promise(function(resolve) {
resolve(1);
});
let promise2 = new Promise(function(resolve) {
resolve(2);
});
let promise3 = new Promise(function(resolve) {
resolve(3);
});
let promiseAll = Promise.all([promise1, promise2, promise3]);
promiseAll.then(function(res) {
console.log(res);
});
Promise.all = function(arr){
let result = [], count = 0;
return new Promise(function(resolve, reject){
arr.map(item=>{
item.then(res=>{
result[count] = res;
count++;
(count === arr.length) && resolve(result);
}).catch(err=>{
result[count] = err;
count++;
(count === arr.length) && resolve(result);
});
});
});
};
var p1 = new Promise(function(resolve, reject){reject(1)})
var p2 = new Promise(function(resolve, reject){resolve(2)})
Promise.all([p1, p2]).then(res=>{
console.log(res)
})
let,const,var声明变量的作用域不同;变量提升;(+1)
变量的赋值可以分为三个阶段:
1、创建变量,在内存中开辟空间
2、初始化变量,将变量初始化为undefined(let和const声明的初始化时不会分配内存,所以会存在暂时性死区)
3、真正赋值
let,const,var的区别 (+1)
作用域概念不同; 变量提升(+1)
es6数组常用的api (+1)
set,map,剪头函数和普通函数的区别 (+1)
map遍历相对于其他遍历方式的优点 (+1)
class
模板字符串:标签模板
await和async的使用 (+1)
promise.all的实现 (+2)
6、isNaN和Number.isNaN的 区别 。
isNaN会有一个转换,能够转换为数字类型的都返回false,
Number.isNaN是严格判断是否为NaN
6、数组的flat扁平化方法。
返回一个新数组对原数组没有影响,默认扁平化一级
6、正则(获取url参数等)。
7、纯函数 (+1)
7、数据类型的判断 (+1)
7、instanceof的实现原理 (+1)
7、手写new的实现 (+2)
7、手写call和apply的实现(+1)
7、defer和async的区别 (+1)
7、js监听对象属性的改变具体是怎么实现的,它们各自有什么特点? (+1)
7、移动端适配;sass,less的优点;移动端几倍图是根据什么来定义的 (+1)
7、css布局,flex布局方式 (+1)
7、实现正方形 (+2)
7、五种以上居中方式 居中 (+1)
7、浏览器如何解析css选择器
7、css样式冲突的解决方案,scoped的实现原理
7、css选择器的优先级(+1)
框架应用类:
1、 防抖节流 ; (+3)
防抖可应用于阻止重复发送请求,一段时间内重复触发的话则会重新计算时间,只会执行最后一次;
节流是只认第一次的操作,在某一时间段内不管触发多少次,只执行第一次函数的回调;
2、vue双向数据绑定的实现。(+2)
defineProperty——>
2、computed和watch的区别。(+2)
3、vue中key的作用是什么? (+2)
——>diff算法——>重绘和回流(重排)
重绘回流(+1)
3、vue生命周期 (+1)
3、webpack相关。
优化(配置优化,代码优化) (+2)
webpack热更新原理 (+1)
chunk和baundle的区别 (+1)
压缩插件的弊端 (+1)
4、axios和ajax的区别,fetch的区别,优势。
5、 跨域方法 。
思路:说到跨域先了解同源策略——>常见的跨域场景——>解决方案
6、组件化
7、设计模式;
常用的设计模式以及解决了什么问题
8、cdn
8、node的了解
9、vue和react的设计理念,react的简单了解
9、输入url到页面渲染发生了什么(+1)
9、性能优化(+1)
9、性能监控(+1)
9、http协议相关(+1)
9、export和export default,moudle.export的区别(+1)
9、内存泄露(+1)
算法类:
1、数组去重,考虑优化,尽量用最优的算法实现。 数组去重方法
for(var i = 0, len = arr.length; i < len; i++){
for(var j = i+1, lenj = arr.length; j < lenj; j++){
if(arr[i] == arr[j]){
arr.splice(j, 1);
j--;
lenj--;
i--;
len--;
}
}
}
var obj = {};
for(var i = 0, len = arr.length; i < len; i++){
if(!obj[arr[i]]){
obj[arr[i]] = arr[i];
}
}
console.log(Object.values(obj))
利用indexOf
2、寻找数组中第k大值。
2、判断字符串同构。
3、排序,二叉树遍历(中序 (+1) ,后序,前序)。
3、微信红包算法。
想持续了解更多,不妨点赞和关注呗。
Web前端技术交流q群:1137068794,
群里可以一起学习编程,进群能领到学习资料以及源代码