js汇总笔记

1.声明了变量，但没有数据的时候，变量就是undefined

2.parseInt（） 和parseFloat（）使用时遇到非数字直接截取，Number（）出现非数字直接NAN

3.与运算&&的优先级比或运算 ||要高

4. 分支： if-else if-else 、switch 

5.循环：for 、while 、do... while 、 break 、 countinue

6. 函数、箭头函数、return 

7. 数组api ：
push、pop、shift、unshift、splice、slice（新）、concat（新）、indexOf、lastIndexOf、includes、sort、reverse、join、fill、copyWithin、toString、flat、flatMap
find、some、every、fliter、forEach、map、reduce、reduceRight
Array.from()、Array.isArray(arr)
8.字符串api：
length、chartAt、charCodeAt、indexOf、lastIndexOf、includes、startsWith、endsWith、split([])、slice、subStr、subString、toLowerCase、toUpperCase、concat、replace、match、search、trim、trimStart、trimEnd、valueOf、toString、repeat、padStart、padEnd、parseInt、parseFloat

浏览器特点

浏览器是一个多进程的应用程序，可以同时执行很多任务。

浏览器最核心的部分是内部部分

js引擎：v8引擎解析js代码

GUI引擎：渲染引擎，主要负责内容的渲染

定时器执行引擎：只要你的代码中有定时器任务，就会用定时器引擎执行

异步请求引擎：只要代码中出现异步请求，浏览器就会使用异步引起来处理，不会影响其他代码的执行

事件触发引擎：当你绑定了事件过后，就将任务交给事件触发引擎执行。

事件循环过程

1. 主线程先执行代码，分析全局变量，函数等等内容
2. 将全局变量函数等内容让如到全局上下文中，压入执行栈栈低
3. 开始执行函数代码，压入栈，执行函数内部代码
4. 函数内部代码执行是与javascript库绝对，如果是同步代码就立马执行，异步代码就交给异步模块处理，定时器就交给定时器模块处理
5. 异步代码或定时器到了执行时机会到异步任务队列里面去排队等候主线程执行
6. 继续执行主线程代码
7. 主线代码执行完毕后会去检测异步任务队列是否还有任务，如果有就执行，执行完毕后继续反复检测，直到异步任务队列任务全部结束。
8. 主线程结束

宏任务和微任务

微任务先执行，宏任务后执行

微任务：promise.then、process.nextTick (node.js里面)

宏任务：setTimeout、setInterval、IO等

判断数据类型的方法

typeof

//返回字符串的类型
 string、number、symbol、undefined 、boolean、object、function

• 对于基本类型，除 null 以外，均可以返回正确的结果，对于 null ，返回 object 类型。
• 对于引用类型，除 function 以外，一律返回 object 类型。
• 对于 function 返回 function 类型。
• typeof NaN 返回number (isNaN结合判断)

instanceof

表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。 在这里需要特别注意的是：instanceof 检测的是原型链， 只能用来判断两个对象是否属于实例关系， 不能判断一个对象实例具体属于哪种类型，所有的引用数据类型对象都是Object的实例

instanceof对于引用类型的支持很好，但他是无法对原始类型进行判断，所以一般都是在typeof判断为object时才使用instanceof，

var obj = {};
obj instanceof Object;           //true

var arr = [];
arr instanceof Array/Object;           //true

var now = new Date();
now instanceof Date/Object;             //true

var func = function(){};
func instanceof Function/Object;        //true

var str = "string";
str instanceof String;           //false

constructor

返回对象相对应的构造函数，实现判断，类似于instance of

console.log([].constructor == Array);
console.log({}.constructor == Object);
console.log("string".constructor == String);
console.log((123).constructor == Number);
console.log(true.constructor == Boolean);

Object.prototype.toString.call()

可以通用的来判断原始数据类型和引用数据类型 也可以用 {}.toString.call()

Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的引用

BOM 内置对象

window location   history    screen  navigator

• setInterval

• setTimeout

• clearInterval

• clearTimeout

DOM原生和jquery

事件

onload、 resize、 click、change、keydown、keyup、keypress、focus、blur、mousewheel、dblclick、mousemove、nouseenter、mouseleave、

