文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。
typeof(Array);
typeof(Date);
7、symbol
typeof Symbol() // ES6提供的新的类型
14. 一次js请求一般情况下有哪些地方会有缓存处理?
参考答案:
DNS缓存,CDN缓存,浏览器缓存,服务器缓存。
解析:
1、DNS缓存
DNS缓存指DNS返回了正确的IP之后,系统就会将这个结果临时储存起来。并且它会为缓存设定一个失效时间 (例如N小时),在这N小时之内,当你再次访问这个网站时,系统就会直接从你电脑本地的DNS缓存中把结果交还给你,而不必再去询问DNS服务器,变相“加速”了网址的解析。当然,在超过N小时之后,系统会自动再次去询问DNS服务器获得新的结果。
所以,当你修改了 DNS 服务器,并且不希望电脑继续使用之前的DNS缓存时,就需要手动去清除本地的缓存了。
本地DNS迟迟不生效或者本地dns异常等问题,都会导致访问某些网站出现无法访问的情况,这个时候我们就需要手动清除本地dns缓存,而不是等待!
2、CDN缓存
和Http类似,客户端请求数据时,先从本地缓存查找,如果被请求数据没有过期,拿过来用,如果过期,就向CDN边缘节点发起请求。CDN便会检测被请求的数据是否过期,如果没有过期,就返回数据给客户端,如果过期,CDN再向源站发送请求获取新数据。和买家买货,卖家没货,卖家再进货一个道理^^。
CDN边缘节点缓存机制,一般都遵守http标准协议,通过http响应头中的Cache-Control和max-age的字段来设置CDN边缘节点的数据缓存时间。
3、浏览器缓存
浏览器缓存(Browser Caching)是为了节约网络的资源加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。
浏览器缓存主要有两类:缓存协商:Last-modified ,Etag 和彻底缓存:cache-control,Expires。浏览器都有对应清除缓存的方法。
4、服务器缓存
服务器缓存有助于优化性能和节省宽带,它将需要频繁访问的Web页面和对象保存在离用户更近的系统中,当再次访问这些对象的时候加快了速度。
15. 列举 3 种强制类型转换和 2 种隐式类型转换
参考答案:
强制: parseInt(), parseFloat(), Number(), Boolean(), String()
隐式: +, -
解析:
// 1.parseInt() 把值转换成整数
parseInt(“1234blue”); // 1234
parseInt(“0xA”); // 10
parseInt(“22.5”); // 22
parseInt(“blue”); // NaN
// parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,示例如下:
parseInt(“AF”, 16); // 175
parseInt(“10”, 2); // 2
parseInt(“10”, 8); // 8
parseInt(“10”, 10); // 10
// 如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如:
parseInt(“010”); // 8
parseInt(“010”, 8); // 8
parseInt(“010”, 10); // 10
// 2.parseFloat() 把值转换成浮点数,没有基模式
parseFloat(“1234blue”); // 1234.0
parseFloat(“0xA”); // NaN
parseFloat(“22.5”); // 22.5
parseFloat(“22.34.5”); // 22.34
parseFloat(“0908”); // 908
parseFloat(“blue”); // NaN
// 3.Number() 把给定的值转换成数字(可以是整数或浮点数),Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的是整个值,而不是部分值。示例如下:
Number(false) // 0
Number(true) // 1
Number(undefined) // NaN
Number(null) // 0
Number(“5.5”) // 5.5
Number(“56”) // 56
Number(“5.6.7”) // NaN
Number(new Object()) // NaN
Number(100) // 100
// 4.Boolean() 把给定的值转换成Boolean型
Boolean(“”); // false
Boolean(“hi”); // true
Boolean(100); // true
Boolean(null); // false
Boolean(0); // false
Boolean(new Object()); // true
// 5.String() 把给定的值转换成字符串
String(123) // “123”
// 6. + -
console.log(0 + ‘1’) // “01”
console.log(2 - ‘1’) // 1
16. 你对闭包的理解?优缺点?
参考答案:
概念:
闭包就是能够读取其他函数内部变量的函数。
三大特性:
-
函数嵌套函数。
-
函数内部可以引用外部的参数和变量。
-
参数和变量不会被垃圾回收机制回收。
优点:
-
希望一个变量长期存储在内存中。
-
避免全局变量的污染。
-
私有成员的存在。
缺点:
-
常驻内存,增加内存使用量。
-
使用不当会很容易造成内存泄露。
示例:
function outer() {
var name = “jack”;
function inner() {
console.log(name);
}
return inner;
}
outer()(); // jack
function sayHi(name) {
return () => {
console.log(Hi! ${name}
);
};
}
const test = sayHi(“xiaoming”);
test(); // Hi! xiaoming
虽然 sayHi 函数已经执行完毕,但是其活动对象也不会被销毁,因为 test 函数仍然引用着 sayHi 函数中的变量 name,这就是闭包。
但也因为闭包引用着另一个函数的变量,导致另一个函数已经不使用了也无法销毁,所以闭包使用过多,会占用较多的内存,这也是一个副作用。
解析:
由于在 ECMA2015 中,只有函数才能分割作用域,函数内部可以访问当前作用域的变量,但是外部无法访问函数内部的变量,所以闭包可以理解成“定义在一个函数内部的函数,外部可以通过内部返回的函数访问内部函数的变量“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁。
17. 如何判断 NaN
参考答案:
isNaN()方法
解析:
isNaN(NaN) // true
18. new 一个对象的过程中发生了什么
参考答案:
function Person(name) {
this.name = name;
}
var person = new Person(“qilei”);
new一个对象的四个过程:
// 1. 创建空对象;
var obj = {};
// 2. 设置原型链: 设置新对象的 constructor 属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的 prototype 对象;
obj.constructor = Person;
obj.proto = Person.prototype;
// 3. 改变this指向:使用新对象调用函数,函数中的 this 指向新实例对象obj:
var result = Person.call(obj); //{}.构造函数();
// 4. 返回值:如果无返回值或者返回一个非对象值,则将新对象返回;如果返回值是一个新对象的话那么直接返回该对象。
if (typeof(result) == “object”) {
person = result;
} else {
person = obj;
}
19. for in 和 for of的区别
参考答案:
1、for in
-
- 一般用于遍历对象的可枚举属性。以及对象从构造函数原型中继承的属性。对于每个不同的属性,语句都会被执行。
-
- 不建议使用 for in 遍历数组,因为输出的顺序是不固定的。
-
- 如果迭代的对象的变量值是 null 或者 undefined, for in 不执行循环体,建议在使用 for in 循环之前,先检查该对象的值是不是 null 或者 undefined。
2、for of
-
- for…of 语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
解析:
var s = {
a: 1,
b: 2,
c: 3
};
var s1 = Object.create(s);
for (var prop in s1) {
console.log(prop); //a b c
console.log(s1[prop]); //1 2 3
}
for (let prop of s1) {
console.log(prop); //报错如下 Uncaught TypeError: s1 is not iterable
}
for (let prop of Object.keys(s1)) {
console.log(prop); // a b c
console.log(s1[prop]); //1 2 3
}
20. 如何判断 JS 变量的一个类型(至少三种方式)
参考答案:
typeof
、instanceof
、constructor
、prototype
解析:
1、typeof
typeof 返回一个表示数据类型的字符串,返回结果包括:number、boolean、string、object、undefined、function等6种数据类型。如果是判断一个基本的类型用typeof就是可以的。
typeof ‘’; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof undefined; //undefined 有效
typeof null; //object 无效
typeof []; //object 无效
typeof new Function(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效
2、instanceof
instanceof 是用来判断 A 是否为 B 的实例对,表达式为:A instanceof B,如果A是B的实例,则返回true, 否则返回false。 在这里需要特别注意的是:instanceof检测的是原型,
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等
前端视频资料:
unction(); // function 有效
typeof new Date(); //object 无效
typeof new RegExp(); //object 无效
2、instanceof
instanceof 是用来判断 A 是否为 B 的实例对,表达式为:A instanceof B,如果A是B的实例,则返回true, 否则返回false。 在这里需要特别注意的是:instanceof检测的是原型,
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等
[外链图片转存中…(img-McAaqMAv-1714829111221)]
前端视频资料:
[外链图片转存中…(img-l3R2s1ji-1714829111221)]