js要点知识（一）【修改中】

js

作用域

 概念：就是变量在某个范围内起作用和效果，目的是为了提高程序的可靠性，减少命名冲突。
 js的作用域类型（es6之前）：全局作用域、局部作用域。
 全局作用域：整个script标签或者单独的js文件。
 局部作用域：只在函数内部有效果（函数作用域）。

作用域链

 概念：内部函数访问外部函数变量，采取的是链式查找的方式来决定取哪个值，就称作作用域链，就近原则。

*js没有块级作用域，是在es6 声明块级作用域 *

js预解析

   概念： js代码是由浏览器中js引擎来执行的，分为两步：预解析和代码执行
   预解析：js引擎会把js里面所有的var 还有function 提到当前作用域的最前面
            预解析分为：变量预解析（变量提升） 和 函数预解析（函数提升），只提升，不赋值
        
   代码执行：按顺序

数据类型

  基本数据类型： string boolean number null undefined
  引用数据类型：object（Array  Object Function Map Set）
  区别：JS基本数据类型的变量存放的是基本类型数据的实际值；而引用数据类型的变量保存对它的引用，即内存地址。

深浅拷贝

 浅拷贝：将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用。
 常用方法：for in 遍历原对象的属性、Object.keys()
 深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”。
 JSON.parse(JSON.stringify(obj))   lodash第三方插件
 链接：https://blog.csdn.net/weixin_45695727/article/details/107142760

闭包

 概念:能够访问到其他函数作用域中的对象的函数，称为闭包
 作用：访问其他函数内部的变量，避免全局变量被污染。
 闭包能做什么：读取函数内部的变量；这些变量的值始终保持在内存中，不会在外层函数调用后被自动清除。
 两种写法，函数内部有函数、回调函数

this基本概念

this.指向调用函数的对象
非严格条件下，指向window
在构造函数中，this指向实例化出来的对象
call和apply调用，this指向第一个调用的对象

EventLoop事件循环

  js是单线程的，它的异步和多线程都是通过事件循环来实现的
  宏任务与微任务：
        宏任务：setTimeout sertInterval Ajax Dom
        微任务：Promise 微任务优先大于宏任务
  先执行同步任务，后执行异步任务（异步任务中先执行微任务 后执行宏任务）（先进先出）
  主线程在执行过程中遇到异步任务时，将异步任务放到事件循环中，待主线程同步任务执行完成后，取出异步任务依次执行

ajxa实现原理

当前页面局部刷新

var xhr = new XMLHttpRequest()//创建xhr对象
xhr.open('get','http://192.169.1.1:808/get') //传入请求方式和地址
xhr.send() //发送请求
xhr.onload = function(){
    console.log(xhr.request)
}//获取服务器与客户端的响应数据

同源策略

同源是指：同协议 同域名 同端口号都相同
跨域资源嵌入：
script标签嵌入跨域脚本

link标签嵌入css

通过img展示的图片

通过video audio播放的多媒体资源

通过object embed嵌入的插件

通过@font-face引入的字体

通过iframe载入的任何资源

解决跨域

 跨源网络访问的三种方式：跨域写操作，跨域资源嵌入、跨域读操作（异步请求）
 jsonp跨域 （实际项目中不常见）
 cors跨域：引入cors插件，浏览器规范：头文件；vue框架中，代理（前端发起请求，经过代理服务器转发），服务器与服务器之间没有跨域
        1、实现关键：需要服务器实现cors接口，浏览器需要支持（IE10以上支持）
        2、浏览器发出跨域请求分为两种：
             a、简单请求
             b、非简单请求

面向对象

两大编程思想：
面向过程：首先分析解决问题的步骤，再写代码
面向对象：功能封装在对象内部，实现功能 通过调用对象方法来实现

面向对象的三大特性

 封装：工厂模式、构造函数模式、原型模式
 多态、继承
 *如何区分数组和对象？*
  ：instanceof    构造函数

原型和原型链

 原型实现继承
 原型链决定了对象属性的访问方式
