前端面试知识点总结（持续更新）一
-
JavaScript分为ECMAScript，DOM，BOM
BOM：浏览器对象模型，它使得js有能力与浏览器进行‘对话’，如alert（）就是它提供的
DOM：文档对象模型，通过它可以访问HTML文档的所有元素，如document.getelementByid()就是它提供的 -
变量提升：
就是将js中的变量或者函数提高到作用域的顶部，如先把var和function声明的变量前置，再去顺序执行代码 -
阻止冒泡
什么是冒泡：如果一个按钮绑定了一个‘click’事件，那么click事件会依次在它的父元素中触发
w3c的方法是 e.stopPropagation()
ie是e.cancelBubble=true -
取消默认事件：
什么是默认事件：比如a的链接，input的submit这都属于默认行为，就是不设置方法，自带的方法行为
w3c的方法是：e.preventDefault()
ie是：e.returnValue=false
注意：如果event对象设置cancelable为false时，表示没有默认行为，以上两者不起作用
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 -
px，em和rem
px：表示绝对尺寸，中文名像素，它不能适应浏览器缩放时产生变化，一般不用与响应式网站
em：表示相对尺寸，它根据当前对象文本的font-size（如果当前对象文本的font-size也是em，则根据其父元素文本的font-size进行变化），使用em可以随网站的变化字体也跟着发生变化，但是使用em需要知道当前元素和父元素的font-size，如有遗漏，可能发生错误
rem：也叫相对尺寸，它参考对象时根元素的font-size，因此只需要确定一个font-size -
em与px换算：
任意浏览器的默认字体高度都是16px
所有未调整的浏览器都符合1em=16px
唯一方便简化，在通常开发中会讲css的body选择器声明font-size=62.5%，因为10px=0.625em，这样12px等于1.2em，10px等于1em -
盒子模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
marign 外边距
border 边框
padding 内边距
content 内容
属性设置：width：内容的宽度
height：内容的高度
padding：内边距，边框到内容的距离
border：边框
margin：外边距，盒子边框到附近最近盒子的距离 -
js的类型
undefined，null，boolean，string，object，number
ES6新增了一种原始数据类型：Symbol，表示一种独一无二的值 -
var 和let，const
①var声明的变量会挂载在window上，let和const不会
②var生命的变量可以状态提升，let和const不能
③let和const声明形成块级作用域
④同一作用域下，let和const不能声明同名变量，但是var可以
⑤暂存死区
只要块级作用域内存在let/const命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。
⑥
6.1const一旦声明不能修改，但是复合型数据，可以修改属性
6.2不能不赋值 -
JS截取字符串
三种：
① .substr(下标值，截取个数)
从输入下标向后面截取几个字符串，默认不写截取全部
注意：下标值可以是负数，长度也可以是负数（结果显示为空）
如果所截选长度超过字符串长度，将显示应有的数据，不会报错
②.substring()
参数必须为非负整数，否则返回整个字符串
③.slice(开始下标，结束下标-1)
var str='123456';
console.log(str.slice(1,2));
//结果为 2
- 闭包
JavaScript 变量可以是局部变量或全局变量。
私有（局部）变量可以用到闭包。
闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
实现方式，就是在一个方法内再创建一个方法来对需要修改的数据进行操作如：
function add() {
var counter = 0;
return counter += 1;
}
add();
add();
add();
//不使用闭包，结果都是1
------------------------------
//js闭包
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
//结果为3
使用这种方式让局部变量常驻内存，且不使用全局变量，但是会造成内存泄漏（因为有一块内存一直被占用，不被释放）
最常见的闭包使用场景：
setTimeout，这也是为什么我们使用最开始学习js使用setTimeout需要考虑this指向的原因
- js排序
①冒泡排序：
思想：第一个和第二个比，谁小谁放在前面，然后第二个再和第三个比，还是谁小谁放在前面，依次类推（注意，已经排过的不再考虑，如，第二次不考虑第一个，第三次不考虑前两个）
②sort排序
sort是数组的一个方法，所以可以自定义排序方式
使用其需要定义两个参数：如n1，n2
如果n1-n2，则升序，反则降序
var arr=[1,11,2,22,5,4,0];
arr.sort(
function(n1,n2){
return n1-n2;
});
alert(arr);//[0,1,2,4,5,11,22]
升序
------------------------------------------------
var arr=[1,11,2,22,5,4,0];
arr.sort(
function(n1,n2){
return n2-n1;
});
alert(arr);
降序
-
JS操作数据
①join（）
将数组中所有元素转化为字符串并连接在一起
②reverse（）
将数组中的元素颠倒顺序
③concat（）
数组拼接，返回新数组，且原数组不受影响
④slice（开始下标，结束下标-1）
截取数组形成新数组，且原数组不受影响
注意：如果超过最大长度，只显示到最后结果
如果第二个下标为负数：如-1，则表示倒数第一个元素，-2表示倒数第二个元素
如果第一个参数为负数，则表示从倒数第几个下标开始，-2则表示从倒数第二个开始
⑤indexOf和lastIndexOf
查找指定元素的下标值，indexOf是从左到右，lastIndexOf是从右到左，如果没有找到返回-1
⑥splice（）
删除元素，插入元素
第一个参数：删除或插入的起始位置
第二个参数：要删除的个数
第三个参数：插入到数组中的元素
注意：如果只有一个参数，默认删除参数后边的所有元素
该方法新建一个数组，并修改原数组
⑦push（）
在数组末尾添加一个或多个元素
⑧pop（）
从数组末尾删除一个元素（只能删除一个），并返回被删除的元素
⑨unshift（）
把一个元素添加到数组的开头，并返回数组的新长度
⑩forEach（）
遍历数组，数组每一个元素都执行一次回调函数
⑩①map（）
调用数组的没有给元素传递给指定的函数
⑩②every（）和some（）
every（）判断数组中的每一项是否都满足条件，只有所有项都满足条件，才返回true
some（）判断数组中是否存在满足条件的项，只要有一项满足，就返回true -
解构赋值
解构赋值是对赋值运算符的扩展，它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
基本形式：
let [a,b,c]=[1,2,3];
//a=1
//b=2
//c=3
忽略形式：
let [a, ,b]=[1,2,3]
//a=1;
//b=3
不完全解构：
let [a=1,b]=[ ];
//a=1,b=undefined
剩余运算符：
let [a,...b]=[1,2,3]
//a=1,
//b=[2,3]
字符串解构
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
解构默认值：
let [a=2]=[undefined]
//a=2
-
字符串扩展
ES6提供
①includes（）
返回布尔值，表示是否找到了参数字符串
②startsWith（）
返回布尔值，表示参数字符串是否出现在原字符串的头部
③endsWith（）
返回布尔值，表示参数字符串是否出现在原字符串的尾部
ES7提供
④padStart（）
头部补全
⑤padEnd（）
尾部补全
ES5写法
parseInt(12.32)//12
parseFloat('123.43#')//123.43
ES6写法
Number.parseInt(12.32)//12
Number. parseFloat('123.43#')//123.43
这样做的目的，是逐步减少全局性方法，使得语言逐步模块化
推荐阅读