前端的布局方式

文档流、浮动布局、流式布局、定位布局、弹性布局、自适应布局和响应式布局。

判断俩对象的值是否相等

JSON.stringify(obj)==JSON.stringify(obj);//true
//缺点：数据顺序不一样也不对

    const isObjectEqual = (obj1, obj2) => {
    
        let o1 = obj1 instanceof Object;
        let o2 = obj2 instanceof Object;
        if (!o1 || !o2) {
        // 如果不是对象 直接判断数据是否相等
            return obj1 === obj2
        }
        // 判断对象的可枚举属性组成的数组长度
        if (Object.keys(obj1).length !== Object.keys(obj2).length) {
    
            return false;
        }
        for (let attr in obj1) {
    
            let a1 = Object.prototype.toString.call(obj1[attr]) == '[object Object]'
            let a2 = Object.prototype.toString.call(obj2[attr]) == '[object Object]'
            let arr1 = Object.prototype.toString.call(obj1[attr]) == '[object Array]'
            if (a1 && a2) {
    
                // 如果是对象继续判断
                return isObjectEqual(obj1[attr], obj2[attr])
            } else if (arr1) {
    
                // 如果是对象 判断
                if (obj1[attr].toString() != obj2[attr].toString()) {
    
                    return false;
                }
            } else if (obj1[attr] !== obj2[attr]) {
    
                // 不是对象的就判断数值是否相等
                return false
            }
        }
        return true
    }

数组去重

1.new Set（）

2. for循环+includes

3.filter 过滤出第一次出现的位置和当前位置相等的元素

arr.filter((item,index)=>{
    
return	arr.indexOf(item)===index
})

var aaa = [1, 2, 4, 5, 3, 2, 1, 1]
    var bbb = aaa.filter((item, index) => {
    
        return aaa.findIndex(item2 => item2 === item) === index
    })

4.双for+splice

5.新数组+indexOf=-1

知道角度求弧度

（45*Math.PT）/180

float和flex区别

float：当需要兼容IE浏览器时使用float布局，当使用float布局时不需要考虑移动端，因为手机上没有人用IE浏览其

flex布局：当不需要兼容IE浏览器又不需要兼容最新浏览器时可以使用flex布局

grid布局

兼容最新浏览器时可以使用grid布局 display:grid/inline-grid

ajax的五种状态

ajax的五种状态（readyState ）

0 － （未初始化）还没有调用send()方法
　　1 － （载入）已调用send()方法，正在发送请求
　　2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
　　3 － （交互）正在解析响应内容
　　4 － （完成）响应内容解析完成，可以在客户端调用了

状态码

304 状态码

304 是对客户端有缓存情况下服务端的一种响应。

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，同时有一个标记最后被修改的时间。
客户端第二次请求此URL时，浏览器会向服务器询问该时间之后文件是否有被修改过。
如果服务器端的资源没有变化，则自动返回 HTTP 304（Not Changed.）状态码，内容为空，这样就节省了传输数据量。

http缓存 浏览器缓存 协商缓存 强缓存

缓存

浏览器第一次发送请求后，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中
HTTP 缓存策略分为两种： 强缓存 和 协商缓存 ，这两种缓存策略都是服务端设置 HTTP Header 来实现的

强制缓存 (Expires和Cache-Control)

第一次发送请求 ，向服务器发送请求。如果服务器想让数据请求，就会在请求头里设置Cache-Control，设置一个过期时间max-age
再次发送请求，先看是否有缓存，有缓存检查过期时间，没有过期就用缓存，过期了就协商请求。
状态码200

from memory cache代表使用内存中的缓存，from disk cache则代表使用的是硬盘中的缓存

协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程，生效则返回304，协商缓存失效，返回200

Object.definePropertyd的缺点

不能监听数组变化，所以后面出现了proxy

promise事件循环执行顺序

Promise 新建后立即执行，然后， then 方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行。

let promise = new Promise(function(resolve, reject) {
    
	console.log('Promise');
	resolve();
});

promise.then(function() {
    
	console.log('resolved');
});

console.log('我是同步任务');

//Promise ， 我是同步任务 ， resolved。

Promise.resolve().then(function() {
    
	console.log('resolved');
});

console.log('我是同步任务');

setTimeout(function(){
    
	console.log('event loop')
})
// 我是同步任务 ， resolved，event loop。

js的几种设计模式

https://cloud.tencent.com/developer/article/1811806
js的几种设计模式

