}
foo(); // 输出2
unshift()方法可以想数组开头添加一个或多个元素,并返回新的长度。
arrayObject.unshift(newelement1,newelement2,…,newelementX)
newelement1 必需。向数组添加的第一个元素。
newelement2 可选。向数组添加的第二个元素。
newelementX 可选。可添加若干个元素。
返回值- arrayObject
的新长度。
unshift()
方法将把它的参数插入 arrayObject
的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
请注意,unshift()
方法不创建新的创建,而是直接修改原有的数组。该方法会改变数组的长度。
6. 说说encodeURI()和decodeURI()的作用是什么
1.encodeURl( )
用于将URL转换为十六进制编码。2.decodeURI( )
用于将编码的URL转换回正常URL。
7. 为什么不建议在JavaScript中使用innerHTML
innerHTML
内容每次刷新,因此很慢。在innerHTML
中没有验证的余地,因此,更容易在文档中插入错误代码,从而使网页不稳定。
8. 在DOM操作中怎样创建,添加,移除,替换,插入,查找节点
DOM节点操作方法:
- 访问、获取节点
document.getElementById(id);
// 返回对拥有指定id的第一个对象进行访问
document.getElementsByName(name);
// 返回带有指定名称的节点集合
document.getElementsByTagName(tagName);
// 返回带有指定标签名的对象集合
document.getElementsByClassName(className);
// 返回带有指定class名称的对象集合
- 创建节点/属性
createDocumentFragment() //创建一个DOM片段
document.createElement(eName); // 创建一个节点
document.createAttribute(attrName); // 对某个节点创建属性
document.createTextNode(text); // 创建文本节点
- 添加节点
document.insertBefore(newNode, referenceNode); // 在某个节点前插入节点
parentNode.appendChild(newNode); // 给某个节点添加子节点
- 复制节点
cloneNode(true | false); // 复制某个节点
- 删除节点
parentNode.removeChild(node); // 删除某个节点的子节点node是要删除的节点
- 属性操作
getAttribute(name) // 通过属性名称获取某个节点属性的值
setAttribute(name,value); // 通过某个节点属性的值
removeAttribute(name); // 删除某个属性
- 获取相邻的节点
curtNode.previousSibling; // 获取已知节点的相邻的上一个节点
curtNode.nextSibling; // 获取已知节点的下一个节点
使用localStorage
,使用localStorage.setItem(key,value)
;添加内容
使用storage事件监听添加、修改、删除的动作
window.addEventListener(“storage”,function(event){ $(“#name”).val(event.key+“=”+event.newValue);});
$(function(){
$(“#btn”).click(function(){
var name = $(“#name”).val();
localStorage.setItem(“name”, name);
});
});
console.log(null==undefined)//true
console.log(null===undefined)//false
null
:Null类型,代表“空值”,代表一个空对象指针 (null是javascript的关键字,可以认为是对象类型,它是一个空对象指针,和其它语言一样都是代表“空值”,不过 undefined 却是javascript才有的。)
undefined
:Undefined类型,当一个声明了一个变量未初始化时,得到的是undefined。(undefined是访问一个未初始化的变量时返回的值,而null是访问一个尚未存在的对象时所返回的值。因此,可以把undefined看作是空的变量,而null看作是空的对象。)
undefined表示“缺少值”,此处应该有一个值,但是还没有定义。
null表示“没有对象”,该处不应该有值。
new操作符首先,创建了一个空对象:
var obj = new Object();
设置原型链:
obj.proto = Object.prototype
示例代码了解new的作用:
function da(name) {
this.name = name;
}
da.prototype.sayName = function() {
console.log(this.name);
}
const jeskson = new da(‘dada’);
console.log(jeskson.name); // dadajeskson.sayName(); // dada
由例子得出:
new 通过构造函数 da 创建出来的实例可以访问到构造函数中的属性
new 通过构造函数 da 创建出来的实例可以访问到构造函数原型链中的属性,(通过new操作符,实例与构造函数通过原型链连接了起来)
如果给构造函数一个return返回值,(没有显式的return任何值,默认返回undefined)
function da(name) {
this.name = name; return 1;
}
const jeskson = new da(‘dada’);
console.log(jeskson.name); // dada
这个返回值没有任何的用处,构造函数如果返回原始值,这个返回值没有意义。
function da(name) {
this.name = name;
console.log(this); // da {name: ‘dada’}
return {age:1}
}
const jeskson = new da(‘dada’);
console.log(jeskson); // {age:1}
console.log(jeskson.name); // undefined
构造函数如果返回值为对象,那么这个返回值就会被正常使用。
-
new 操作符会返回一个对象
-
这个对象,也就是构造函数中的this,可以访问到挂载在this上的任意属性
-
这个对象可以访问到构造函数原型上的属性
-
返回原始值会忽略,返回对象会正常处理
js的延迟加载有助于提高页面的加载速度
延迟有:defer属性,async属性,动态创建DOM方式,使用JQuery的getScript方法,使用setTimeout延迟方法,让JS最后加载。
使用setTimeout延迟方法
call(), applay() 都属于Function.prototype的一个方法,它是JavaScript引擎内实现的,属于Function.prototype,所以每个Function对象实例,每个方法都有call,apply属性。
call()和apply() ,它们的作用都是相同的,不同的在于,它们的参数不同。
call(this, arg1, arg2, arg3);
apply(this, arguments);
function add(a,b){
console.log(a+b);
}
function sub(a,b){
console.log(a-b);
}
add.call(sub, 2, 1);
add.apply(sub, [2,1]);
对于A.applay(B)或A.call(B),简单地说,B先执行,执行后根据结果去执行A,用A去执行B的内容代码,再执行自己的代码。
var f1 = function(a,b) {
console.log(a+b);
}
var f2 = function(a,b,c) {
console.log(a,b,c);
}
f2.apply(f1,[1,2]) // 1 2 undefined
解析一下就是,先执行f1,f1执行后,这里注意f1是f1,不是f1()执行方法,所以里面的console.log等内容代码并没有执行,相等于,初始化了代码f1,由于没有返回值,结果是undefined,f2执行的时候this指向window。参数中为[1,2]
,解析后参数为1,2,undefined;执行f2方法后,打印出结果值为:1 2 undefined
A.call(B, 1,2,3) 后面的参数都是独立的参数对象,会被自动解析为A的参数:
var f1 = function(a,b) {
console.log(a+b);
}
var f2 = function(a,b,c) {
console.log(a,b,c);
}
f2.call(f1,[1,2]); // [1,2] undefined undefined
f2.call(f1, 1, 2); // 1 2 undefined
解析一下就是,参数中的[1,2]
,因为传入了一个数组,相当于只传入了第一个参数,b和c参数没有传。
使用apply()和call():
//apply用法
var arr = new Array(1,2,3)
var arr1 = new Array(11,21,31)
Array.prototype.push.apply(arr,arr1)
console.log(arr)//[1, 2, 3, 11, 21, 31]
//call用法
var arr = new Array(1,2,3)
var arr1 = new Array(11,21,31)
Array.prototype.push.call(arr,arr1[0],arr1[1],arr1[2])
console.log(arr)//[1, 2, 3, 11, 21, 31]
数组利用Math求最大和最小值
//apply的用法
var _maxNum = Math.max.apply(null,[1,3,2,4,5])
console.log(_maxNum)//5
var _minNum = Math.min.apply(null,[1,3,2,4,5])
console.log(_minNum)//1
//call的用法
var _maxNum = Math.max.call(null,1,3,2,4,5)
console.log(_maxNum)//5
var _minNum = Math.min.call(null,1,3,2,4,5)
console.log(_minNum)//1
one总结:Function.prototype.apply和Function.prototype.call的作用是一样的,区别在于传入参数的不同;第一个参数都是指定函数体内this的指向;第二个参数就不同了,apply是传入带下标的集合,数组或者类数组,apply把它传给函数作为参数,call从第二个开始传入的参数是不固定的,都会传给函数作为参数。call比applay的性能要好,平常多用call。
two总结:尤其是es6引入了Spread operator延展操作符后,即使参数是数组,可以使用call了。
let params = [1,2,3,4,5];
dada.call(obj, … params);
传入的第一个参数为 null, 函数体内的 this 会指向默认的宿主对象, 在浏览器中则是 window
var func = function( a, b, c ){
console.log(this === window); // 输出:true
};
func.apply( null, [ 1, 2, 3 ] );
// 在严格模式下,函数体内的 this 还是为 null
var func = function( a, b, c ){
“use strict”;
console.log(this === null); // 输出:true
};
func.apply( null, [ 1, 2, 3 ] );
改变this指向
var obj1={
name: ‘dada’
};
var obj2={
name: ‘da’
};
window.name = ‘window’;
var getName = function(){
console.log ( this.name );
};
getName(); // 输出: window
getName.call( obj1 );// 输出: dada
getName.call(obj2 ); // 输出: da
document.getElementById( ‘div1’ ).onclick = function(){
console.log( this.id );// 输出: div1
var func = function(){
console.log ( this.id );// 输出: undefined
}
func();
};
//修正后
document.getElementById( ‘div1’ ).onclick = function(){
var func = function(){
console.log ( this.id );// 输出: div1
}
func.call(this);
};
工厂模式,创建方式
function createPerson(name,age,job){
var o = new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName = function(){
alert(this.name);
}
}
var person1 = createPerson(“da”,1,“it”);
var person2 = createPerson(“dada”,2,“it”);
构造函数模式
function Person(name,age,ob){
this.name=name;
this.age=age;
this.job=job;
this.sayName = function(){
alert(this.name);
}
var person1 = new Person(“dada”,1,“web”);
var person2 = new Person(“dada”,2,“web”);
}
使用原型模式:
function Person(){
}
Person.prototype.name = “da”;
Person.prototype.age = 1;
Person.prototype.job = “web”;
Person.prototype.sayName = function(){
alert(this.name);
}
var person1 = new Person();
person1.sayName(); //“dada”
var person2 = new Person();
person2.sayName(); //“dada”
alert(person1.sayName == person2.sayName); //true
组合使用构造函数模式和原型模式
function Person(name,age){
this.name = name;
this.age = age;
this.friends = [“da”,“dada”];
}
Person.prototype = {
constructor:Person,
sayName:function(){
alert(this.name);
}
}
var person1 = new Person(“da1”,1);
var person2 = new Person(“da2”,2);
person1.friends.push(“dadada”);
console.log(person1.friends); //[“da”,“dada”,“dadada”]
console.log(person2.friends); //[“da”,“dada”]
console.log(person1.friends === person2.friends); //false
console.log(person1.sayName === person2.sayName); //true
动态原型模式
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
if(typeof this.sayName!=“function”){
Person.prototype.sayName=function(){
alert(this.name);
};
}
}
JavaScript对象的创建方式,1,Object构造函数式,2,对象字面量式,3,工厂模式,4,安全工厂模式,5,构造函数模式,6,原型模式,7,混合构造函数和原型模式,8,动态原型模式,9,寄生构造函数模式,10,稳妥构造函数模式。
学习使用异步很重要,在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子是ajax操作。
简单的promise对象的构造函数的结构:
var Promise = function() {
this.callbacks = []; // 用于管理回调函数
}
Promise.prototype = {
construct: Promise,
resolve: function(result) { // 请求成功时执行的方法
},
reject: function(result) { // 请求失败时执行的方法
},
complete: function(type, result) { // 执行回调
},
then: function(successHandler, failedHandler) { // 绑定回调函数
}
}
对于回调函数,好处是简单,容易理解,但是缺点在于代码的阅读和维护,各个部分之间高度耦合,流程也会很乱,每个任务只能指定一个回调函数,称之为:回调地狱。
// 同步操作变成异步操作
f1();
f2();
function f1(callback) {
setTimeout(function() {
callback();
},1000);
}
f1(f2);
事件监听(采用事件驱动模式,任务的执行不取决于代码的顺序,而取决于某个事件是否发生)示例如下:
$(‘#clickBtn’).on(‘click’,function(e){console.log(‘xxx’);}
f1.on(‘dada’, f2);
function f1() {
setTimeout(function() {
f1.trigger(‘dada’);
},1000);
}
// f1.trigger(‘dada’)表示执行完成后,立即触发dada事件,然后开始执行f2
对于事件监听,可绑定多个事件,而且每个事件可以指定多个回调函数,可以“去耦合”,有利于实现模块化,缺点就是整个程序都要编程事件驱动型,运行流程会变得很不清晰。
对于采用发布,订阅方式,和“事件监听”类似。(发布/订阅)
对于使用Promise对象实现,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。
同源策略的目的是为了防止某个文档或脚本从多个不同源装载,同源策略是指,协议,域名,端口相同。同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。
有同源限制可以放置黑客盗取信息。
函数是第一类对象:
这些函数可以作为参数传递给其他函数,作为其他函数的值返回,分配给变量,也可以存储在数据结构中。
如果公民分等级,一等公民什么都可以做,次等公民这不能做那不能做。JavaScript的函数也是对象,可以有属性,可以赋值给一个变量,可以放在数组里作为元素,可以作为其他对象的属性,什么都可以做,别的对象能做的它能做,别的对象不能做的它也能做。这不就是一等公民的地位嘛。
函数声明:
foo(); // 在函数声明之后调用 foo,可以正常调用。因为 foo 被提前到最前面定义了。
function foo() {
return true;
}
调用:
函数名(参数)
函数名.call(函数名,参数)
函数名.apply(函数名,[参数])
new 函数名(参数)
定时器
把函数声明变成函数表达式再调用
ES6里的模版字符串
函数表达式:
foo(); // 在函数表达式之前调用函数,报错。因为这时候还没有 foo 这个变量。
var foo = function() {
return foo;
};
调用
函数名(参数)
函数名.call(函数名,参数)
函数名.apply(函数名,[参数])
new 函数名(参数)
直接在后面加上一对小括号
定时器
ES6里的模版字符串
以被赋值的形式出现(根据具体形式调用)
在向执行环境中加载数据时,解析器对函数声明和函数表达式不一样的,解析器首先读取读取函数声明,并使它在执行任何代码之前可用,对于函数表达式,就需要等到解析器执行到它所在的代码行。
JavaScript解释器中存在一种变量声明被提升的机制,也就是说函数声明会被提升到作用域的最前面,即使写代码的时候是写在最后面,也还是会被提升至最前面。
var getName // 变量被提升,此时为undefined
getName() // dada 函数被提升
var getName = function() {
console.log(‘da’)
}
// 函数表达式此时才开始覆盖函数声明的定义
getName() // da
function getName() {
console.log(‘dada’)
}
getName() // da
在JavaScript中定义一个函数有四种方式
-
函数声明
-
函数表达式
-
ES6里箭头函数
-
new Function()
-
ES5 规定,函数只能在顶级作用域和函数作用域中声明,否则是不合法的。
-
ES6 引入了块级作用域的概念,这种定义方法就被允许了。
代码如下:
document.cookie = ‘user=jeskson;expires=’+new Date(0);
一个英文字符 占用一个字节,一个中文 字符占用两个字节
function byte(str) {
var bytes = str.length;
for(var i=0; i<bytes; i++) {
if(str.charCodeAt(i)>255) {
bytes++;
}
}
return bytes
}
console.log(byte(‘dada’));
attribute是dom元素在文档中作为HTML标签拥有的属性,property就是dom元素在JavaScript中作为对象拥有的属性。
attribute特性,property属性。
默认情况下,在页面加载期间,HTML 代码的解析将暂停,知道脚本停止执行。如果服务器速度较慢或者脚本特别沉重,会导致网页延迟,在使用Deferred时,脚本会延迟执行直到HTML解析器运行。这减少了网页加载时间,并且它们的显示速度更快。
function outer() {
var a = ‘变量1’
var inner = function() {
console.info(a);
}
return inner; // inner就是一个闭包函数,因为它能访问到outer函数的作用域
}
在JavaScript中的一大特点就是闭包,很多高级应用都要依靠闭包来实现。由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大的,所以不要乱滥用闭包,否则会导致页面的性能问题,在IE中可能会导致内存泄漏,所以可以在退回函数前,将不使用的局部变量全部删除。
-
instanceof关键字,判断一个对象是否是类的实例化对象
-
constructor属性,判断一个对象是否是类的构造函数
27. 你知道有个函数,执行直接对象查找时,它始终不会查找原型,这是什么函数
hasOwnProperty
28. document.write和innerHTML的区别
-
document.write会重绘整个页面
-
innerHTML可以重绘页面的一部分
效果动态图:
按鈕
按钮
读取服务器中的文件内容
function readAjaxFile(url) {
// 创建xhr
var xhr = new XMLHttpRequest();
// 监听状态
xhr.onreadystatechange = function() {
// 监听状态值
if(xhr.readyState === 1 && xhr.status === 200) {
console.log(xhr.responseTest)
}
}
// 打开请求
xhr.open(‘GET’, url, true)
// 发送数据
xhr.send(null)
}
读取本地计算机中的内容
function readInputFile(id) {
var file = document.getElementById(id).files[0];
// 实例化
var reader = new FileReader();
// 读取文件
reader.readAsText(file)
// 监听返回
reader.onload = function(data) {
console.log(data, this.result);
}
}
document.form.action = ‘submit’;
-
不要在同一行声明多个变量
-
使用对象字面量替代new Array这种形式
-
不要使用全局函数
-
switch语句必须带有default分支
-
函数不应该有时有返回值,有时没有返回值
-
for循环必须使用大括号括起来
-
if语句必须使用大括号括起来
-
写注释
-
命名规则,构造器函数首字母大写
eval的功能是把对应的字符串解析成JavaScript代码并运行。但是应该避免使用eval,使用它可能会造成程序不安全,影响性能因要一次解析成JavaScript语句,一次执行。
[“1”,“2”,“3”].map(parseInt)
1
[1,NaN,NaN]
因parseInt需要两个参数val,radix,其中radix表示解析时用的基数,map传递了3个参数item, index, array,对应的radix不合法导致解析失败。
this指的是调用函数的那个对象,一般情况下,this是全局对象Global,可以作为方法调用。this随着函数的使用场合的不同,this的值会发生变化。
this是谁调用就指向谁,在全局环境里,指向的是window对象。
var name = ‘jeskson’;
function person() {
return this.name;
}
console.log(this.name); // jeskson
console.log(window.name); // jeskson
console.log(person()); // jeskson
12345678
局部环境:
var name = “jeskson”;
function person() {
console.log(this.name);
}
person(); // jeskson
var obj = {
name: “dada”,
person: function() {
console.log(this.name);
}
}
obj.person(); // dada
构造函数内使用this
function Person(name) {
this.name = name;
return name;
}
console.log(new Person(‘jeskson’).name); // jeskson
12345
使用apply和call函数改变this的指向
function person() {
return this.name;
}
var obj = {
name: ‘jeskson’
}
console.log(person.call(obj)); // jeskson
console.log(person.apply(obj)); // jeskson
对象函数调用,哪个对象调用就指向哪个对象
使用new实例化对象,在构造函数中的this指向实例化对象
var show = function() {
this.myName=“jeskson”; /// this指向的是obj对象
}
var obj = new show();
35. 在JavaScript中什么是类(伪)数组,如何将类(伪)数组转换为标准数组
-
典型的类(伪)数组是函数的argument参数,在调用
getElementsByTagName
和document.childNodes
方法时,它们返回的NodeList
对象都属于伪数组。 -
可以使用
Array.prototype.slice.call(fakeArray)
将数组转化为真正的Array对象。
什么是伪数组,是能通过Array.prototype.slice
转换为真正的数组的带有length
属性的对象。
// 标准的有伪数组对象
var da = { 0: ‘a’, 1: ‘b’, length: 2};
var dada = Array.prototype.slice.call(da);
console.log(da[0]); // a
var dadada = [].slice.call(dada);
console.log(da[0]); // a
伪数组:就是无法使用数组的方法和api,但任然可以使用便利数组的方式遍历他们。
一个伪数组Array.prototype.slice.call()
进行转换为一个真正的数组
36. JavaScript中的callee和caller的作用是什么
-
caller返回一个关于函数的引用,该函数调用了当前函数
-
callee返回正在执行的函数,也就是指定的function对象的正文
caller是JavaScript函数类型的一个属性,它引用调用当前函数的函数; callee则不是函数对象的属性,它是函数上下文中arguments对象的属性。
aaaabbbccccddhgddada
function dealStr(str) {
var obj = {};
for(var i = 0; i<str.length; i++){
var v = str.charAt(i);
if(obj[v] && obj[v].value === v) {
++obj[v].count
}else{
obj[v] = {
count: 1,
value: v
}
}
}
return obj;
}
var obj = dealStr(str);
for(key in obj) {
console.log(obj[key].value+‘=’+obj[key].count);
}
function trim(str) {
if (str && typeof str === “string”) {
return str.replace(/(^\s*)|(\s*)$/g,“”); //去除前后空白符
}
}
12345
for循环数组
var arr3 = [];
// 遍历arr1
for (var i = 0; i < arr1.length; i++) {
arr3.push(arr1[i]);
}
// 遍历arr2
for (var j = 0; j < arr2.length; j++) {
arr3.push(arr2[j]);
}
console.log(arr3); // [1,2,3,4,5,6]
concat()方法:concat()方法,作用是连接两个或更多的数组,并返回一个新的数组。
var arr3 = arr1.concat(arr2);
console.log(arr3); // [1,2,3,4,5,6]
apply()方法
arr1.push.apply(arr1, arr2);
-
&&
运算符 -
||
运算符 -
!
运算符
事件代理,又称为事件委托,就是把原本需要绑定的事件委托给父元素,让父元素负责事件监听,事件代理的原理是DOM元素的事件冒泡,使用事件代理的好处是提高性能。
- 未声明的变量出现中不存在且未声明的变量。如果程序尝试读取未声明变量的值,则会遇到运行时错误。
xxx is not defined
- 未定义的变量是在程序中声明但尚未给出任何值的变量。如果程序尝试读取未定义变量的值,则返回未定义的值。
已经通过var指令声明,但是没有赋值,没有定义类型,所以会打印undefined
未定义
43. 什么是全局变量,这些变量如何声明,使用全局变量有哪些问题
全家变量是整个代码中都可用的变量,这些变量没有任何作用域。var关键字用于声明局部变量或对象,如果省略var关键字,则声明一个全局变量。
使用全局变量所面临的问题是局部变量和全局变量名称的冲突,很难调试和测试依赖于全局变量的代码。
-
setTimeout(function,delay)
函数用于启动在所属延迟之后调用特定功能的定时器。 -
setInterval(function,delay)
函数用于在提到的延迟中重复执行给定的功能,只有在取消时才停止。 -
clearInterval(id)
函数指示定时器停止。
45. 说说ViewState和SessionState有什么区别
-
ViewState用于会话中的页面
-
SessionState用于Web应用程序中的所有页面上访问的用户特定数据
===为严格等式运算符,只有当两个操作数具有相同的值和类型时,,才会返回
true
for, while, do…while, for_in, for of (es6新增)
while(条件表达式语句)
{
执行语句块;
}
do
{
执行语句块;
}
while(条件表达式语句);
for(初始化表达式;循环条件表达式;循环后的操作表达式)
{
执行语句块;
}
- null 用于表示无值或无对象,表示没有对象或空字符串,没有有效的布尔值,没有数值和数组对象。
- delete操作符用于删除对象中的某个属性,但是不能删除变量,函数等。
var obj = {
name: ‘jeskson’
}
console.log(obj.name);//‘jeskson’
delete obj.name;
console.log(obj.name);//undefined
alert, confirm, prompt
其作用是用于防止页面刷新,并在调用时传递参数“0”;用于调用另一种方法而不刷新页面
cookie是一些数据,存储你电脑上的文本文件中,当web服务器向浏览器发送web页面时,在连接关闭后,服务端不会记录用户的信息。
Cookie的形式,Cookie是由name=value形式成对存在的,Cookie字符串必须以分号作为结束符,Cookie除了name属性之外还存在其他4个相关属性。
设置Cookie的语法如下: set-Cookie:name=value;[expires=date];[path=dir];[domain=domainn];[secure]
性能优化
1.webpack打包文件体积过大?(最终打包为一个js文件)
2.如何优化webpack构建的性能
3.移动端的性能优化
4.Vue的SPA 如何优化加载速度
5.移动端300ms延迟
6.页面的重构
所有的知识点都有详细的解答,我整理成了280页PDF《前端校招面试真题精编解析》。