对应的前端知识总结归纳（常被问到的知识三：JS版块）

大家好，我是梅巴哥er。本篇介绍JS版块的知识总结。

前端知识总结系列：

`JS版块`

常用的学习网站：

知识总结：

click在ios上有300ms延迟，原因及如何解决？
- 参考博文：延迟解释和解决
addEventListener参数
- 参考博文：参数及含义
说说前端中的事件流
- 参考博文：什么是事件流
- 参考博文：事件流
如何让事件先冒泡后捕获
- 参考博文：先冒泡后捕获
说一下事件委托
- 参考博文：事件委托
- 也可参考这个博文：进入页面Ctrl+f 事件委托
mouseover和mouseenter的区别
- mouseenter不会冒泡
- mouseover会冒泡
- 参考博文、：区别
js的new操作符做了哪些事情
- 第一步：创建一个空对象，将它的引用赋给 this，继承函数的原型 let this = {}
- 第二步：通过 this 将属性和方法添加至这个对象 this.name = name
- 第三步：最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象） let child = this
- 参考博文1·：简单解释
- 参考博文2：详细解释
- 参考博文3：图文解释
js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
- clientHeigh：返回自身包括padding、内容区的高度，不含边框，返回值不带单位
- scrollHeight : 返回自身实际的高度，不含边框，返回值不带单位
- offsetHeight : 返回自身包括padding、边框、内容区的高度，返回值不带单位
- scrollTop : 返回被卷去的上侧距离，返回值不带单位
- offsetTop : 返回元素相对带有定位父元素上方的偏移
- clientTop : 返回元素上边框的大小
- 参考博文：js位置详解
js拖拽功能的实现（代码）

<!DOCTYPE HTML>
<html>
 <head>
  <title>offset案例：鼠标拖动盒子移动</title>
  <meta charset="utf-8" />
  <style>
   * {
     
     
    margin: 0;
    padding: 0;
    }
   #box {
     
     
    position: relative;
    width: 200px;
    height: 200px;
    background-color: pink;
    cursor: move;
    }
  </style>
 </head>
 <body>
  <div id="box"> </div>
  <script>
   //鼠标按下触发 mousedown  鼠标移动 mousemove 鼠标松开 mouseup
   var box = document.getElementById('box');
    //鼠标按下 有一个坐标
    /*var x2 = null;
    var y2 = null;
    var x1 = null;
    var y1 = null;*/
   box.addEventListener('mousedown', function(e) {
     
     
     //先算出鼠标按下时，鼠标在盒子内的坐标
     var x1 = e.pageX - box.offsetLeft;
     var y1 = e.pageY - box.offsetTop;
     //console.log(x1 +','+ y1);

    //鼠标移动后的坐标减去鼠标在盒子内的坐标，就是盒子的坐标了
     document.addEventListener('mousemove', move)
      function move(e) {
     
     
       var x2 = e.pageX - x1;
       var y2 = e.pageY - y1;
       //console.log(x2 +','+ y2);
       box.style.left = x2 + 'px';
       box.style.top = y2 + 'px';
        }
     //鼠标松开 移除移动事件，让盒子不再跟着鼠标走了
      document.addEventListener('mouseup', function() {
     
     
        document.removeEventListener('mousemove',move);    
       })

    })

  </script>
 </body>
</html>

异步加载js的方法
- 常用的JS方法：window.addEventListener('load', function() {...})
- 常用的JQ方法：$(function(){...})
- 参考博文：其他方法异步加载
js的节流和防抖
- 参考我的博文：节流和防抖
JS中的垃圾回收机制
- 1，标记清除
- 2，引用计数
- 3，手动回收
- 参考博文1：垃圾回收的两种方法介绍
- 参考博文2：机制
对象深度克隆的简单实现
- 深克隆方法：var obj = Object.assign(target, …source)
- 深度克隆手写方法：核心思想是判断被克隆对象的数据类型，其次是遍历，最后是递归。

// 用递归方法
function clone(obj) {
    
     
	var buf;
	if(obj instanceof Array) {
    
    
		buf = [];	//创建一个空数组
		var i = obj.length;
		while(i--) {
    
    
			buf[i] = clone(obj[i]); 
		}
		return buf;
	} else if(obj instanceof Object){
    
    
		buf = {
    
    };
		for(var k in obj){
    
    
			buf[k] = clone(obj[k]);
		}
		return buf;
	} else {
    
    
		return obj;
	}
}
 
 
//测试代码
var obj1 = {
    
    
    a: 1,
    b: {
    
    
        x: [2, 3]
    }
}
var b = clone(obj1);
console.log(b);