工厂模式：故名思意，我们从字面上的意思就可以看到，可以想象一座工厂源源不断产出一样的产品，流水线作业。就像构造函数，实例化对象。

单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点。其实这有一点像我们vuex当中的实现，也是一个全局的状态管理，并且提供一个接口访问。比如：Vuex、jQuery

原型模式
用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象。 Object.create

装饰者模式。它的定义是“ 在不改变原对象的基础上，通过对其进行包装拓展，使原有对象可以满足用户的更复杂需求 ”。Object.defineProperty的wirteable特性实现的

构造器模式 在面向对象的编程语言中，构造器是一个类中用来初始化新对象的特殊方法。并且可以接受参数用来设定实例对象的属性的方法。其实就是利用原型链上被继承的特性，实现了构造器。

适配器模式：相当于一个转换接口，大家想想我们手机充电器通常是二岔口的，但是电源只有三岔口的。这时候就需要一个适配器把三岔口的转换成二岔口的。axios

代理模式:我们在事件代理的时候其实就是使用了代理模式，通过把监听事件全部交由父节点进行监听，这样你添加节点或者删除节点的时候就不用去改变监听的代码。

发布-订阅模式:这种模式在生活中随处可见，比如你订阅了一个网课，开始前10分钟就会提醒你去听课。这里其实就是发布-订阅的模式，你订阅了它的开课信息，但是你不会接收到另一门的开课信息，因为你没有订阅。

策略模式:根据情况进行不一样的方案，比如你想去旅游，明确自己有多少钱然后选择旅游方式。,没钱，走路,有钱，飞机,还行，火车,这里就涉及到策略的模式了

迭代器模式:迭代器模式是指提供一种按顺序访问的方法。比如说我们经常使用的forEach方法，就是通过顺序访问的模式。我们可以自己去写一下forEach的方法。

解决异步：回调，async，promise，G函数

原生对象，内置对象，宿主对象

原生对象：Object,Array,Date,String,Number,RegExp，在js运行中动态创建的
内置对象:Global和Math(数字对象)，js引擎初始化就被创建好的对象
宿主对象：DOM和BOM ，浏览器和文档注入进js的对象

6、说说你对闭包的理解以及使用场景？

封装代码，定时器的延时回调，一个函数内部返回另一个匿名函数，循环取值

10、谈谈Javascript中类型转变机制？
11、== 和 === 的区别和使用场景？
12、深拷贝和浅拷贝的区别？"
"1、定时器的执行机制？
2、伪元素可以用js来操作么

::after、::before…

//获取伪元素属性
var beforeStyle = window.getComputedStyle(myIdElement, ":before");
+
console.log(beforeStyle.getPropertyValue("width")); // 100px

修改：1.使用css类名
2.document.styleSheets[0].insertRule('.red::before { color: green }', 0);

4、Js隐式转换

if（）{}
！5
9+‘8’

==
<= >=
++ –
—，*，/，%

5、Typeof的作用
判断一个数是否是整数

parseint(num)==num
num%1==0

css 优先级

! important>内联样式>id> class>标签>*>继承

6、常见的状态码分别表示什么
7、什么是事件代理/事件委托？

事件委托是利用事件的冒泡原理来实现的。把 原本li 的事件委托给 box 父级来做
内联样式 = 1000
id =100
class，伪类=10
类型，伪元素=1
通配符=0

8、为什么使用rem
9、Javascript字符串常见的方法有哪些？"
"1、移动端事件与PC端事件的区别

touchstart，touchmove，touchend，touchcancel

2、事件对象中3个重要的属性，分别是什么、代表什么
3、flex:1 跟 flex:auto 的区别

flex:1 更适合在等比例列表时使用，flex：auto适用于元素充分利用剩余空间
在flex:1 时在尺寸不足时会优先最小化尺寸，flex:auto在尺寸不足时优先最大化内容尺寸。

4、Zepto是什么？jQuery和Zepto.js的区别在哪里
5、viewport适配原理

 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

6、什么情况下使用函数防抖和节流
"1、从输入 URL 到页面展示，这中间发生了什么？
2、懒加载的原理是什么？
3、canvas中文字和图片的插入？
4、什么情况下返回undefide

变量声明未赋值
没有return返回值