事件执行阶段

概念

• 当用户触发某个事件时，该事件的完整的执行流程就是事件执行流程(阶段)

流程

• 第一阶段：先执行一次捕获，即父标签触发(最顶层能够到document),一直到具体的子标签触发。
• 第二阶段：事件目标阶段：真正用户要执行事件的子标签进行触发
• 第三阶段：执行一次冒泡。由具体的子标签到父标签依次触发

冒泡捕获

 冒泡
- 从具体触发事件的子标签开始冒泡，会依次的去触发父标签及祖先标签的事件。
捕获
- 从document开始触发事件，一直触发到具体的子标签。

事件处理

##事件
DOM 0级
- 标签变量名.on事件名 = function(){}
DOM2级
//添加事件处理程序
标签变量名.addEventListener('事件名',事件触发要执行的函数,是否是捕获阶段处理)；
//删除事件处理程序
标签变量名.removeEventListener('事件名',事件触发要执行的函数(具体函数名),是否是捕获阶段处理)；

dom2级可以选择在捕获阶段或冒泡阶段进行处理。而dom0级只能在冒泡阶段处理

##事件委托
document.body.addEventListener('click',function(e){
            //区分：class id nodeName
            var classname = e.target.getAttribute('class');
    		//执行逻辑
});
##event对象：
target、currentTarget、stopPropagation()、preventDefault()、clientX、clientY、pageX、pageY

正则表达式

本地存储

localStorage、sessionStorage
api：setItem()、getItem()、removeItem()、clear()、valueOf()//获取全部数据

canvas标签

#基本使用
- 不要使用css样式设置宽高，要在canvas中直接设置宽高
#步骤
 //1.获取画布
var cvs=document.getElementById("cvs");
//2.获取绘图工具
var ctx=cvs.getContext("2d");
//移动坐标系（默认左上角）
 ctx.translate(250,250);
##绘制图像基本思路
- 1.绘制路径（路径是不可见的没有颜色的）
- 2.路径绘制完毕之后，可以选择对路径的轮廓着色（颜色 粗细）
- 3.路径绘制完毕之后，可以选择对该路径的封闭区域着色，一条直线没有封闭区域，如果路径是闭合的封闭区域就是中间范围，如果路径不闭合，会自动从开始点到结束点之间进行直线连接（颜色）。

api：
beginPath()  moveTo(x,y)  closePath() 
//绘制线段
lineTo(x,y) lineWidth  strokeStyle  stroke()  fillStyle  fill()
//绘制矩形
strokeRect(0,0,200,100)  fillRect(0,0,200,100)
//绘制文字
 font  fillText()
//绘制圆形
arc(0,0,200,0,0.5*Math.PI)

实现屏幕截图

使用第三方依赖库（框架）HTML2Canvas实现屏幕截图保存

1.下载HTML2Canvas的js文件

2.引入到网页中,通过HTML2Canvas提供的html2canvas函数实现

拖拽

百度地图

文件（图片、视频）上传—不借助框架

Mock

防抖节流

函数防抖

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避免因为用户的多次点击向后端发送多次请求。(执行最后一次事件)

 function fangDou(fn, delay) {
            //设置一个定时器对象
            let timer = null;
            return function () {
                if (timer) {
                    clearTimeout(timer);
                    timer = setTimeout(fn, delay);
                } else {
                    timer = setTimeout(fn, delay);
                }
            }
        }

• 按钮提交场景：防⽌多次提交按钮，只执行最后提交的⼀次
• 服务端验证场景：表单验证需要服务端配合，只执⾏一段连续的输⼊事件的最后⼀次，还有搜索联想词功能类似⽣存环境请⽤lodash.debounce

函数节流

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过事件节流来降低事件调用的频率。（执行第一次事件）

  function throttle(fn, delay) {
            let flag = true;
            return function () {
                if(flag){
                    return false
                }
                flag = false;
                setTimeout(() => {
                    fn();
                    flag = true;
                }, delay);
            }
        }

1、搜索框input事件–常用防抖

2、页面窗口变化resize事件 --常用节流