原型链的顶端为null

如何判断 user 对象里有没有 a 这个属性？如果把user对象中所有的属性都输出出来？

 js对象的Object.hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

数组扁平化

数组扁平化就是将一个多维数组转换为一个一维数组 ，实现方法：
1、对数组的每一项进行遍历。
2、判断该项是否是数组。
3、如果该项不是数组则将其直接放进新数组。
4、是数组则回到1，继续迭代。
5、当数组遍历完成，返回这个新数组。

浏览器兼容性问题

如何取消axios请求

// CancelToken是一个构造函数，用于创建一个cancelToken实例对象
// cancelToken实例对象包含了一个promise属性，值为可以触发取消请求的一个promise
 const CancelToken = axios.CancelToken;
// 执行source()得到的是一个包含了cancelToken对象和一个取消函数cancel()的对象
// 即 source = {token: cancelToken对象, cancel: 取消函数}
const source = CancelToken.source();

// 在请求的配置中配置cancelToken，那么这个请求就有了可以取消请求的功能
 axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
   console.log('Request canceled', thrown.message);
} else {
 // 处理错误
}
});

axios.post('/user/12345', {
name: 'new name'
 }, {
     cancelToken: source.token
})

// 执行取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

防抖和节流

 防抖：就是将一段时间内连续的多次触发转化为一次触发
 节流：减少一段时间内触发的频率
 区别：两者区别在于函数节流是固定时间做某一件事，比如每隔1秒发一次请求。而函数防抖是在频繁触发后，只执行一次（两者的前提都是频繁触发）

ES6 class 关键字原理跟 function 什么区别

commonJS

map 和 foreach 的区别

forEach()方法不会返回执行结果，而是undefined。也就是说，forEach()会修改原来的数组。
map()方法会得到一个新的数组并返回。

es6新特性

let const
解构赋值
模板字符串
箭头函数
for  of循环
对象简写法
类和继承

图片懒加载怎么实现

1. 页面加载完成时记录每个img标签的src值的字符串，
2. 用鼠标滚轮判断图片是否出现在屏幕，如果是，则把记录的src值赋值给src属性
3. 然后让image的src来发起请求，获取对应的图片放置到DOM树的这个位置上，从而实       现图片的页面渲染！
于是就可以知道，当进入页面的时候，其实我们已经把所有的图片的这个地址信息拿到了，图片懒加载的作用就是让这个图片的src按需发起请求，获取图片。

简述call、apply、bind，call 和 apply哪个性能更好？

Promise 避免回调地狱的语法糖–实现链式调用的核心点是什么？

禁止事件冒泡和禁止事件默认行为

比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡
阻止事件冒泡的方法：event.stopPropagation()方法  event.preventDefault()  .return false

在html中有很多自带默认事件的元素，很典型的例子：a标签，如果给a标签绑定点击事件，触发后页面会有一个刷新，是a链接默认的跳转事件，阻止这个有很多方法

map、fillter、reduce 各自有什么作用

map 作用是生成一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。另外 map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组
filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组，我们可以利用这个函数删除一些不需要的元素和 map 一样，filter 的回调函数也接受三个参数，用处也相同。
reduce 可以将数组中的元素通过回调函数最终转换为一个值。它接受两个参数，分别是        回调函数和初始值，接下来我们来分解上述代码中 reduce 的过程
首先初始值为 0，该值会在执行第一次回调函数时作为第一个参数传入
回调函数接受四个参数，分别为累计值、当前元素、当前索引、原数组，后三者想必大     家都可以明白作用，这里着重分析第一个参数

数组去重的方法

双层循环，外层循环元素，内层循环时比较值，如果有相同的值则跳过，不相同则push进数组
利用splice直接在原数组进行操作，双层循环，外层循环元素，内层循环时比较值，值相同时，则删去这个值
注意点:删除元素之后，需要将数组的长度也减1.
利用对象的属性不能相同的特点进行去重

ES6 中 Set, Map

用多种方法实现 JavaScript 继承