5、ajax接收的数据类型有哪些
7、移动端的布局方式有哪几种？
10、h5拖放事件都有哪些
9、h5： 低版本ie浏览器无法识别新标签 怎么解决
10、new创建一个对象的时候做了些什么？"
“1、从输入 URL 到页面展示，这中间发生了什么？
2、懒加载的原理是什么？
3、canvas中文字和图片的插入？
4、什么情况下返回undefide
5、ajax接收的数据类型有哪些
7、移动端的布局方式有哪几种？
8、深拷贝和浅拷贝的区别？
10、h5拖放事件都有哪些
9、h5： 低版本ie浏览器无法识别新标签 怎么解决
10、new创建一个对象的时候做了些什么？”
“1、从输入 URL 到页面展示，这中间发生了什么？
2、懒加载的原理是什么？
3、canvas中文字和图片的插入？
4、什么情况下返回undefide
5、ajax接收的数据类型有哪些
7、移动端的布局方式有哪几种？
8、深拷贝和浅拷贝的区别？
10、h5拖放事件都有哪些
9、h5： 低版本ie浏览器无法识别新标签 怎么解决
10、new创建一个对象的时候做了些什么？”
“1、从输入 URL 到页面展示，这中间发生了什么？
2、懒加载的原理是什么？
3、canvas中文字和图片的插入？
4、什么情况下返回undefide
5、ajax接收的数据类型有哪些
7、移动端的布局方式有哪几种？
8、深拷贝和浅拷贝的区别？
10、h5拖放事件都有哪些
9、h5： 低版本ie浏览器无法识别新标签 怎么解决
10、new创建一个对象的时候做了些什么？”
“1、伪类和伪元素的区别
2、说说你对Javascript作用域的理解？
3、什么是函数调用
4、src和herf的区别
5、区别数组和对象
6、js的宿主对象和原声对象的区别”
"1、伪类和伪元素的区别
2、说说你对Javascript作用域的理解？
3、什么是回调函数
4、src和herf的区别

src是链接，属于整体替换(替换非叠加)，比如img标签和frame标签；href是超文本引用，属于附属资源，可以叠加。

