一、HTML
1.HTML基本标签及其作用
html根标签，一个页面有且只有一个根标签，网页中所有的内容都应该写在html根标签中
head标签，该标签中的内容，不会再网页中直接显示，它用来帮助浏览器解析页面的
title网页的标题标签，默认会显示在浏览器的标题栏中，搜索引擎在搜索页面时，会首先搜索title标签中的内容，它是网页中对于搜索引擎来说最重要的内容，会影响网页在搜索引擎中的排名
body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写在这个结构中。可以编写HTML的注释，注释的内容，不会再页面中显示，但是可以在源代码中查看
meta标签用来设置网页的一些源数据，比如网页的字符集，关键字，简介，告诉浏览器，网页所采用的编码字符集 meta是一个自结束标签
使用meta可以用来请求重定向 <meta http-equiv="refresh" content="秒数;url=目标路径">
2.HTML常用标签
<h1> <p> <br> <hr> <div> <img> <a> a的伪类，a:hover
3.属性
可以通过属性来设置便签如何处理便签中的内容
在开始标签中调节属性
属性需要写在开始标签中，实际上就是一个名值对的结构
标签即元素
标签 属性名 = " 属性值"
一个标签中可以同时设置多个属性，属性之间需要空格隔开
4.实体
在HTML中，一些如 < >这种特殊字符不能直接使用，
需要使用一些特殊的符号来表示这些特殊字符，
这些符号我们称之为实体（转义字符串）
浏览器解析到实体时，会自动将实体转换为其对应的字符
实体语法：& 实体名字;
< <
> >
空格
二、CSS
1.三大样式：内联、内部（style）、外部（link）
2.块元素和行内元素
块元素：独占一行的元素，无论他的内容有多少，他们都会占一整行，p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的的块元素,主要用来对页面进行布局的
行内元素：只占自身大小的元素，不会占用一行
常见的内联函数：a img iframe span
一般情况下只使用块元素包含内联元素，而不会用内联元素包含块元素
a元素可以包含任意函数（除了它本身）
p元素不可以包含其他的块元素
3.css常用选择器
通配符：*
ID选择器：#ID
类选择器：.class
元素选择器：p、a 等
后代选择器：p span、div a 等
伪类选择器：a:hover 等
属性选择器：input[type="text"] 等
4.css选择器权重：!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认
5.去掉列表项：list-style: none;
6.长度（百分比、px、em、rem）
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
7.在CSS在沒有直接行间距的方式，我们只能通过设置行高来设置行间距，line-height设置行高，行间距 = 行高 - 字体大小。
8.border为元素设置边框，必须指定3个样式（宽度，颜色，样式）
9.垂直内边距重叠，水平内边距求和。
10.内联元素支持水平方向的外边距内联样式不支持垂直外边距
11.display和visibility
display：通过display样式可以修改元素的类型
可选值：
inline:可以将一个元素作为内联元素显示
block:可以将元素设置为块元素显示
inline-block:将一个元素转换为行内块元素，既可以设置宽高，且不会独占一行
none:不显示元素，并且元素不会在页面中继续占有位置
visibility：可以用来设置元素的隐藏和显示的状态
可选值：
visible 默认值，元素默认在页面中显示
hidden 元素会隐藏不显示
使用visibility: hidden;隐藏元素，不会在页面中显示，但是他的位置仍然保持
12.溢出处理overflow
子元素默认是存在父元素的内容区中，理论上讲子元素最大可以等于父元素内容区大小
如果子元素大小超过父元素内容区，则超过的大小会在父元素以外的位置显示超过父元素的内容，我们称为溢出的内容
父元素默认将溢出内容，在父元素外显示
通过overflow可以设置父元素如何处理溢出内容
可选值：
visible 默认值，不会对溢出内容处理
hidden 溢出的内容会被修剪，不会显示
scroll 会为父元素添加滚动条，通过拖动滚动条查看其余内容
该属性不论内容是否溢出，都会添加水平和垂直滚动条
auto 会根据需求自动添加滚动条，不需要就不加
13.文档流
文档流处在网页最底层，他表示的是一个页面中的位置
我们所创建的元素默认都是处在文档流中
元素在文档流中的特点：
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，默认从左向右排列,如果一行中不足以容纳所有内联元素，则换到下一行，继续自左向右
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
14.高度坍塌及其解决方法，详见 4高度坍塌及其解决方法.html
15.定位position
定位：将指定的元素摆放到页面指定的位置通过定位可以任意的摆放元素通过position属性进行定位
static 默认值，没有开启定位
relative 开启元素的相对定位 开启后，不设置偏移量，无变化
absolute 开启元素的绝对定位 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，（一般子元素开启绝对定位，都会同时开启父元素的相对定位），
如果所有的祖先元素都没开启定位，则会相对于浏览器窗口进行定位
fixed 开启元素的固定定位，也是绝对定位的一种 固定定位永远都会相对于浏览器窗口进行定位，会固定在浏览器的位置，不随滚动条滚动
开启元素定位后，可以通过left right top bottom 来设置偏移量
子绝 absolute 父相 relative
16.层级和透明
如果元素的层级是一样的，则下边的元素会盖住上边的通过z-index属性可以设置元素层级设置正整数来作为当前元素的层级对于没有开启定位的元素不能设置z-index父元素的层级再高，
也不会盖住子元素
设置元素透明背景opacity 需要一个0-1之间的值0 完全透明1 完全不透明在IE8及以下浏览器，不支持opacity，需要使用filter设置0-100 之间的值
三、JS
1.基本数据类型和引用数据类型
基本数据类型：undefined（未定义） null（空值） string（字符串） boolean（布尔） number（数字） symbol（ES6，用来定义对象的唯一属性名） bigint（比较大的整数）
声明一个变量时，它的值是 undefined
undefined 用来给基本类型做未赋值的 不是关键字
null 给对象、数组、函数为空做为未赋值的 是关键字
引用数据类型：object
JS中的变量是保存在栈内存中的基本数据类型的值直接在栈内存中值与值之间是独立存在的，
修改一个变量，不会影响另一个变量
对象是保存到堆内存中的，每创建一个新的对象就会在堆内存中开辟一个新的空间而变量保存的对象是对象的内存地址（对象的引用），
如果两个变量保存的是同一个对象引用当通过一个变量修改属性时，另一个也随着改变
当比较两个基本数据类型的值时，就是比较值而比较两个引用数据类型时，它是比较对象的地址
2.对象
分类：
1.内建对象- 由ES标准中定义的对象，在任何的ES的实现中都可以使用如：String Number Boolean Function
2.宿主对象- 由JS的运行环境提供的对象，目前来讲主要由浏览器提供对象比如： BOM DOM
3.自定义对象- 由开发人员自己创建的对象
3.创建对象
普通创建：var obj = new Object();
使用对象字面量创建对象：var obj = {};
使用对象字面量，可以在创建对象时，直接指定对象中的属性
语法：
var 对象名{
属性名：属性值，
属性名：属性值，
属性名：属性值
}
4.函数
函数也是一个对象
函数中可以封装一些功能，在需要时可以执行这些功能
函数中可以保存一些代码在需要时调用
使用typeof 检查一个函数对象时，会返回function
创建一个函数对象可以将要封装的代码以字符串的形式传递给函数封装到函数的代码不会立即执行，会在函数调用的时候执行
调用语法：函数对象（）
当调用函数时，函数中封装的代码会按顺序执行
使用函数声明来创建一个函数
语法： function 函数名 （形参1，形参2...）{ }
使用函数表达式创建函数
语法： var 函数名 = function （形参1，形参2...）{函数体}
5.函数的返回值
使用return来设置函数的返回值语法：return 值
return后的值将会作为函数的执行结果返回，我们可以定义一个变量来接收该结果在函数中，不写return，会返回undefined
return后的语句，都不在执行
6.立即执行函数
往往只会执行一次，函数定义完，无需调用，立即被调用。
(function () {
alert("我是一个匿名函数")
})();
7.函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数为这个对象的方法，调用函数就说调用对象的方法（method）
8.枚举对象中的属性，详见 5枚举对象中的属性.html
9.break 退出当前循环；continue 跳过当次循环
10.JS作用域及作用域链
1）作用域
在JavaScript中，作用域分为 全局作用域 和 函数作用域
var a = 10, b = 20;
function fn() {
var a = 100, c = 300;
function bar() {
var a = 1000, d = 4000;
}
}
作用域有上下级关系，上下级关系的确定就看函数是在哪个作用域下创建的。如上，fn作用域下创建了bar函数，那么“fn作用域”就是“bar作用域”的上级。
作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。
变量取值：到创建 这个变量 的函数的作用域中取值
2）作用域链
一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。
但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链
11.函数和变量的声明提前问题
function fn(a, c){
console.log(a) // function a()
var a = 123
console.log(a) // 123
console.log(c) // function c()
function a(){}
if (false) {
var d =678
}
console.log(d) // undefined
console.log(b) // undefined
var b = function () {}
console.log(b) // function () {}
function c() {}
console.log(c) // function c()
}
fn(1, 2)
// 预编译
// 作用域的创建阶段 预编译阶段
// 预编译的时候做了哪些事情
// js的变量对象 AO对象 供js引擎自己去访问的
// 1 创建了 AO 对象
// 2 找形参和变量声明 作为 AO 对象的属性名 值是 undefined
// 3 实参和形参相统一
// 4 找函数声明 会覆盖变量的声明
// AO：{
// a:undefined 1 function a()
// c:undefined 2 function c()
// d:undefined
// b:undefined
// }
// js的解释执行
// 注意：function a(){} 为函数声明
// var b = function () {} 为函数表达式
12.this问题
## 在函数中直接使用
```js
function get(content) {
console.log(content)
}
get('你好')
get.call(window,'你好')
```
## 函数作为对象的方法被调用（谁调用我 我就指向谁）
```js
var person = {
name: '张三',
run: function (time) {
console.log(`${this.name} 在跑步 最多${time}min就不行了)
}
}
person.run(30)
person.run.call(person, 30)
```
var name = 222
var a = {
name: 111,
say: function () {
console.log(this.name)
}
}
var fun = a.say()
fun() // fun.call(window) // 222
a.say() // a.say.call(a) // 111
var b = {
name:333,
say: function(fun) {
fun() // fun.call(window) // 222
}
}
b.say(a.say())
b.say = a.say()
b.say() // b.say.call(a) // 333
13.箭头函数中的this
// 箭头函数中的 this 是继承自父级外面的 this
var x = 11
var obj = {
x: 22,
say: () => {
console.log(this.x) // 此处箭头函数与 say 平级，父级为 obj 故 this 指向 window
}
}
obj.say() // 11
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth;
var fn = () => new Date().getFullYear() - this.birth; // 此处箭头函数与 fn 平级，父级为 getAge 故 this 指向 obj
return fu();
}
}
this.getAge(); // 28
14.创建对象
1）普通方法创建对象
var obj = {
name:"孙悟空",
age:15,
gender:"男",
sayName:function () {
alert(this.name)
}
}
2）使用工厂方法创建对象
function createPerson(name,age,gender) {
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function () {
alert(this.name)
}
//将新对象返回
return obj;
}
var obj2 = createPerson("小猴",15,"男");
var obj3 = createPerson("小猪",14,"男");
var obj4 = createPerson("小沙",13,"男");
使用工厂方法创建对象
- 使用的构造函数都是Object
所以创建的对象都是Object这个类型
导致我们无法区分出多种不同类型的对象
3）构造函数
function Person(name,age,gender) {
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function () {
alert(this.name);
}
}
var per = new Person("小猴子",15,"男");
var per2 = new Person("大猪头",14,"男");
var per3 = new Person("沙和尚",13,"男");
普通函数是直接调用，构造函数需要使用new来调用
使用同一个构造函数创建的对象，我们称之为一类对象，也将一个构造函数称为一个类
我们将通过一个构造函数创建的对象，称之为该类的实例
使用instanceof可以检查一个对象是否是一个类的实例
语法：对象 instanceof 构造函数
是 true 不是false
所有的对象都是Object的后代，所以任何对象和Object做instanceof作用时都返回true
15关于原型和构造函数的关系，详见 6原型和构造函数的关系.html
当我们使用一个对象的属性或方法时，会先在自身寻找，自身中如果有，则直接使用。如果没有则去原型对象中寻找，如果原型对象中有，则使用，
如果没有则去原型的原型中寻找...直到找到Object对象的原型，Object对象的原型没有原型，如果Object中依旧没有，则返回Undefined
16.垃圾回收（GC）
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁
我们不需要也不能进行垃圾回收的操作
我们需要做的只是将这些不再使用的对象设置为null即可
17.数组的方法
push()- 该方法可以向数组的末尾添加一个或多个元素，并且返回数组新的长度
- 可以将要添加的元素作为方法的参数传递这样这些元素会自动添加到数组的末尾-该方法会将数组新的长度作为返回值返回
pop()- 该方法可以向数组的末尾删除一个或多个元素，并且将被删除的元素作为返回值返回
unshift()- 向数组的开头添加一个或多个元素，并且返回新的数组长度- 向前边插入元素，其他元素的索引依次调整
shift()- 删除数组的第一个元素，并将被删除的元素作为返回值返回
concat()- 可以连接两个或者多个数组，并将新的数组返回- 该方法不会对原数组产生影响
join()- 该方法可以将数组转换为一个字符串- 该方法不会对原数组产生影响，而是将转换后的字符创作为结果返回
join()- 中可以制定一个字符串作为参数，这个字符串将会成为数组中元素的连接符不指定连接符，默认，号
reverse()- 该方法用来反转数组（前后颠倒）直接对原数组进行修改
sort()- 用来对数组进行排序直接对原数组进行修改默认按照Unicode编码进行排序，所以对数字进行排序时，可能会得到错误的结果
slice()- 从数组中提取指定元素- 该方法不会改变原数组，而是将截取到的数组封装到一个新的数组中返回-
参数1.截取开始的位置的索引，包含开始索引2.截取结束的位置的索引，不包含结束索引第二个参数可以省略不写，这时截取从开始索引到往后的所有元素-
索引可以传递一个负值，负值表示倒数
splice()- 删除数组中的指定元素- 使用该函数会影响到原数组，会将指定元素从原数组中删除并将被删除的数组作为返回值返回-
参数第一个：表示开始位置索引 第二个：表示删除的数量 第三个及以后：可以传递新的元素，这些元素将会自动插入到开始索引前边
第二个参数为0时，不删除元素，直接往开始索引前边插入元素
18.forEach 详见8forEach.html
forEach需要一个函数作为参数
- 像这种函数，由我们创建，但是不由我们调用的，我们称之为回调函数
- 数组中有几个元素，就执行几次。每次执行时，浏览器会将遍历到的元素
以实参的形式传递进来，我们可以定义形参，来读取这些内容
- 浏览器会在回调函数中传递3个参数
第一个参数，当前正在遍历的元素
第二个参数，当前正在遍历的元素的索引
第三个参数，当前正在遍历的数组
19.在调用函数时，浏览器每次都会传递进两个隐含的参数
1.函数的上下文对象this
2.封装实参的对象arguments
- arguments 是一个类数组对象 ，也可以通过索引来操作数据，也可以获取长度
- 在调用函数时，我们所传递的实参都会在arrguments中保存
- arguments.length可以用来获取实参的长度
- 即使不定义形参也可以通过arguments来使用实参
function f1(){
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f1(12,23,45); //12 23 45
20.Date对象
getDate()获取当前日期对象是几号getDay()获取当前天时是周几返回0-6的值，0表示周日...
getMonth()- 获取当前时间对象的月份，返回0-11的值0表示1月 1表示2月...
getFullYear()- 获取当前时间对象的年份
getTime()- 获取当前日期对象的时间戳-
时间戳：指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的秒数（1s = 1000 ms）
21.Math对象
Math.PI表示圆周率ads()可以用来计算一个数的绝对值
Math.ceil(1.1)可以对一个数进行向上取整，小数位只要有数，自动进1
Math.floor(1.9)可以对一个数进行向下取整，小数部分会被舍去
Math.round(1.5)四舍五入
Math.random()- 生成一个0-1之间的随机数
Math.random()*10- 生成一个0-10之间的随机数
Math.round(Math.random()*x)- 生成一个0-x之间的随机数
Math.round(Math.random()*(y-x))+x- 生成一个x-y之间的随机数
max() 获取多个数中的最大值
min() 获取多个数中的最小值
Math.pow(x,y) - 返回x的y次幂
Math.sqrt() 开平方
22.DOM：文档对象模型，把网页变成JS中的文档对象进行增删改查操作。例如：document.getElementById()，onclick，
appendChild():把新的节点添加到指定节点 removeChild():删除子节点 等进行操作
23.BOM：浏览器对象模型，用来操作浏览器的。例如：window、history等
24.setInterval()- 定时调用- 可以将一个函数，每隔一段时间执行一次
- 参数1.回调函数，该函数会每隔一段时间被调用一次
- 参数2.每次调用间隔的时间，单位是毫秒- 返回值返回一个number类型的数据这个数字用来作为定时器的唯一标识
clearInterval() 可以用来关闭一个定时器需要一个定时器的标识作为参数，这样将关闭表示对应的定时器
25.setTimeout
- 延时调用一个函数不马上执行。而是隔一段时间以后再执行，只执行一次
- 定时调用执行多次，延时调用只执行一次
- 延时调用和定时调用实际上是可以互相代替的，在开发中，根据需要去选择
26.JSPON是一种数据交换的格式，代替XML进行前后端数据传递。
JSON.parse()
- 需要一个JSON字符串作为参数，会将该字符串转换为JS对象
JSON.stringify()
- 需要一个js对象作为参数，会返回JSON字符串
四、高深JS
1.typeof:可以判断undefined/数值/字符串/布尔值/function，不能判断null与object与array
2.基本类型：保存就是基本类型的数据（栈）；引用类型：保存的是地址值（堆）。
3.回调函数：你定义的，你没有调，但最终函数执行了。常见的回调函数：dom事件的回调函数、定时器回调函数、ajax请求回调函数、生命周期回调函数
4.如何确定this的值？
* test():window
* p.test():p
* new test():新创建的对象
* p.call(obj):obj
5.原型
instanceof是如何判断的？
* 表达式：A instanceof B*
如果B函数的显示原型对象在A对象的原型链上，返回true，否则返回false
6.闭包
产生条件
1函数嵌套
2内部函数引用了外部函数的数据（变量/函数）
作用
1.使用函数内部的变量在函数执行完后，仍然存活在内存中（延长了局部变量的生命周期）
2.让函数外部可以操作（读写）到函数内部的数据（变量/函数）
闭包：函数A 里面包含了 函数B，而 函数B 里面使用了 函数A 的变量，那么 函数B 被称为闭包。
function A() {
var a = 1;
function B() {
console.log(a);
}
return B();
}
闭包就是能够读取其他函数内部变量的函数，闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中
闭包的坏处就是消耗内存、不正当使用会造成内存溢出的问题
闭包的经典问题
for(var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
答案：3个3
解析：首先，for 循环是同步代码，先执行三遍 for，i 变成了 3；然后，再执行异步代码 setTimeout，这时候输出的 i，只能是 3 个 3 了
有什么办法依次输出0 1 2
1）使用let
for(let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
在这里，每个 let 和代码块结合起来形成块级作用域，当 setTimeout() 打印时，会寻找最近的块级作用域中的 i，所以依次打印出 0 1 2
五、ES5
1.严格模式‘use strict’
1.理解：
除了正常运行模式（混杂模式），ES5添加了第二种运行模式：“严格模式”（strict mode）。这种模式，使得JavaScript在更严格的语法条件下运行
2.目的/作用
消除Javascript语法的一些不合理。不严谨之处，减少一些怪异的行为
消除代码运行的一些不安全之处，为代码的安全运行保驾护航
为未来新版本的Javascripe做好铺垫
3.使用
在全局或函数的第一条语句定义为：‘use strict’
如果浏览器不支持，只解析为一条简单的语句，没有任何副作用
4.语法和行为改变
必须使用var声明变量
禁止自定义的函数中的this指向window
创建 eval 作用域，即为块级作用域
对象不能由重名的属性
2.object扩展
1.Object新增一个方法，Object.create();，用来以一个对象为基础创建另一个对象，新建的对象的__proto__指向基础对象
var obj = {name:'maycpou',age:18};
var obj1 = Object.create(obj,{
sex:{//新增一个sex属性，该属性在obj1上而不是在__proto__上
value:'男',//sex属性的值
writable:true,//sex属性是否为可写的，即是否能用obj1.sex='女'改变属性的值，默认是false
configurable:true,//sex属性是否可被删除，即是否能用deleteobj1.sex删除sex属性，默认是false
enumerable:true//sex属性是否是可被列举的，即用for(var i in obj1){console.log(i);}是否能遍历到sex属性，默认是false
}
});
console.log(obj1);
/*
sex: "男"
[[Prototype]]: Object
age: 18
name: "maycpou"
*/
2.Object新增一个方法，Object.defineProperties();，用来给一个对象新增属性
对象本身的两个方法
* get propertyName(){} 用来得到当前属性值的回调函数
* set propertyName(){} 用来监视当前属性值变化的回调函数
var obj2 = { firstName: 'tom', lastName: 'boston' };
Object.defineProperties(obj2, {//这个方法用于给一个对象添加属性
fullName: {//新增的属性名称是fullName
get: function () {//设置get方法，用来获取新增属性fullName的值
return this.firstName +' '+ this.lastName;
},
set: function (data) {//这个方法在fullName属性即将改变的时候调用，data是即将改变的fullName的值
//当使用obj2.fullName = 'jack foo';的时候，并不会直接改变fullName的属性，
//而是会调用这个方法
var names = data.split(' ');
this.firstName = names[0];
this.firstName = names[1];
}
}
});
console.log(obj2)
/*
firstName: "foo"
lastName: "boston"
fullName: "foo boston"
*/
obj2.fullName='jack foo';
console.log(obj2.fullName);
// foo boston
3.array扩展
var arr = [2,4,3,1,2,6,5,4];
扩展1
/*得到值在数组中的第一个坐标*/
console.log(arr.indexOf(4));//1
/*得到值在数组中的最后一个坐标*/
console.log(arr.lastIndexOf(4));//7
扩展2
/*遍历数组*/
arr.forEach(function (item,index,arr) {
//每一项的值 下标 数组
console.log(item,index,arr)
})
扩展3
/*遍历数组返回一个新数组，返回加工后的值*/
var arr1 = arr.map(function (item,index) {
return item + 10;
});
console.log(arr1,arr)
扩展4
/*遍历过滤出一个新的子数组，返回条件为true的值4*/
var arr2 = arr.filter(function (item,index) {
return item > 3
})
console.log(arr2,arr)
4.函数扩展之bind，详细见10函数的扩展.html
六、ES6
1.let关键字
1.作用：
* 与var类似，用于声明一个变量
2.特点
* 在块作用域有效
* 不能重复声明
* 不会预处理，不存在变量提升
3.应用
* 循环遍历加监听
* 使用let取代var是趋势
2.const关键字
1.作用：
* 定义一个常量
2.特点：
* 不能修改
* 其他特点同let
3.应用：
* 保存不用改变的数据
let、const、var区别
1）块级作用域：let 和 const 存在块级作用域，var不存在
2）变量提升：var 存在变量提升，let和const不存在，即只能在声明后使用，否则会报错
3）给全局添加属性：var 声明的变量为全局变量，并且将该变量添加为全局对象的属性，let 和 const 不会
4）重复声明：var定义的变量可以重复声明，let和const不可
3.变量的解构赋值
1.理解
*从对象或数组中提取数据，并赋值给多个变量（多个）
2.用途
* 给多个形参赋值
3.例子：
/*let username = obj.username let age = obj.age*/
let {username,age} = obj;
4.模板字符串
1.作用：简化字符串的拼接
* 模板字符串必须用``包含
* 变化的部分使用${xxx}定义
2.例子：
<!--let str = '我的名字叫：' + obj.username + '，我今年的年龄是'+ obj.age
-->
let str = `我的名字叫${obj.username}，我的今年的年龄是${obj.age}`
5.箭头函数
但箭头函数函数体只有一个一句时。不需要用括号包围
箭头函数和普通函数的区别
1）箭头函数比普通函数更加简洁
2）箭头函数没用自己的this，普通函数谁调用，指向谁。箭头函数指向父级上一层继承
6.三点运算符
用来取代arguments，但比arguments灵活。arguments 函数中用来放函数参数的伪数组，不能遍历，用三点运算符可以
7.形参默认值
* 形参的默认值-----当不传入参数的时候默认使用形参里的默认值
function Point (x = 1,y = 2){
this.x = x
this.y = y
}
8.promise
1.了解
* Promise对象：代表了未来某个时刻将要发生的事件（通常是一个异步操作）
* 有了promise对象，可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数（俗称“回调地狱”）
2.使用Promise基本步骤
new Promise((resolve,reject)=>{
//初始化Promise状态为pending
// 异步操作，如 ajax、setTimeout等
setTimeout(()=>{
resolve('你好，世界')
},2000)
}).then(res)=>{
// 成功,自动修改Promise的值为fullfilled
console.log(res)
}.then(err)=>{
// 失败,自动修改Promise的值为rejected
console.log(res)
}
3.promise对象的3个状态
* pending：初始化对象
* fullfilled：成功状态
* rejected：失败状态
9.symbol
用法是用来定义对象的唯一属性名。
特点：
1.Symbol属性对应的值是唯一的，解决命名冲突问题
2.Symbol的值不能与其他数据进行计算，包括同字符串拼接
3.for in，for of遍历时不会遍历symbol属性
写法：
let sy = Symbol("key1");
let syObject = {};
syObject[sy] = "kk";
console.log(syObject); // {Symbol(key1): "kk"}
10.Iterator迭代器和Generator生成器，详见12Iterator迭代器和Generator.html
11.async函数
概念：真正意义上去解决异步回调问题，同步流程表达异步操作
本质：Generator的语法糖
语法：
async function foo(){
await 异步操作
await 异步操作
}
12.for of循环遍历
for(let value of target){}
13.set容器:多个无序的不可重复的value集合体，是一个构造函数
14.map容器: 多个无序 key 不重复的 keyvalue 的集合体.相当于一个二维数组
详见: 13set和map容器.html
七、VUE
1.Vue生命周期总共有几个阶段？它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后；DOM 渲染在 mounted 中就已经完成了
beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
2.v-show是css切换，html元素都会存在，只是CSS中的display显示或隐藏。v-if是完整的销毁和重新创建，使用 频繁切换时用v-show，运行时较少改变时用v-if
3.基本语法：
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值使用
v-html 指令用于输出 html 代码
指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-if 指令将根据表达式的值为true或false来决定是否执行语句参数在指令后以冒号指明
v-bind 指令被用来响应地更新 HTML 属性 （绑定）
<!-- 完整语法 --><a v-bind:href="url"></a>
<!-- 缩写 --><a :href="url"></a>
v-on 指令，它用于监听 DOM 事件在 input 输入框中我们可以使用
<!-- 完整语法 --><a v-on:click="doSomething"></a>
<!-- 缩写 --><a @click="doSomething"></a>
v-model 指令来实现双向数据绑定v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，
根据表单上的值，自动更新绑定的元素的值。按钮的事件我们可以使用
4.过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示 {{ message | capitalize }}
5.组件
6.自定义指令
7.路由
8.计算属性
9.监听属性
10.过渡和动画
11.插槽
八、All
1.预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染；懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数
2.解决异步回调地狱 promise、generator、async/await
3.typeof null 的结果是 object
4. 0.1 + 0.2 的结果为什么不等于 0.3？
0.1 + 0.2 !== 0.3 true
保存的时候 0.1并不为0.1 因为浮点数精度的问题
使用 (0.1 + 0.2).toFixed(2) 四舍五入 将0.1+0.2的值进行转换为小数点后2位小数
toFixed(num)
5.typeof NaN 结果是 number
6.get和post的区别
1）get和post在HTTP中都代表着请求数据，其中get请求相对来说更简单、快速，效率高些
2）get相对post安全性低
3）get有缓存，post没有
4）get体积小，post可以无限大
5）get的url参数可见，post不可见
7. @media screen and (max-width:768px) 设置响应式布局
8. Flex 弹性布局
flex-direction 属性决定主轴的方向（即项目的排列方向）。
它可能有四个值
row（默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
column-reverse:主轴为垂直方向，起点在下沿
flex-wrap默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，如果一条轴线 排不下，如何换行？
它可能去三个值。
（1）nowrap（默认）：不换行
（2）wrap:换行，第一行在上方
（3）wrap-reverse:换行，在第一行的下方
justify-content属性定义了项目在主轴上的对齐方式它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items属性定义项目在交叉轴上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上之下。
flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认 row nowrap。
.box{
flex-flow: <flex-direction><flex-wrap>;
}
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
4014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
