本周面试总结

1.null和undefined的区别是什么?
  •  null
1. 表示“没有对象”，即该处不应该有值
2. typeof null = object
3. 转为数值为0
4. 作为函数的参数，表示该函数的参数不是对象；作为对象原型链的终点
  • undefined
1.表示“无”的原始值或者说表示“缺少值”，就是此处应该有一个值但是还没有定义
2.typeof undefined = undefined
3.转为数值为NaN
 
在JavaScript中，null 和 undefined 几乎相等
在 if 语句中 null 和 undefined 都会转为false两者用相等运算符比较也是相等
console.log(null==undefined); //true 因为两者都默认转换成了false console.log(typeof undefined); //"undefined" console.log(typeof null); //"object" console.log(null===undefined); //false "==="表示绝对相等， null和undefined类型是不同
 
2.怎样在不知道计时器个数的情况下清除所有计时器
定时器返回值其实就是一个整数，并且是顺序生成的
你可以写一个循环清楚定时器
如：
var end = settimeout(function(){},1);
var start = (end -100)>0?end-100:0;
for(var i=start;i<=end;i++){
cleartimeout(i);
}
 
 
3.动态/静态 Collection 与 NodeList 的区别
 
HTMLCollection 是 HTML 元素的集合。
NodeList 是一个文档节点的集合。
 
 
  • HTMLCollection和NodeList的共同点：
    1. 都是类数组对象，都有length属性
    2. 都有共同的方法：item，可以通过item(index)或者item(id)果中的元素来访问返回结
    3. 都是实时变动的（live），document上的更改会反映到相关对象上（例外：document.querySelectorAll返回的NodeList不是实时的）
  • HTMLCollection和NodeList的区别是：
    1. NodeList可以包含任何节点类型，HTMLCollection只包含元素节点（elementNode），elementNode就是HTML中的标签
    2. HTMLCollection比NodeList多一项方法：namedItem，可以通过传递id或name属性来获取节点信息
 
4.JS数组的深浅拷贝(JS中数组就是对象)
 
深拷贝和浅拷贝的区别
 
浅拷贝只是拷贝一层,更深层次对象级别的只拷贝地址
深拷贝拷贝多层 , 每一级别的数据都会拷贝
 
怎么样实现浅拷贝
创建一个空对象 , 遍历复制对象 , 依次填入空对象
ES6中使用Object.assign (创建新对象,拷贝的旧对象)
使用解构赋值配合剩余参数
使用拓展运算符
实现深拷贝的方法
使用递归函数将对象内部的对象再次遍历拷贝
数组判断放在对象判断之前
 
 
5.面试题：普通绑定事件的方式与事件监听绑定事件的方式之间的区别？？？
普通绑定事件的方法不支持添加多个事件,最下面的会覆盖上面的 事件无法取消
事件监听绑定事件可以添加多个事件, 支持事件冒泡 事件捕获 但是不兼容低版本IE浏览器
 
1.添加监听事件可以对动态生成的元素也生效。而普通事件就不行了。
2.普通事件只能执行一个回调函数，监听事件可以添加n个。
 
  • 事件监听形式绑定鼠标滚轮事件
语法：
addEventListener（“事件名”，回调函数，是否将事件传播的形式设置成捕获）（第三个参数可以将js默认的事件传播方式修改为捕获）
注意：不管将传播方式修改成哪一种，事件流模型永远每次都要完整的执行
 
Js里的事件，在触发之后，是会传播的
js里的时间流模型表示的是一个事件触发的完整步骤，该步骤一共有三步
  1. 事件捕获：事件流模型第一阶段，当某个节点触发事件后，系统会从根节点开始，一直向下寻找，直到找到真正的触发事件的节点，沿途在直系继承树上绑定了相同事件的节点回按照顺序一次触发
  2. 事件触发：事件流模型第二阶段，真正触发事件的节点，触发事件
  3. 事件冒泡：事件流模型第三阶段，真正触发事件的节点触发完毕之后，会沿着直系继承树一直向上传递该事件，一直传递到根节点，沿途绑定了相同事件的节点会依次触发
 