5、区别数组和对象
6、js的宿主对象和原声对象的区别
9、js排序"
“1、什么是回流和重绘？
2、http和https的区别？
3、定时器的执行顺序或机制？
4、DOM事件流和事件委托
5、如何跳转页面并传值？
6、$.extend()和$.fn.extend()分别有什么作用，区别是什么？
7、描述new一个对象的过程？
8、请解释一下变量声明提升？”
“1、如何封装ajax,介绍一下XMLHttpRequest对象，他有哪些常用方法和属性
2、如何区分声明函数和表达式函数？
3、说一下同步和异步的区别
4、viewport适配原理
5、深拷贝、浅拷贝、以及如何实现
6、DOM事件流和事件委托
7、防抖和节流”
“1、canvas绘制一个扇形
2、懒加载的原理是什么？
3、回流和重绘
4、什么情况下返回undefide
5、ajax接收的数据类型有哪些
6、Zepto是什么？jQuery和Zepto.js的区别在哪里
7、移动端的布局方式有哪几种？
8、深拷贝和浅拷贝的区别？
10、h5拖放事件都有哪些
9、h5： 低版本ie浏览器无法识别新标签 怎么解决”
“1、SVG是什么？优势
2、什么是防抖和节流？有什么区别？如何实现？
3、定时器的执行机制？
4、http和https的区别？
5、HTML 5中的本地存储概念？
7、重绘和回流有什么区别？减少回流
8、new创建一个对象的时候做了些什么？
9、 jQuery 中的方法链是什么？使用方法链有什么好处？
10、移动端的适配
11、移动端事件与PC端事件的区别”
“1、Js隐式转换
2、SVG是什么
3、懒加载的原理？
4、HTML 5中不同的新表单元素类型用于搜索字段、否为电话号码格式
5、本地存储？
6、移动端中px、em、rem、vw的区别
7、什么是防抖和节流？有什么区别？如何实现？
8、定时器的执行顺序或机制？
9、字符串常用的方法”
“1、冒泡排序
2、懒加载的原理是什么？
3、回流和重绘
4、什么情况下返回undefide
5、本地存储
6、Zepto是什么？jQuery和Zepto.js的区别在哪里
7、移动端的布局方式有哪几种？
8、深拷贝和浅拷贝的区别？
9、h5： 低版本ie浏览器无法识别新标签 怎么解决”
“1、Js隐式转换
2、SVG是什么，优点
3、懒加载的原理？
4、HTML 5中不同的新表单元素类型
5、说说你对Javascript作用域的理解？
6、vw是什么，如何计算？
7、什么是防抖和节流？有什么区别？
8、定时器的执行顺序或机制？
9、字符串常用的方法”
“1、介绍一下XMLHttpRequest对象，他有哪些常用方法和属性
2、如何区分声明函数和表达式函数？
3、说一下同步和异步的区别
4、解释一下 JavaScript的同源策略
5、深拷贝、浅拷贝、以及如何实现
6、DOM事件流和事件委托
7、防抖和节流
9、请解释一下变量声明提升？
10、 jQuery 中的方法链是什么？使用方法链有什么好处？”
“1、vw是什么，如何计算？
2、ajax接收的数据类型有哪些
4、设备独立像素指什么？
5、伪类和伪元素的区别
6、回流和重绘
7、获取理想视口属性宽度
8、判断一个元素是否是数组
9、h5拖放事件都有哪些”
“1、从输入 URL 到页面展示，这中间发生了什么？
2、懒加载的原理是什么？
3、canvas中文字和图片的插入？
4、什么情况下返回undefide
5、ajax接收的数据类型有哪些
7、移动端的布局方式有哪几种？
8、深拷贝和浅拷贝的区别？
10、h5拖放事件都有哪些
9、h5： 低版本ie浏览器无法识别新标签 怎么解决
10、new创建一个对象的时候做了些什么？”
“1、js数据类型转换
2、深拷贝和浅拷贝的区别？
3、new创建一个对象的时候做了些什么？
4、canvas中文字和图片的插入？
5、懒加载的原理是什么？
6、什么情况下返回undefide
7、什么是防抖和节流？有什么区别？
8、Javascript字符串常见的方法有哪些？”
“1、Js隐式转换
2、SVG是什么
3、懒加载的原理？
4、HTML 5中不同的新表单元素类型
5、本地存储？
6、移动端中px、em、rem、vw的区别
7、什么是防抖和节流？有什么区别？
8、定时器的执行顺序或机制？
9、字符串常用的方法”
"1、定时器的执行机制？
5、Typeof的作用
6、常见的状态码分别表示什么
8、介绍一下你对浏览器内核的理解？
2、懒加载的原理是什么？
3、预加载和懒加载的区别是什么？
8、jQuery中 detach() 和 remove() 方法的区别是什么? "
“1、伪类和伪元素的区别
2、说说你对Javascript作用域的理解？
3、什么是函数调用
4、src和herf的区别
5、区别数组和对象
6、js的宿主对象和原声对象的区别
7、排序
8、深拷贝和浅拷贝的区别？
9、Js隐式转换”
“1、Js隐式转换
2、SVG是什么
3、懒加载的原理？
4、HTML 5中不同的新表单元素类型用于搜索字段、否为电话号码格式
5、本地存储？
6、移动端中px、em、rem、vw的区别
7、什么是防抖和节流？有什么区别？
8、定时器的执行顺序或机制？
9、字符串常用的方法
10、new创建一个对象的时候做了些什么？”
“1、定时器的执行机制？
2、伪元素可以用js来操作么
3、闭包
4、Js隐式转换
5、Typeof的作用
6、常见的状态码分别表示什么
7、什么是事件代理/事件委托？
8、介绍一下你对浏览器内核的理解？
9、rem和em对比，有什么优缺点？”
“1、改变this指向的方法都有哪些
2、如何实现本地存储的存值与取值？
3、谈谈Javascript中类型转变机制？
4、简述clientX/Y和pageX/Y的区别？
5、rem和em对比，有什么优缺点？
6、 jQuery 中的方法链是什么？使用方法链有什么好处？
7、数组排序方法？”
"1、在一个 jQuery 事件处理程序里返回了 false 会怎样？
2、 jQuery中 detach() 和 remove() 方法的区别是什么?

如需移除元素，但保留数据和事件，请使用 detach() 方法代替。 如需
移除元素及它的数据和事件，请使用 remove() 方法代替。

