带来了新的特性（API、功能、简化）
1、ES5：
1、保护对象：保护对象的成员（属性和方法）
如何保护：2种方式
1、四大特性：每个属性都有四大特性
{
value: 1001, //实际保存值的地方
writable: true, //开关：控制着这个属性是否可以被修改
enumerable: true, //开关：控制着这个属性是否可以被for in循环遍历到
configurable: true //开关：控制着这个属性是否可以被删除
}
修改四大特性：
Object.defineProperties(obj,{
"属性名":{四大特性},
...
})
2、三个级别：
1、防扩展：禁止给对象添加新属性
Object.preventExtensions(obj);
2、密封：禁止给对象添加新属性和删除属性
Object.seal(obj);
3、冻结：禁止给对象添加新属性和删除属性以及修改属性
Object.freeze(obj);
其实保护对象对于我们程序员并不重要：为什么：
1、如果你不用面向对象，用的是面向过程，连对象都没有保护个屁
2、别人基本不可能知道我们的对象名字叫什么
3、前辈们都没有保护，你保护个屁
2、*****数组的API：3组6个
1、判断：判断结果一定是一个布尔值
every - 每一个 - 要求每一个元素都要满足，结果才为true，只要有一个不满足就为false - 类似&&
语法：arr.every(function(val,i,arr){
return 判断条件;
})
val - 当前值
i - 当前值的下标
arr - 数组本身
some - 有一些 - 要求每一个元素都不满足，结果才为false，只要有一个满足就为true - 类似||
语法：
arr.some(function(val,i,arr){
return 判断条件;
})
2、遍历：将数组中的每个元素取出来执行相同 或 相似的操作
forEach - 直接修改原数组
arr.forEach(function(val,i,arr){
操作
})
map - 不修改原数组【返回】一个新数组
arr.map(function(val,i,arr){
return 操作
})
3、过滤和汇总：
过滤：筛选出自己想要的，但是不会修原数组
var subArr=arr.filter(function(val,i,arr){
return 判断条件;
})
汇总：把数组中的每个元素汇总到一起
var subArr=arr.reduce(function(prev,val,i,arr){
return prev+val;
},基础值);//基础值会和最后的结果在加再一起
以上6个API的底层都是for循环，目的 - 简化for循环，以后能不写for就不写for
3、Object.create()：根据父对象创建子对象，继承已经设置好了
语法：var 子对象=Object.create(父对象,{
"属性名":{四大特性},
});
4、面试时：严格模式：很严格
开启：在你的任意作用域的顶部加上一句话："use strict";
功能：1、禁止给未声明的变量赋值 - 解决全局污染
2、将静默失败升级为了报错
5、*****call/apply/bind：不是自己的方法也可以使用 - 笔试面试实际开发也会用到
call/apply：临时替换了函数中的this - 借用
语法：函数名.call(借用的对象,实参,...) - 单独传入每一个实参
函数名.apply(借用的对象,arr) - 只能传入一个实参是一个数组，apply其实会悄悄将数组打散
强调：call/apply,相当于立刻调用函数，立刻执行
bind：永久替换了函数中的this - 买
3件事：
1、创建了一个和原函数完全相同功能的新函数
2、将新函数中的this永久绑定为了指定对象，别人借不走了
3、将新函数中的部分参数永久固定
用法：var 新函数=函数名.bind(指定对象,永久实参,...); - 不是立刻执行，需要自己调用
强调：bind绑定的新函数没有办法被call/apply借走
个人更推荐：call/apply：借 - 白嫖
固定套路：
1、Math.max/min.apply(Math,arr);
2、Object.prototype.toString.call/apply(arr)
3、*****类数组转为普通数组：
var 新变量=Array.prototype.slice.call/apply(类数组对象)
ES5其实没有简化操作，是提供了一些新的API（新功能）
2、ES6：简化ECMAScript - 语法改变较大
1、*模块字符串：`` 可以再字符串中放入变量 - 不需要再做字符串+拼接，在字符串中实现了一个简单的js环境
语法：`我的名字叫${name}`
2、*let关键字：尽量以后【优先】使用let创建变量
let 变量名=值;
作用：
1、禁止声明提前
2、添加了块级作用域，一个{}就是一个块
3、记录着当前触发事件的元素的下标
3、*箭头函数：简化一切的回调函数
公式：去掉function，在()和{}之间添加=>，如果形参只有一个，省略()，如果函数体只有一句话，省略{}
如果函数体只有一句话，并且是return，那么{}和return都省略掉
强调：暂时不要将事件简化为箭头函数
4、垃圾：for(var v of arr){
v;//当前值
}
缺点：1、不修改原数组
2、不能遍历hash数组，也不能遍历对象
1、DOM概念
什么是DOM：Document Object Model(文档对象模型)
将每一个标签/元素/属性/文本/注释，看做是一个DOM节点/元素/对象（提供了一些操作元素的属性和方法）
面试题：HTML/XHTML/DHTML/XML;
1、HTML - 网页
2、XHTML - 更严格的网页：HTML5->XHTML->HTML4.01
3、DHTML - 动态的网页：D：Dynamic：其实并不是新技术、新概念，是将现有技术的一个整合统称，导致我们在离线版网页也具有动态效果
DHTML：HTML+CSS+JS(DOM)
4、XML - 数据格式：淘汰了，现在最流行的数据格式：JSON - javascript Object notation
DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3类
1、核心DOM：【无敌】，即可操作HTML又可以XML
缺点：API比较繁琐
2、HTML DOM：只能操作HTML，API简单，缺点：比如属性部分，只能访问/设置标准属性，不能操作自定义属性
3、XML DOM：只能操作XML，XML已经淘汰了
开发建议：优先使用HTML DOM，HTML DOM实现不了的，在用核心DOM补充
2、DOM树：树根：document - 不需要我们创建，一个页面只有一个document对象，由浏览器的js解释器自动创建
可以通过树根找到每一个DOM节点/元素/对象，提供了很多很多的API
3、每个DOM元素都有三大特性：
1、xx.nodeType：描述节点的类型
document节点：9
element节点：1
attribute节点：2
text节点：3
以前有用：判断xx是不是一个页面元素，因为以前我们找元素的方法和大家现在不一样
2、xx.nodeValue：描述属性节点的值，说白了获取属性值
以前有用：获取一个属性节点的值
3、***xx.nodeName：描述节点的名称（获取标签名） - 判断xx是什么标签
注意：返回的是一个全大写的标签名
今日唯一的目标：找元素
4、*通过 关系 获取元素：
父：xx.parentNode;
子：xx.children; - 集合：只能找到子代，不能找后代
第一个儿子：xx.firstElementChild;
最后一个儿子：xx.lastElementChild;
前一个兄弟：xx.previousElementSibling;
后一个兄弟：xx.nextElementSibling;
5、*****递归：简单来说就是函数中又一次调用了函数自己，迟早有一天会停下来
何时使用：遍历DOM树，专门用于遍历【层级不明确】的情况，即可以遍历层级不明确的DOM，也可以层级不明确的数据（多级联动）
如何使用递归：2步
function 函数名(root){
1、第一层要做什么直接做
2、判断他有没有下一级，如果有下一级，就再次调用此方法，但是传入的实参是自己的下一级
}
函数名(实际的根元素);
算法：深度优先算法！优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点
缺点：同时开启大量的函数调用，浪费的内存，只有一个情况才使用【遍历层级不明确】
递归 vs 循环
递归：优点：直观、易用
缺点：性能相对较低
循环：优点：性能相对较高
缺点：难得批爆
6、遍历层级不明确的API：TreeWalker：一个在DOM树上行走的人
缺点：1、专门为遍历层级不明确的DOM准备的，但是不能遍历层级不明确的数据
2、传入的根元素是不会做操作的
如何：固定用法：2步
1、var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ELEMENT);
2、反复调用nextNode方法找到下一个元素
while((node=tw.nextNode())!=null){
node要干什么
}
7、*API直接找元素：
1、通过HTML的一些特点去查找元素
1、id：var elem=document.getElementById("id");
2、标签名/class名/name名：
var elems=document.getElementsByTagName/ClassName/Name("标签名/class名/name名");
建议：表单控件元素尽量可以不用写class，因为必写name
2、通过css选择器去获取元素
1、单个元素：var elem=document.querySelector("任意css选择器");
强调：万一选择器匹配到了多个，只会返回第一个
没找到null
2、多个元素：var elems=document.querySelectorAll("任意css选择器");
强调：找到了返回集合，没找到返回空集合
更适合做复杂查找
*面试题：getXXX 和 queryXXX的区别？
返回结果不同：
1、getXXX：获取到返回的是一个动态集合HTMLCollection
2、queryXXX：获取到返回的是一个静态集合NodeList
动态 vs 静态：
1、动态集合：根据DOM树的改变，动态集合也会悄悄一起改变，其实会悄悄的再次查找元素
缺点：每次DOM树修改后，都会悄悄的在找一次，效率较低，不支持forEach
2、静态集合：每次修改DOM树，静态集合是不会发生变化的，只会认准你找的时候的第一次找到的样子
3优点：不必反复查找，效率较高，支持forEach
1、创建元素和渲染DOM树：3步
1、创建空标签：
var elem=document.createElement("标签名");
2、为其设置必要的属性和事件
elem.属性名="属性值";
elem.on事件名=function(){
操作
}
3、渲染到DOM树结构上
*父元素.appendChild(elem); - 将elem追加到父元素里面当最后一个儿子
父元素.insertBefore(elem,已有子元素) - 将elem追加到父元素里面的已有子元素的前面，不推荐，因为会修改其他元素的下标
父元素.replaceChild(elem,已有子元素) - 将elem追加到父元素里面的，替换掉已有子元素
2、删除元素：elem.remove();
恭喜你：核心DOM就全部学习完毕了：总结：DOM到底干了什么？ 增、删、改、查（DOM结构：元素、文本、属性、样式）
3、HTML DOM常用对象：【简化】核心DOM
1、image对象：图片对象，仅仅只是简化了创建
创建：var img=new Image();
注意：不是人人都有构造函数创建方式
2、form对象：查找元素
查找form元素：var form=document.forms[i];
查找form元素中的表单控件：var input=form.elements[i];
*专属事件：form.onsubmit=function(){//提交事件
阻止提交：return false;
}
3、*select对象：
属性：
1、options：获得select下面所有的option，完全等效于xx.children
2、*selectedIndex：获取选中项的下标 - 唯独select不需要自定义下标
方法：
1、*add(option对象);//添加：完全等效于appendChild
2、remove(i);//删除下标为i的option
专属事件：select.onchange=function(){//选中项发生改变就会触发
}
4、*option：仅仅简化了创建
var opt=new Option(innerHTML,value);
建议：如果你的option创建好就要放入到select之中：直接一句话完成4个操作
select.add(new Option("内容","值"))
1、用户确认框：
var bool=confirm("提示文字");
true->确认
false->取消
2、百度/高德地图：
固定步骤：
1、打开百度，搜索百度地图开放平台
2、注册登录
3、拉到最下面，点击立即注册为开发者，自动跳转到控制台
4、应用管理->我的应用->创建应用（需要实名制认证）
5、创建应用->名称随意，类型选择浏览器端，白名单写一个*
6、恭喜你获得了百度地图的密钥
7、鼠标放到导航条上开发文档->javascript API->示例DEMO
8、挑选你喜欢的地图，复制到你的项目之中（可以修改css，修改js）
9、假设你喜欢多个地图，可以汇总到一起，只要复制没有代码
1、BOM：Browser Object Model：浏览器对象模型：专门提供了用于操作浏览器的一些API，没有标准（大部分浏览器还是统一的实现了API，但是老IE和大家不太一样，所以有大量的兼容性问题）
重点：定时器、事件对象event
2、window对象介绍：扮演着两个角色 1、代替了ES中Global，充当全局对象 2、自己带有一些属性和方法：指代当前窗口本身
3、window对象提供的东西 1、网页打开新链接的方式：4种 目的：提升用户的体验感 1、替换当前页面，可以后退 HTML：内容 JS：open("url","_self");
2、替换当前页面，禁止后退 - 场景：电商网站，付款后，不允许后退
history对象：记录着当前窗口的历史记录（打开过的url），只有有了历史过后才能前进后退
location对象：记录着当前窗口正在打开url，他有一个方法叫做替换，替换是不会产生任何历史的，但是替换url后页面必然会发生改变
JS：location.replace("新url")
3、在新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4、在新窗口打开，只能打开一个 - 场景：电商网站，只允许用户打开一个付款页面
HTML：<a href="url" target="自定义name">内容</a>
JS：open("url","自定义name");
意思是：每个窗口的底层都有一个名字，如果重新打开相同的name，新打开的会把旧的窗口替换掉
扩展：a标签的用途？
1、跳转
2、锚点
3、下载：<a href="xx.zip/rar/exe/msi"></a>
4、打开：<a href="xx.txt/图片后缀"></a>
5、直接书写javascript：<a href="javascript:js语句;"></a>
2、window的属性和方法：
属性：获取浏览器的大小：outerWidth/outerHeight;
*获取浏览器的文档显示区域的大小：innerWidth/innerHeight;
获取屏幕的大小：screen.width/height;
方法：
1、打开窗口：var newWindow=open("url","target/自定义name","width=,height=,left=,top=");
注意：1、第三个配置参数没有传入时，大小和浏览器一样，并且粘在浏览器上面和浏览器融为一体
2、如果传了第三个参数，脱离浏览器形成一个小窗口，并且宽高不能设置太小，并且这种小窗口可以自己拿一个变量接住他
2、关闭窗口：window/newWindow.close();
3、修改窗口的大小：newWindow.resizeTo(新的宽,新的高)
4、修改窗口的位置：newWindow.moveTo(新的x,新的y)
扩展：***获取鼠标的位置：2步
1、在事件函数的小括号里面传入一个形参e：自动获得到事件对象event
2、获取坐标：
e.screeX/Y - 鼠标相对于屏幕的坐标
e.clientX/Y - 鼠标相对于文档显示区域的坐标
*e.pageX/Y - 鼠标相对于页面的坐标
完成鼠标跟随动画：
1、window/document.onmousemove - 在页面的任何位置移动鼠标都会触发
2、js的加载速度比图片的加载速度要快，使用加载事件：onload -> 放在onload事件里的代码可以说是最后执行的
*****定时器：2种
何时使用：只要是需要等待一段时间在执行的操作都需要用上定时器
1、周期性定时器：每过一段时间，会执行一次定时器中的操作
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性定时器：等待一段时间，执行一次定时器中的操作就停止了
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
注意：一次性和周期性的底层是一样的，甚至可以相互转换，所以到底用哪个无所谓
总结：面试题：函数 和 循环 和 定时器 都能反复执行，区别在哪里？- 时机不同
1、函数 - 程序员调用了几次就执行几次，或者 用户触发了几次就执行几次
2、循环 - 一瞬间就已经执行完毕了
3、定时器 - 等一段时间做一次
1、BOM：Browser Object Model：浏览器对象模型：专门提供了用于操作浏览器的一些API，没有标准（大部分浏览器还是统一的实现了API，但是老IE和大家不太一样，所以有大量的兼容性问题）
重点：定时器、事件对象event
2、window对象介绍：扮演着两个角色
1、代替了ES中Global，充当全局对象
2、自己带有一些属性和方法：指代当前窗口本身
3、window对象提供的东西
1、网页打开新链接的方式：4种
目的：提升用户的体验感
1、替换当前页面，可以后退
HTML：<a href="url">内容</a>
JS：open("url","_self");
2、替换当前页面，禁止后退 - 场景：电商网站，付款后，不允许后退
history对象：记录着当前窗口的历史记录（打开过的url），只有有了历史过后才能前进后退
location对象：记录着当前窗口正在打开url，他有一个方法叫做替换，替换是不会产生任何历史的，但是替换url后页面必然会发生改变
JS：location.replace("新url")
3、在新窗口打开，可以打开多个
HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");
4、在新窗口打开，只能打开一个 - 场景：电商网站，只允许用户打开一个付款页面
HTML：<a href="url" target="自定义name">内容</a>
JS：open("url","自定义name");
意思是：每个窗口的底层都有一个名字，如果重新打开相同的name，新打开的会把旧的窗口替换掉
扩展：a标签的用途？
1、跳转
2、锚点
3、下载：<a href="xx.zip/rar/exe/msi"></a>
4、打开：<a href="xx.txt/图片后缀"></a>
5、直接书写javascript：<a href="javascript:js语句;"></a>
2、window的属性和方法：
属性：获取浏览器的大小：outerWidth/outerHeight;
*获取浏览器的文档显示区域的大小：innerWidth/innerHeight;
获取屏幕的大小：screen.width/height;
方法：
1、打开窗口：var newWindow=open("url","target/自定义name","width=,height=,left=,top=");
注意：1、第三个配置参数没有传入时，大小和浏览器一样，并且粘在浏览器上面和浏览器融为一体
2、如果传了第三个参数，脱离浏览器形成一个小窗口，并且宽高不能设置太小，并且这种小窗口可以自己拿一个变量接住他
2、关闭窗口：window/newWindow.close();
3、修改窗口的大小：newWindow.resizeTo(新的宽,新的高)
4、修改窗口的位置：newWindow.moveTo(新的x,新的y)
扩展：***获取鼠标的位置：2步
1、在事件函数的小括号里面传入一个形参e：自动获得到事件对象event
2、获取坐标：
e.screeX/Y - 鼠标相对于屏幕的坐标
e.clientX/Y - 鼠标相对于文档显示区域的坐标
*e.pageX/Y - 鼠标相对于页面的坐标
完成鼠标跟随动画：
1、window/document.onmousemove - 在页面的任何位置移动鼠标都会触发
2、js的加载速度比图片的加载速度要快，使用加载事件：onload -> 放在onload事件里的代码可以说是最后执行的
*****定时器：2种
何时使用：只要是需要等待一段时间在执行的操作都需要用上定时器
1、周期性定时器：每过一段时间，会执行一次定时器中的操作
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性定时器：等待一段时间，执行一次定时器中的操作就停止了
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
注意：一次性和周期性的底层是一样的，甚至可以相互转换，所以到底用哪个无所谓
总结：面试题：函数 和 循环 和 定时器 都能反复执行，区别在哪里？- 时机不同
1、函数 - 程序员调用了几次就执行几次，或者 用户触发了几次就执行几次
2、循环 - 一瞬间就已经执行完毕了
3、定时器 - 等一段时间做一次
