记录一些JavaScript自己记不住的知识点（欢迎大佬指正）

记录一些JavaScript自己记不住的知识点（欢迎大佬指正）

什么是BFC

Block Formatting Context:块级格式化上下文
BFC是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
BFC内部与外部互不干扰。
产生BFC的情况：
1、根元素
2、浮动：float属性不为none
3、定位：position为absolute或fixed
4、 display为inline-block, table-cell, table-caption, flex, inline-flex
5、 overflow不为visible（如：hidden、auto、scroll）
详情可以看这里

清除浮动的方法：

1.添加父标签，设置高度。2.clear：both

var、const 和 let 的主要区别是什么？

var 是 老旧的 es5 ， let 和 const 是es6 新增的
var的范围是全局变量或者是在函数范围内，定义后不赋值调用结果为未定义，重复定义的结果为重新赋值。
let的范围为{}内即块元素，定义后不赋值调用会报错，重复定义也会报错。
var和let在循环里面也会不同，var在循环中，是重复赋值，而let则是会将循环中的变量储存起来，且每个变量之间互不影响。
const的行为与let基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且尝试修改const声明的变量会导致运行错误。
const声明的限制只适用于它指向的变量的引用，换句话说，如果const变量的引用的是一个对象，那么修改这个对象内部的属性并不违反const的限制。
具体可以参考这里

网页从输入网址到渲染完成经历了哪些过程？

第一步，先查看是否进行缓存，如果有缓存就可以直接从缓存中获取数据
第二步，若缓存中没有数据，便将请求发送到DNS服务器，获取到域名对应的web服务器中的ip地址。这个过程叫作DNS解析。
第三步：通过三次握手(即总共发送 3 个数据包确认已经建立连接)建立客户端和服务器之间的TCP连接，进行数据传输，然后通过4次挥手断开链接。
第四步：在TCP连接建立之后，浏览器向web服务器发送http请求（浏览器发 HTTP 请求要携带三样东西:请求行、请求头和请求体），之后web服务器处理http请求并把响应的数据返回给浏览器。
第四步：浏览器下载web服务器返回的数据以及解析html源文件
第五步：生成DOM树，解析css和js，渲染页面。详情可参考：从输入地址到页面渲染都经历了哪些过程

JS的构造函数：

1.首字母必须大写；
2.构造函数的属性必须加this；
3.构造函数不能加return
例：function Persion（name,age）{
this.name = name;
this.age = age
}

创建实例的方式： 对象名 = new 构造函数名（）

描述浏览器的渲染过程？DOM树和渲染树的区别？

解析 HTML 构建 DOM(DOM树)，并行请求 css/image/js，CSS 文件下载完成，开始构建 CSSOM(CSS树)，CSSOM 构建结束后 和 DOM 一起生成 Render Tree(渲染树)，根据Render tree进行节点信息计算（Layout），根据计算好的信息绘制整个页面（Painting）
补充
布局(Layout)：计算出每个节点在屏幕中的位置
显示(Painting)：通过显卡把页面画到屏幕上
DOM 树 和 渲染树 的区别：
DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素
渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的 css 属性

字符串可以看做是char类型的只读数组；

splice 返回的是String[] 数组

…为展开运算符，是ES6的新语法，将数组展开为其中的元素。

input 事件

1.onfocus 当input 获取到焦点时触发
2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件，用于判断标签为空。
3.onchange 当input失去焦点并且它的value值发生变化时触发，个人感觉可以用于注册时的确认密码。
4.onkeydown 按下按键时的事件触发，
5.onkeyup 当按键抬起的时候触发的事件，在该事件触发之前一定触发了onkeydown事件–相当于一个按键，两个事件，没怎么用过
6.onclick 主要是用于 input type=button，input作为一个按钮使用时的鼠标点击事件
7.onselect 当input里的内容文本被选中后执行，只要选择了就会触发，不是全部选中
8.oninput 当input的value值发生变化时就会触发，（与onchange的区别是不用等到失去焦点就可以触发了）

js追加元素的几种方法

append(),在父级最后追加一个子元素
appendTo(),将子元素追加到父级的最后
prepend(),在父级最前面追加一个子元素
prependTo(),将子元素追加到父级的最前面
after(),在当前元素之后追加（是同级关系）
before(),在当前元素之前追加（是同级关系）
insertAfter(),将元素追加到指定对象的后面（是同级关系）
insertBefore(),将元素追加到指定对象的前面（是同级关系）
appendChild(),在节点的最后追加子元素
详情：
JS追加元素和获取兄弟元素、父元素的方法

margin：0 auto不能居中的原因

1.需要居中的元素没有设置宽度
2.对行内块和行内元素设置了，但是margin 0 auto只对block生效
3.外层元素设置了float也不会生效
4.没声明DOCTYPE
记录margin:0 auto 不能居中的原因

如何判断数值是否为undefined

可以将判断的值用typeof()引起来，然后与undefined进行比较

更改placehold的样式

input[type=text]::placeholder {
color: blue;
}

什么是构造函数？

构造函数是在创建对象时进行初始化操作，对成员变量进行赋值。还有就是在外部new一个变量并传递参数是，可以将传过来的参数变成自己的变量，赋予参数此函数自己的某些特性等。

为什么$(‘button’)明明是数组却不能用forEach

因为它属于伪数组，只能用for，不能用forEach

如何让元素消失于某一个点？

使用3D旋转！
perspective: 300px;
transform: rotateY(90deg);
transform-origin:right 0;
这样就能让图像从右侧消失了

定时器使用详解

递归执行：
jian() {
this.flag<4 ? this.flag ++ : ’ ’
setTimeout(this.jian,500)
console.log(this.flag);
if(this.flag == 4){
this.show = false
}
}
vue 定时器的使用

去除重复数据

let arr = [1,2,2,3,4,5,6,6]
let newArr = [];
for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i]);
    }
}
this.searchHis = newArr;