3、回流和重绘
4、简述clientX/Y和pageX/Y的区别？
5、rem和em对比，有什么优缺点？
6、 jQuery 中的方法链是什么？使用方法链有什么好处？
7、数组排序方法？
8、前端优化"
“1、== 和 === 的区别和使用场景？
2、如何让某个元素进行全屏展示？
3、Javascript数组常见的方法有哪些？
4、Zepto是什么？jQuery和Zepto.js的区别在哪里
5、jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
6、说说你对Javascript作用域的理解？
7、点透？
8、如何使用Canvas和SVG绘制矩形？
9、如何在拖放事件中传递数据？”
“1、== 和 === 的区别和使用场景？
2、如何让某个元素进行全屏展示？
3、Javascript字符串常见的方法有哪些？
4、Zepto是什么？jQuery和Zepto.js的区别在哪里
5、移动端布局，优缺点
6、说说你对Javascript作用域的理解？
7、点透？
8、懒加载的原理是什么？
9、new创建一个对象的时候做了些什么？”
“1、在一个 jQuery 事件处理程序里返回了 false 会怎样？
2、 jQuery中 detach() 和 remove() 方法的区别是什么?
3、回流和重绘
4、如何区分数组和对象
5、rem和em对比，有什么优缺点？”
“1、vw是什么，如何计算？
2、ajax接收的数据类型有哪些
3、描述固定大小、em、rem的区别
4、设备独立像素指什么？
5、解释物理像素
6、伪类和伪元素的区别
7、获取理想视口属性宽度
8、判断一个元素是否是数组
9、h5拖放事件都有哪些
10、移动端的布局方式有哪几种？”
“1、介绍一下XMLHttpRequest对象，他有哪些常用方法和属性
2、说下readyState属性是干嘛的，都有哪几个状态
3、说一下同步和异步的区别
4、解释一下 JavaScript的同源策略
5、深拷贝、浅拷贝、以及如何实现
6、DOM事件流和事件委托
7、防抖和节流
8、描述new一个对象的过程？
9、请解释一下变量声明提升？”
"1、介绍一下XMLHttpRequest对象，他有哪些常用方法和属性
2、说下readyState属性是干嘛的，都有哪几个状态

3、说一下同步和异步的区别
4、DOM事件流和事件委托
5、防抖和节流
6、描述new一个对象的过程？
7、移动端是如何做适配的？"
"1、介绍一下XMLHttpRequest对象，他有哪些常用方法和属性

XMLHttpRequest(XHR)是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。

2、如何区分声明函数和表达式函数？
3、get和post有什么区别？

GET在浏览器回退时是无害的，而POST会再次提交请求。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
GET参数通过URL传递，POST放在Request body中。
GET产生一个TCP数据包。、POST产生两个TCP数据包。（get直接送货，post会先跑过去告诉他我要送货了，再送货）

4、点透事件
5、谈谈this的理解
6、zepto和jquery的区别
8、描述new一个对象的过程？
9、请解释一下变量声明提升？"
“1、get和post有什么区别？
2、如何区分声明函数和表达式函数？
3、什么是window对象? 什么是document对象?
4、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
5、什么是闭包（closure），为什么要用它？
6、JS延迟加载的方式有哪些？
7、如何获取dpr
8、描述new一个对象的过程？
9、改变this指向
10、深拷贝、浅拷贝、以及如何实现？”
“1、Js隐式转换
2、SVG是什么
3、预加载和懒加载的区别是什么？
4、HTML 5中不同的新表单元素类型是什么？
5、如何添加和删除本地存储中的数据？
6、点透
7、如何获取dpr
8、防抖和节流”
“1、Js隐式转换
2、svg的优势有哪些？
3、预加载和懒加载的区别是什么？
4、HTML 5中不同的新表单元素类型是什么？
5、如何添加和删除本地存储中的数据？
6、如何使用Canvas和SVG绘制矩形？”
"1、 js 有哪些内置对象？
2、三种事件模型是什么？
3、canvas中文字和图片的插入？

ctx.font = "100px sans-serif"
    ctx.fillText("天若有情", 10, 100);
    ctx.strokeText("天若有情", 10, 200)

ctx.drawImage(image, x, y, width, height)

4、h5中拖放事件有几种？

<div draggable="true">123</div>//设置元素可以拖动
div.ondragstart —拖拽开始
div.ondrag —过程中
div.ondragend —拖拽结束
box.ondragenter —进入目标元素（根据鼠标位置）
box.ondragover —在目标元素上移动（取消默认事件）
box.ondragleave —离开目标元素
box.ondrop —在目标元素上释放 （取消默认事件）

5、如何在拖放事件中传递数据？

e.dataTransfer.files

6、如何让某个元素进行全屏展示？

元素.requestFullScreen()—开启全屏
元素.cancelFullScreen()—关闭全屏

2、js中引用数据类型都有哪些
3、typeof 和 instanceof 的区别？
4、new创建一个对象的时候做了些什么？

1、以构造器的prototype属性为原型，创造一个新的、空的对象
2、将它的引用赋给构造器的 this，同时将参数传到构造器中执行
3、如果构造器没有手动返回对象，则返回第一步创建的新对象，如果有，则舍弃掉第一步创建的新对象，返回手动return的对象。

5、说说你对Javascript作用域的理解？