JS里默认的事件传播方式是事件冒泡
 
 
 
 
 
6.面试题：请你谈一谈JS里的"事件流模型"
JS里事件流模型表示的是一个事件触发的完整步骤，该步骤一共有三步
* 1.事件捕获：事件流模型的第一阶段，当某个节点触发事件后，系统会从根节点开始，一直向下寻找，直至找到真正触发该事件的节点。沿途在直系继承树上绑定了相同时间的节点会按照顺序依次触发。
* 2.事件触发：事件流模型的第二阶段，真正触发事件的节点，触发事件
* 3.事件冒泡：事件流模型的第三阶段，真正触发事件的节点触发之后，会沿着直系继承树一直向上传递该事件，一直传递到根节点，沿途绑定了相同事件的节点会依次触发。
   事件流：就是事件的流向，先捕获，再到事件源，最后再冒泡，一共分三个阶段：捕获阶段，事件源，冒泡阶段。
 
0
  • 事件冒泡(Event Capturing): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父节点。
  • 事件捕获(Event Bubbling): 与事件冒泡相反。事件最开始由不太具体的节点最早接受事件, 而最具体的节点最后接受事件。
 
 
 
7.回流重绘的区别
  • 重绘：当render （渲染树）中的元素需要更新属性，而这些属性之影响元素的外观，不影响布局时，浏览器就会触发重绘。
  • 回流：当渲染树中的元素需要更新属性，而这些属性的变化会影响布局时，浏览器就会触发回流。
  • 结论：回流必定触发重绘，而重绘不一定出发回流。
 
0
 
 
8.js数组去重
 
去重无非就两类：
  1. 两层循环法
2.利用语法自身键不可重复性
其他的都是用了语言不通的api,算不上单独的一种方法，比如indexOf 和includes 两层循环 都是同一类
 
1.Set()方法
Set是es6新增的数据结构，key不能重复，存储任意类型的唯一值。缺点就是不能去空'{}'。
方法一：
let aa = Array.from(new Set(arr))
方法二：
let cc =[...new Set(arr)]
 
2.includes 方法，检测是否包含指定的子字符串。 匹配成功返回 true，否则返回 false
function unique(arr){ let newO = []; for(let i = 0; i < arr.length; i++){ if(!newO.includes(arr[i])){ newO.push(arr[i]) } } return newO; }
 
3.indexOf 方法，找到匹配项，返回所在的索引
function unique(arr){ let newO = []; for(let i = 0; i < arr.length; i++){ if( newO.indexOf(arr[i]) < 0){ newO.push(arr[i]) } } return newO; }
 
9.10大经典排序算法
 
两个相邻的元素比较，两两交换。外层循环控制趟数，内层循环比较次数。
0
 
0
1.
0
2.
0
优化一下冒泡排序的算法
假如从开始的第一对到结尾的最后一对，相邻的元素之间都没有发生交换的操作，这意味着右边的元素总是大于等于左边的元素，此时的数组已经是有序的了，我们无需再对剩余的元素重复比较下去了。
var arr1 = [4, 1, 5, 6, 8, 3, 7], temp; for (var i = 0; i < arr1.length - 1; i++) { for (var j = 0; j < arr1.length - i - 1; j++) { //-1为了 防止下标越界 -i为了效率 if (arr1[j] > arr1[j + 1]) { temp = arr1[j]; arr1[j] = arr1[j + 1]; arr1[j + 1] = temp } } }
 
2.sort 排序 :
按照ascii码中字符位置排序
arr.sort():
var arr = new Array(6)
function sortNumber(a,b){ return a - b //从小到大排序 反之则 b - a }
 
sort排序方法和其他方法的差别：https://blog.csdn.net/qq_30100043/article/details/72763614
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
posted @ 2021-03-26 21:28  前端乔  阅读(43)  评论(0)  编辑  收藏  举报