实现一个once函数，传入函数参数只执行一次
- 参考博文：once函数
js监听对象属性的改变
- 参考博文：监听
- 参考博文：监听
== 和 ===、以及Object.is的区别
- 参考博文：区别
setTimeout、setInterval和requestAnimationFrame之间的区别
- 参考博文：区别
用setTimeout来实现setInterval
- 参考博文：实现setInterval
js怎么控制一次加载一张图片，加载完后再加载下一张
- 参考这个比较花的博文：加载
Function.proto(getPrototypeOf)是什么？
- 参考这个博文：是什么
- 上面博文说的图，就是原型链，参考这个帖子看这个图
- 或者看我这篇博文里的原型链图
实现js中所有对象的深度克隆（包装对象，Date对象，正则对象）
- 参考博文：深克隆
js判断类型的方法有哪些
- 参考博文：有哪些方法
- 还可以参考博文：有原理讲解
数组常用方法有哪些
- 参考博文：数组方法
数组去重如何做
- 参考博文：去重
事件代理在捕获阶段的实际应用
- 可以在父元素层面阻止事件向子元素传播，也可代替子元素执行某些操作。
- 参考博文：应用
去除字符串首尾空格的方法有哪些，说出尽可能多的方法
- 参考博文：去除空格
能来讲讲JS的语言特性吗
- 参考博文：封装继承多态
如何判断是否为数组
- 参考博文：判断数组
typeof怎么判断数组
- 参考博文：typeof数组
JS如何实现跨域，都有哪些方法
- 参考博文：跨域
Js基本数据类型
- 参考博文：基本数据类型
js深度拷贝一个元素的具体实现，写代码
- 参考博文：深拷贝的不同方法
- 参考博文：浅拷贝、深拷贝的分析
JS怎么实现全排列的算法，试写一段代码来实现。（全排列就是给定一个字符串，输出该字符串所有排列的可能。如输入“abc”，输出“abc,acb,bca,bac,cab,cba”。）
不同数据类型的值的比较，是怎么转换的，有什么规则
- 参考博文：转换
null == undefined，为什么？
- JS规范中，这俩值规定是相等的。
- 为啥呢？有不同的理解，参考博文：俩值相等为啥
什么是按需加载
- 参考博文：按需加载
说一下什么是virtual dom
- 参考博文：virtual dom
- 参考博文：详细解释
写一个函数，第一秒打印1，第二秒打印2 。（用尽可能多的方法实现）
简单介绍一下symbol
- 参考博文：symbol
什么是事件监听
- 参考博文：事件监听
说说C++,Java，JavaScript这三种语言的区别
- 参考博文：语言区别
js原型链，原型链的顶端是什么？Object的原型是什么？Object的原型的原型是什么？在数组原型链上实现删除数组重复数据的方法。
- 一两句话说不清楚，参看原型链
讲讲事件委托以及冒泡的原理
- 参考博文：原理和解释
写个函数，可以转化下划线命名到驼峰命名
深浅拷贝的区别和实现
- 参考博文：浅拷贝、深拷贝的分析
JS中string的startwith和indexof两种方法的区别
- 参考博文：区别
js字符串转数字的方法
有了解过事件模型吗，DOM0级和DOM2级有什么区别，DOM的分级是什么
平时是怎么调试JS的
JS的基本数据类型有哪些，基本数据类型和引用数据类型的区别，NaN是什么的缩写，JS的作用域类型，undefined==null返回的结果是什么，undefined与null的区别在哪，写一个函数判断变量类型
- 以上4个问题，参考阅读：处理
setTimeout(fn,100);100毫秒是如何权衡的
怎么获得对象上的属性：比如说通过Object.key（）
了解事件代理吗，这样做有什么好处
给出以下代码，输出的结果是什么？原因？ for(var i=0;i<5;i++) { setTimeout(function(){ console.log(i); },1000); } console.log(i)
- 以上几个问题，参考阅读权衡----输出结果
js加载过程阻塞，解决方法
js对象类型，基本对象类型以及引用对象类型的区别
JavaScript中的轮播实现原理？假如一个页面上有两个轮播，你会怎么实现？
写一段代码，来计算输入的一个年份中有多少周
引用类型常见的对象
assign的深拷贝
arguments
Eventloop
- 以上问题，参考阅读：参考
jquery源代码考查
给定jquery的一个方法，讲讲它的实现原理
- 以上俩问题，参考阅读：jquery
关于dom的api有什么
- 参考阅读：dom的api
知道touch事件吗
- 参考博文：touch事件
数组移除第一个元素的方法有哪些？
- 参考博文：移除
把多维数组变成一维数组的方法
- 参考博文：拉平数组
数组的去重，尽可能写出多个方法
- 参考博文：12种方法
如果有一个大的数组，都是整型，怎么找出最大的前10个数
- 参考算法：找数字算法
知道数据结构里面的哪些常见的数据结构
- 参考博文：数据结构
找出数组中第k大的数组出现多少次，比如数组【1，2，4，4，3，5】第二大的数字是4，出现两次，所以返回2 。（考查实际代码操作，这块是考查比重最大的）
- 参考博文：找数字
合并两个有序数组
给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）
有一个矩形，用一个矩形（这个矩形和上个矩形没有任何关系）去裁剪原来那个矩形，剩下的部分，怎么用一个线分成两个面积相等的部分

对应的前端知识总结归纳（常被问到的知识三：JS版块）

JS版块

猜你喜欢

`JS版块`