**
本文仅用于记录本人2021年秋招遇到的部分前端笔试/面试题，答案仅供参考
**
1、跳跃游戏
给定一个非负整数数组，你最初位于数组的第一个位置。
数组中的每个元素代表你在该位置可以跳跃的最大长度。
判断你是否能够到达最后一个位置。
示例 1:
输入: [2,3,1,1,4]
输出: true
解释: 我们可以先跳 1 步，从位置 0 到达 位置 1, 然后再从位置 1 跳 3 步到达最后一个位置。
示例 2:
输入: [3,2,1,0,4]
输出: false
解释: 无论怎样，你总会到达索引为 3 的位置。但该位置的最大跳跃长度是 0 ， 所以你永远不可能到达最后一个位置。
//贪心算法
function Jump(nums) {
// 首位重合，必定能达到
if (nums.length < 2) {
return true
}
//pos记录每个位置（数组每个下标）所能达到的最大位置，即当前索引 + 当前值（此处省略了+0）
let pos = nums[0]
//遍历剩下的数组，当最大位置大于等于数组长度时，即可以到达最后，
//反之若在遍历过程中，目前能到达的最大位置小于当前索引值，说明无法到达当前索引位置，故也不能到达数组尾
for (let i = 1; i < nums.length; ++i) {
if (pos >= i) {
pos = Math.max(pos, i + nums[i])
}
if(pos < i) return false;
if (pos >= nums.length - 1) {
return true
}
}
return false
};
2、岛屿数量
给你一个由 ‘1’（陆地）和 ‘0’（水）组成的的二维网格，请你计算网格中岛屿的数量。
岛屿总是被水包围，并且每座岛屿只能由水平方向和或竖直方向上相邻的陆地连接形成。此外，你可以假设该网格的四条边均被水包围。（如果1 的上下左右都为0，则视为一个岛屿，写出一个函数，计算数组中岛屿的个数。）
示例 1:
输入:
[
[1,1,1,1,0],
[1,1,0,1,0],
[1,1,0,0,0],
[0,0,0,0,0]
]
输出: 1
示例 2:
输入:
[
[1,1,0,0,0],
[1,1,0,0,0],
[0,0,1,0,0],
[0,0,0,1,1]
]
输出: 3
// 时间复杂度：O(MN)，其中 M 和 N 分别为行数和列数。
// 空间复杂度：O(MN)，在最坏情况下，整个网格均为陆地，深度优先搜索的深度达到 MN。
var numIslands0_1 = function(grid) {
let count = 0
for(let i = 0; i < grid.length; i++){
for(let j = 0; j < grid[0].length; j++){
if(grid[i][j] === "1"){
grid[i][j] = "0"
dfsVisit(i, j)
count++
}
}
}
function dfsVisit(r, c){
let dir = [[0,-1], [0,1], [-1,0], [1,0]] // 上下左右
for(let k = 0; k < 4; k++){
let row = r + dir[k][0],
col = c + dir[k][1];
if(row < 0 || row >= grid.length || col < 0 || col >= grid[0].length) continue
if(grid[row][col] === "1"){
grid[row][col] = "0"
dfsVisit(row, col)
}else{
continue
}
}
}
return count
};
3、主流浏览器引擎前缀:
-webkit- ：（谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）
-moz- ：（火狐浏览器）
-o- ：（旧版Opera浏览器）
-ms- ：（IE浏览器 和 Edge浏览器）
示例:
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
4、parseInt(“8X8”)+parseFloat(“8”)=16
5、Number(null)=0
6、不知为啥
obj={};
obj.log=console.log;
obj.log.call(console,this)//输出为window
7、对递归程序的优化的一般的手段为（A）
A 尾递归优化
B 循环优化
C 堆栈优化
D 停止值优化
8、在位运算中，操作数每右移一位，其结果相当于除以2 ，若左移1位，其结果相当于乘以2
9、找上中位数
给定两个有序数组arr1和arr2，已知两个数组的长度都为N，求两个数组中所有数的上中位数。上中位数：假设递增序列长度为n，若n为奇数，则上中位数为第n/2+1个数；否则为第n/2个数
输入为：arr1 = [1, 2, 3, 4], arr2 = [3, 4, 5, 6]，输出为3
输入为：arr1 = [0, 1, 2], arr2 = [3, 4, 5]，输出为2
function solve(arr1,arr2){
var arr = arr1.concat(arr2)
arr = arr.sort((a,b)=>{return a-b}) // 数组升序
arr = dedupe(arr) // 数组去重
var len = arr.length
if(len==1) return arr[0] // 若长度只有一个则为本身
else {
var index = Math.ceil(len/2) // 无论奇数偶数个，向上取整
return arr[index-1]
}
}
// 数组去重函数
function dedupe(arr){
return Array.from(new Set(arr))
}
10、给定一个数组由一些非负整数组成，现需要将他们进行排列并拼接，使得最后的结果最大，返回值需要是string类型，否则可能会溢出（每个数不可拆分）
var largestNum = function(nums) {
return nums.sort((a,b) =>
`${b}${a}` - `${a}${b}`
).join('').replace(/^0+/,'0')
};
或者：
var largestNumber = function(nums) {
return nums
.sort((a,b) => ''+b+a > ''+a+b ? 1 : -1)
.join('')
.replace(/^0+(?=.)/,'')
}
11、找出 10 22 -6 14的下一个数字（没错，你没看错，这是我面试前端遇到的笔试题，阿巴阿巴阿巴~~）
第一组 ：10 ， 22 ； 22-10=12 12 /（-2）=-6
第二组 ：22 ， -6 ； -6-22=-28 -28 /（-2）=14
第三组 ：-6 ， 14； 14-（-6）= 20 20 /（-2）= -10
所以下一个数为-10
12、写出括号内的数字：10，5，25，35，（ ），155 （继续阿巴阿巴阿巴~~）
10 X 2 + 5 = 25
5 X 2 + 25 = 35
故括号内的数字为：25 X 2 + 35 = 85
13、overflow 属性定义内容溢出元素框时会如何处理？
如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制，即必会出现滚动条。
如果值为auto，子元素内容大于父元素时出现滚动条。
如果值为visible，溢出的内容出现在父元素之外。
如果值为hidden，溢出隐藏。
14、新窗口打开网页，用到以下哪个值（ _blank ）
_self
_blank
_top
_parent
15、flash和js通过什么类进行交互?
ExternalInterface，Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback：
ExternalInterface.addCallback(“在js里可调用的flash方法名”,flash内方法) ，在flash中通过这个方法公开在js中可调用的flash内的方法;
ExternalInterface.call(“js方法”,传给js的参数) ，在flash里调用js里的方法。
16、在使用点运算符时，浏览器看到“-”就没法正确解析了，在那种情况下，只能将该变量使用驼峰命名法来表示。
//inputElement是一个dom元素
inputElement.style.backgroundColor = 'red'; // 这是没问题的
inputElement.style.background-color = 'red'; // 这是错的，浏览器看不懂啊...
inputElement.style["background-color"] = 'red'; // 这也是可以的
17、HTML5标签的使用：
标签定义声音，比如音乐或其他音频流。
标签定义图形，比如图表和其他图像。 标签只是图形容器，您必须使用脚本来绘制图形。
18、通过修改document.domain来跨子域，还可以使用window.name来进行跨域。
19、以下程序的输出结果为什么？
function Foo() {
var i = 0;
return function() {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
20、请给出下面这段代码的运行结果：
var bb = 1;
function aa(bb) {
bb = 2;
alert(bb);
};
aa(bb);
alert(bb);
运行结果为 2 1，函数体内，bb并没有使用var来定义，按理说这个bb在预处理的时候应该是window的属性。但在这里，函数声明的时候，带了一个参数bb，也就是相当于在函数体内声明了var bb。所以，函数里的bb就是函数活动对象的属性。所以函数执行时会输出2。函数执行完后，函数的活动对象被销毁，也就是局部的这个bb被删除了，执行流进入到window，再输出bb，值就是1了。
21、javascript变量定义规则：
变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号
变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型
尽量避免使用没有意义的命名
禁止使用JavaScript关键词、保留字全名。
22、<!DOCTYPE>
声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型、规范来解析这个文档。浏览器根据DOCTYPE是否存在以及使用的哪种DTD（文档类型定义）来选择要使用的呈现模式， 浏览器有两种呈现模式：标准模式和混杂模式，在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。对于 HTML 4.01 文档，
包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
23、下述有关 border:none 以及 border:0 的区别，描述错误的是（C、D）
A、border:none 表示边框样式无
B、border:0 表示边框宽度为 0
C、当定义了 border:none，即隐藏了边框的显示，实际就是边框宽度为 0
D、当定义边框时，仅设置边框宽度也可以达到显示的效果
解析 ：C选项，当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；D选项，定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。
另外，W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。
24、下面有关 CSS sprites 说法错误的是（C）
A、允许你将一个页面涉及到的所有零星图片都包含到一张大图中去
B、利用 CSS 的 “background-image”，“background-repeat”，“background-position” 的、组合进行背景定位
C、CSS Sprites 虽然增加了总的图片的字节，但是很好地减少网页的 http 请求，从而大大的提高页面的性能
D、CSS Sprites 整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名
解析 ：CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
25、浏览器的内核引擎
浏览器的内核引擎，基本上是四分天下：
1）Trident: IE 以Trident 作为内核引擎；
2)Gecko: Firefox 是基于 Gecko 开发；
3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；
4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台–Opera mini
注：2013年2月Opera宣布转向WebKit引擎
注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎
26、[]==[]结果为false
在==两边都是相同数据类型时，它是直接比较两边数据的。
每次使用 [] 都是新建一个数组对象，所以 [] == [] 这个语句里建了两个数据对象，它们是两个引用类型，在堆中是不同地址的，所以它们不等。与之类似的还有：
27、[]==![]结果为true
以上的结果主要是==的类型转换规则造成的：
（1）首先 ! 的优先级高于 ==号，![]和!{}的结果都为false；
（2）相等操作符会对操作值进行隐式转换后进行比较：
如果一个操作值为布尔值，则在比较之前先将其转换为数值；
如果一个操作值为字符串，另一个操作值为数值，则通过Number()函数将字符串转换为数值；
如果一个操作值是对象，另一个不是，则调用对象的valueOf()方法，得到的结果按照前面的规则进行比较，如果对象没有valueOf()方法，则调用 toString()；
null与undefined是相等的；
如果一个操作值为NaN，则相等比较返回false；
如果两个操作值都是对象，则比较它们是不是指向同一个对象。
根据以上规则就可得出对应的结果。
28、在以下选项中，关于JavaScript的Date对象描述正确的是（c）
A 、getMonth( )方法能返回Date对象的月份，其值为1~12
B、 getDay( )方法能返回Date对象的一个月中的每一天，其值为1~31
C 、getTime( )方法能返回某一时刻(1970年1月1日)依赖的毫秒数
D、 getYear( )方法只能返回4位年份，长用于获取Date对象的年份
解析：getMonth()：返回月份（从 0-11）。
getDay()：返回星期几（0-6）。
getTime() ：返回自 1970 年 1 月 1 日午夜以来与指定日期的毫秒数。
getYear() ：已弃用，请改用 getFullYear() 方法。getFullYear()：返回指定日期的年份（1000 年到 9999 年之间的日期的四位数字）。
getDate() ：返回月中的第几天（从 1 到 31）。
29、Ajax与json区别，以及各自的优缺点。
Ajax：ajax是一种发送http请求与后台进行异步通讯的技术，与后台通信，获取数据和信息，其原理是实例化XMLHttpRequest对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步，用于快速创建动态网页。
优点：1：页面无刷新,在页面内与服务器通信,用户体验非常好
2：基于标准化的并被广泛支持的技术
缺点：1：ajax干掉了back按钮
2: 安全问题
3: 破坏了程序的异常机制
4: 如果用户禁用了JS就找不到数据了
JSON: json的全称为：JavaScript Object Notation，是一种轻量级的数据交互格式。简单来说，json就是一种在各个编程语言中流通的数据格式，负责不同编程语言中的数据传递和交互。
优点：(1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小；
（2）易于解析，客户端JavaScript可以简单的通过eval_r ()进行JSON数据的读取；（3）支持多种语言，兼容性广泛
缺点：1：语法过于严谨
2：代码不容易读
3：eval函数存在风险
30、ES5与ES6的区别
1、新增声明命令 let 和 const
2、模板字符串
3、函数的扩展：3.1）函数的默认参数； 3.2）箭头函数
4、对象的扩展：4.1）属性的简写：var baz = {foo}; 等同于 var baz = {foo: foo};
4.2）Object.keys()方法：获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组 4.3）Object.assign ()：assign 方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象
5、for…of 循环
6、import 和 export
7、Promise 对象
8、数组、对象的解构赋值
9、Set 数据结构
10、class
31、画一条0.5px的线
不能直接设置0.5px，因为直接设置0.5px，在不同的浏览器会有差异
（1）使用scaleY
.half-px {
width: 300px;
background-color: #000;
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%;//默认值为50% 50% 0
//如果是Chrome/Safari浏览器，线条会变虚，将缩放的原点改为线的中下位置即可
}
（2）线性渐变linear-gradient
.half-px {
height: 1px;
background: linear-gradient(0deg, #fff, #000);
//渐变的角度从下往上，从白色#fff渐变到黑色#000，而且是线性的
}
32、如何封装axios?
第一个参考链接：
自定义封装axios方法总结
第二个参考链接：
我是如何封装axios的
33、用es5实现jquery.fn.extend？
还是参考jQuery的源码吧：
jQuery.extend = jQuery.fn.extend = function () {
var options, name, src, copy, copyIsArray, clone,
target = arguments[0] || {},
i = 1,
length = arguments.length,
deep = false;
if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
i = 2;
}
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
if (length === i) {
target = this;
--i;
}
for (; i < length; i++) {
if ((options = arguments[i]) != null) {
for (name in options) {
src = target[name];
copy = options[name];
if (target === copy) {
continue;
}
if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
if (copyIsArray) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ? src : [];
} else {
clone = src && jQuery.isPlainObject(src) ? src : {};
}
target[name] = jQuery.extend(deep, clone, copy);
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
return target;
};
34、简述box-sizing属性：
box-sizing 属性用来设置盒子模型的边界，有三个值 content-box、border-box、inherit。 content-box 是默认值，盒子的宽度和高度为 width\heigth+padding+border+margin;
border-box是css3新增的属性值，盒子的宽度和高度为 width\heigth+margin，即使给盒子加上padding和border也不会撑大盒子的宽度和高度；inherit 规定应从父元素继承 box-sizing 属性的值。
35、常见的web性能优化方法：
1.减少http请求
（1）从设计实现层面简化页面；
（2）合理设置HTTP缓存；
（3）资源合并与压缩；
（4）雪碧图；
（5）Lazy Load Images
2. 将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
3. 异步执行 inline脚本(其实原理和上面是一样，保证脚本在页面内容后面加载。)
4. Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）
5. 将 CSS放在 HEAD中
6. 异步请求 Callback（就是将一些行为样式提取出来，慢慢的加载信息的内容）
7. 减少不必要的 HTTP跳转
8. 避免重复的资源请求
9. 精简javaScript和css
36、JavaScript中null和undefined的区别：
首先：
undefined表示定义了未赋值，null表示定义了并赋值了，只是值为null。
37、什么是作用域？什么是作用域链？
作用域是一个变量发挥作用的范围，在 Javascript 中，作用域分为 全局作用域 和 函数作用域。在函数作用域中访问变量时，会先在自身作用域中寻找，如果在自身作用域中没有找到值，就会向它的上一级作用域寻找，一直到全局作用域，这一个查找过程形成的链条就叫做作用域链。
38、在浏览器中输入url后发生了什么？
简答：
DNS域名解析
建立TCP连接
发起HTTP请求
接受响应结果
浏览器解析html
浏览器布局渲染
答法二：
（1）从浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名找到服务器，而是通过IP地址找到对应的服务器，DNS将域名解析为IP地址；
（2）浏览器通过IP地址找到服务器，建立TCP连接，通过三次握手以同步客户端和服务端的序列号和确认号，并交换TCP窗口大小的信息；
（3）TCP三次握手结束后，开始发送HTTP请求；
（4）服务器处理请求，并返回HTTP响应报文；
（5）浏览器拿到响应文本HTML后，解析渲染页面；
（6）当数据传送完毕后，断开TCP连接。
39、面向过程和面向对象的区别
1.面向对象
把构成问题事务分解成各个对象，将功能等通过对象来实现，将功能封装进对象之中，让对象去实现具体的细节。
2.面向过程
分析出解决问题的步骤，然后用函数依次实现这些步骤，依次调用解决问题。
40、判断一个字符串是否回文？（不能使用reverse等api）
function huiwen(str){
let len = str.length;
if(len === 1){
return true;
}
let str1= '';
for(let i = len-1; i >= 0; i--){
str1 += str[i]
}
if(str === str1){
return true;
}
return false;
}
41、归并排序：
function mergeSort(arr) {
let len = arr.length;
if (len < 2) return arr;
let mid = Math.floor(len / 2);
let left = arr.slice(0, mid);
let right = arr.slice(mid);
return merge(mergeSort(left), mergeSort(right));
}
function merge(left, right) {
let result = [];
while (left.length > 0 && right.length > 0) {
if (left[0] <= right[0]) {
result.push(left.shift());
} else {
result.push(right.shift());
}
}
while (left.length) result.push(left.shift());
while (right.length) result.push(right.shift());
return result;
}
var arr = [3,5,7,1,4,56,12,78,25,0,9,8,42,37];
var res = mergeSort(arr);
console.log(arr, res)
42、如何给未生成的dom添加事件？
事件委托：
//为动态添加的li添加点击事件，方法是将点击事件绑定到父元素身上，即ul（事件委托）
const ul = document.getElementsByTagName('ul');
//监听li点击事件
ul.addEventListener('click', function (ev) {
let target = ev.target || ev.srcElement;//ev.srcElement兼容ie
if (target.nodeName.toLowerCase() == 'li') {
alert(target.innerHTML);
console.log(target);
}
});
43、keyCode不区分大小写，a或者A的keycode都是65
44、css中没有父元素选择器
45、max-age的单位是秒,这个指令告诉浏览器端或者中间者，响应资源能够在它被请求之后的多长时间以内被复用。
46、script 标签中的 async 和 defer 属性
<script src='xxx'></script>
<script src='xxx' async></script>
<script src='xxx' defer></script>
浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该 JS 脚本的代码内容，然后让 JS 引擎执行该代码，当代码执行完毕后恢复解析。
当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。
当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码。
47、css单位
48、把鼠标移到按钮并点击时，会产生一串什么样的事件？
hover -> focus -> active
悬停 -> 聚焦 -> 响应
完整的事件顺序为：link visited hover focus active
简记：LV好烦啊–lvhfa
49、Window.self 属性
定义和用法
self 属性返回指向当前 window 对象的引用，利用这个属性，可以保证在多个窗口被打开的情况下，正确调用当前窗口内的函数或属性而不会发生混乱。
self 属性是只读的。
语法
window.self
注：window、self、window.self 是等价的。
window下没有message属性
50、手写一个方法,取两个数组的交集
function arr(arr1, arr2){
let array=[]
arr1.forEach((item)=>{
if(arr2.includes(item)){
array.push(item)
}
})
return array
}
51、请手动实现数组的flat方法。
let a=[1,2,[3],[[4,5],6]]
a.fakeFlat(Infinity)——输出:[1,2,3,4,5,6]
function myFlat(arr){
let arrStr = JSON.stringify(arr)
arrStr='[' + arrStr.replace(/\[|\]/g,'')+ ']'
return JSON.parse(arrStr)
}
52、聊一聊 CommonJs以及Es6的模块机制
简述：
commonJs模块输出的是一个值的拷贝,ES6模块化输出的是值的引用;
commonJs模块是运行时加载,ES6模块是编译时输出接口。
commonJs：
* 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
* 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
* 当使用require命令加载某个模块时，就会运行整个模块的代码。
* 当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
* 运行时加载
ES6：
* ES6模块中的导入导出值属于【动态只读引用】。
* 对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
* 对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
* 编译时输出接口。
53、说一下浏览器的强缓存和协商缓存,相关的控制字段有哪些
强缓存利用http头中的 Expires和 Cache- Control两个字段来控制,用来表
示资源缓存时间。
协商缓存由服务器来确定缓存的资源是否可用,所以客户端与服务器要通
过某种标识来进行通信,从而让服务器判断请求资源是否可以缓存访问。
控制字段有Etag和None- Match
54、请实现一个函数,满足以下功能
add(1); // 1
add(1)(2); // 3
add(1)(2)(3)； // 6
add(1)(2, 3); // 6
add(1, 2)(3); // 6
add(1, 2, 3); // 6
function currying(fn, length) {
//第一次调用获取函数 fn 参数的长度，后续调用获取 fn 剩余参数的长度
length = length || fn.length;
//currying 包裹之后返回一个新函数，接收参数为 ...args
return function (...args) {
//新函数接收的参数长度是否大于等于 fn 剩余参数需要接收的长度
return args.length >= length
? fn.apply(this, args)//满足要求，执行 fn 函数，传入新函数的参数
: currying(fn.bind(this, ...args), length - args.length)
// 不满足要求，递归 currying 函数，新的 fn 为 bind 返回的新函数（bind 绑定了 ...args 参数，未执行），新的 length 为 fn 剩余参数的长度
}
}
55、原生html、css、javascript渲染过程
通过HTML解析器将HTML解析为DOM，构建DOM树；
通过CSS解析器将CSS解析为CSSOM(CSS对象模型)树；
当解析器遇到外部资源，如JavaScript 文件时，解析器会加载 JS 文件，在进行解析的同时会阻止对HTML的解析。
CSSOM 与 DOM一起构成渲染树，浏览器依次使用渲染树来布局和绘制网页，渲染引擎从顶部开始一直向下遍历渲染树，计算应显示每个节点的坐标，将像素绘制到屏幕上。
56、为什么img标签是inline元素还可以设置宽高？
因为img标签是可替换元素。在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。典型的可替换元素有：iframe标签、video标签、embed标签。
57、 css布局总结
六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为header、container、footer。header和footer各自占领屏幕所有宽度，高度固定。然后container部分是一个三栏布局。圣杯布局的缺陷在于 center 是在 container 的padding中的，因此宽度小的时候会出现混乱。
圣杯布局大致如下：
双飞翼布局给center 部分包裹了一个 main 通过设置margin主动地把页面撑开。
Flex布局是由CSS3提供的一种方便的布局方式。
绝对定位布局是给container 设置position: relative和overflow: hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。 left 向左浮动，right 向右浮动。center 使用绝对定位，通过设置left和right并把两边撑开。 center 设置top: 0和bottom: 0使其高度撑开。
表格布局的好处是能使三栏的高度统一。
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。
58、面向对象的三大基本特征，五大基本原则
三大基本特征：封装、继承、多态
五大基本原则：
1、单一职责原则（SRP）
2、开放封闭原则（OCP）
3、里氏替换原则（LSP）
4、依赖倒置原则（DIP）
5、接口隔离原则（ISP）
59、判断一个数字是不是2的乘方
方法一：将这个数num直接除2，若余数为0，则num/2再除2，再判断余数是不是0，是的话继续按上一步来，直到最后为num=1：
function check(num){
if(num != 1){
while(num != 1){
if(num%2 == 0){
num = num / 2;
}else{
return false;
}
}
if(num === 1)
return true;
}
if(num === 1)
return true;
}
方法二：通过二进制的方法可以判断一个数num是不是2的n次方幂，由规律可知，只要是2的次方幂，必然是最高位为1，其余为0；当num-1时，最高位是0，其余是1。
8 的二进制 1000 8-1 的二进制 0111 按位与运算 1000&0111 ---> 0000 所以8是2的n次方幂。
9 的二进制 1001 9-1 的二进制 1000 按位与运算 1001&1000 ---> 1000 所以9不是2的次方幂。
代码实现如下：
function check(num){
if(num === 1)//1是2的0次方
return true;
return (num > 0) && ((num & (num - 1)) == 0);
}
60、判断一个数字是不是奇数
function check(num){
num=parseInt(num);
if(num%2 === 0){
console.log("偶数");
}else{
console.log("奇数");
}
}
61、写出如下javascript的运行结果：
（1）
var name = 'laruence';
function echo() {
alert(name);
var name = 'eve';
alert(name);
alert(age);
}
echo();
第一个name输出为undefined；第二个name输出为’eve’；第三个报错
（2）
（3）
var FUN = function () {
function a() { console.log('a1'); };
function b() { console.log('b1'); };
function c() { console.log('c1'); };
var a = function() { console.log('a2'); };
var b = function() { console.log('b2'); };
var c = function() { console.log('c2'); };
};
Object.prototype.a = function () { console.log('a3'); };
Function.prototype.b = function () { console.log('b3'); }
FUN.prototype.c = function () { console.log('c3'); }
var fun = new FUN();
fun.a();//输出'a3'
fun.b();//报错
fun.c();//输出'c3'
FUN.a();//输出'a3'
FUN.b();//输出'b3'
FUN.c();//报错
61、Fibonacci数列
function fibonacci(n){
const a=[0,1,1];
if(a[n]){return a[n]}
else{
for(let i=3;i<=n;i++){
a[i]=a[i-1]+a[i-2]
}
}
return a[n];
}
62、对跨浏览器WEB前端开发的认识，以及方法
答案未知，可能是处理兼容性，加浏览器前缀这些。
63、
64、fetch和Ajax的区别
Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: ‘include’})；
服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject；Fetch 语法简洁，更加语义化，基于标准 Promise 实现，支持 async/await，有可能会逐渐代替ajax。所有版本的 IE 均不支持原生 Fetch，fetch 是全局量 window 的一个方法。
一个简单的示例：
try {
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
// 注：这段代码如果想运行，外面需要包一个 async function
Ajax书写麻烦，最重要的特性就是可以局部刷新页面
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
