一、ES5

1、保护对象（属性、方法）

1）、保护对象

（1）、四大特性

Object.defineProperties(obj,{
		"属性名":{
			value:实际保存值,
			writable: true/false,//开关：控制着这个属性名是否可以被修改
			enumerable: true/false,//开关：控制着这个属性名是否可以被for in循环遍历到
			configurable: true/false,//开关：控制着这个属性名是否可以被删除 - 这一句是总开关，一旦设置为false，其他特性不允许在修改，一旦设置为false不可逆
		}
	   })

（2）、三个级别

防扩展：禁止给对象添加新属Object.preventExtensions(obj);
密封：禁止给对象添加新属性和删除属性Object.seal(obj);
冻结：禁止给对象添加和删除和修改Object.freeze(obj);

2、数组的API

1）、判断

判断结果一定是一个布尔值

（1）every

每一个 - 要求每一个元素都要满足，结果才为true，只要有一个不满足就为false - 类似于&&

语法：var bool=arr.every(function(val,i,arr){
	return 判断条件;
			      })
//val - 当前值
//i   - 当前下标
//arr - 数组本身

（2）、some

有一些 - 要求每一个元素都不满足，结果才为false，只要有一个满足就为true - 类似于||

语法：var bool=arr.some(function(val,i,arr){
	return 判断条件;
			      })

2）、遍历

（1）forEach

遍历数组，直接修改原数组

语法：arr.forEach(function(val,i,arr){
	直接做操作
			      })

（2）、map

遍历数组，不修改原数组返回一个新数组

语法：var newArr=arr.map(function(val,i,arr){
	return 操作的结果
			      })

3）、过滤和汇总

（1）、过滤

筛选出自己想要的，但是不会修改原数组

语法：var subArr=arr.filter(function(val,i,arr){
	return 判断条件;
			      })

（2）、汇总

把数组中的每个元素汇总到一起

语法：var sum=arr.reduce(function(prev,val,i,arr){
	return prev+val;
		 },基础值);//基础值会和最后的结果加在一起

3、call/apply/bind：不是自己的方法也可以使用

1)/call/apply：临时替换了函数中的this

（1）、语法

函数名.call(借用的对象,实参,...);

单独传入每一个实参函数名.apply(借用的对象,arr);
只能传入一个实参是一个数组，apply其实会悄悄的将数组打散

（2）、强调：call/apply，相当于立刻调用函数，立即执行

2）、bind：永久替换了函数中的this

创建了一个和原函数完全相同功能的新函数
将新函数中的this永久绑定为了指定对象
将新函数中的部分参数永久固定

（1）、用法

var 新函数=原函数.bind(指定对象,永久实参,...) - 不是立刻执行的，需要自己调用

（2）、强调

bind绑定的新函数没有办法被call/apply借走

二、ES6

1、模板字符串

可以在字符串中放入变量 - 不需要再做字符串拼接，在字符串中实现了一个简单的js的环境语法： `我的名字叫${name}`

2、块级作用域

尽量优先使用let创建变量
let 变量名=值;

作用

禁止声明提前
添加了块级作用域，一个{}就是一个块HTML/XHTML/DHTML/XML分别是什么
记录着当前触发事件的元素的下标

3、箭头函数

简化回调函数

1)、公式

去掉function,()和{}之间添加=>,形参如果只有一个，则省略掉()，函数体如果只有一句话，省略{}，函数体只有一句话并且是return，return和{}都省略

2）、特殊

千万不要将事件也简化为箭头函数 - 暂时

三、DOM

1、HTML/XHTML/DHTML/XML分别是什么

HTML:网页
XHTML:更严格的网页
DHTML:动态的网页：D：Dynamic：其实并不是新技术、新概念，是将现有技术的整合的统称，使我们的网页在离线状态依然具有动态效果 DHTML：HTML+CSS+JS(dom);
XML:数据格式

2、DOM

原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为3个部分

核心DOM：【无敌】，既可以操作HTML又可以操作XML，但是API比较繁琐
HTML DOM：只能操作HTML，API简单，缺点：比如属性部分，只能访问/设置标准属性，不能操作自定义属性
XML DOM：只能操作XML，XML基本已经被淘汰了 - 现在最流行的数据格式JSON

开发建议

优先使用HTML DOM，HTML DOM满足不了在用核心DOM补充

3、每个DOM元素都有三大属性：

1）、xx.nodeType描述节点的类型

document节点：9
element节点：1
attribute节点：2
text节点：3

2）、xx.nodeValue：获取属性值

获取一个属性节点的值

3）、xx.nodeName：节点的名称，判是什么标签

返回是一个全大写的标签名

4、递归

简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来

1）、何时使用

遍历DOM树，专门用于遍历层级不明确的情况，既可以遍历层级不明确的DOM，也可以遍历层级不明确的数据

2）、如何使用递归：2步

function 函数名(root){
	1、第一层你要做什么操作直接做
        2、判断他有没有下一级，如果由下一级再次调用此函数，只不过传入的实参是他的下一次
		}

5、API直接查找元素：

1）、通过HTML的一些特点去找元素

id：var elem=document.getElementById("id"); - 找到了是单个元素，没找到null
tagname/class/name：var elems= document.getElementsByTagName/ClassName/Name("标签名/class名"); - 找到了是集合，没找到空集合,表单控件元素尽量可以不用写class，因为必写name

2)、通过css选择器去获取元素：

单个元素：var elem=document.querySelector("任意css选择器");万一选择器匹配到多个，只会返回第一个,没找到null
多个元素：var elems=document.querySelectorAll("任意css选择器");找到了返回集合，没找到返回空集合,更适合做复杂查找

四、BOM

1、window

1）、window对象提供的东西：

（1）、网页打开新链接的方式

替换当前页面，可以后退：

HTML：<a href="url">内容</a>
JS：open("url","_self");

替换当前页面，禁止后退： - 场景：电商网站：付款后，禁止后退

history对象：记录着当前窗口的历史记录，只有有了历史才能前进后退
location对象：记录着当前窗口的正在打开的url，他有一个方法叫做替换，不会产生历史记录 JS：location.replace("新url");

在新窗口打开，可以打开多个：

HTML：<a href="url" target="_blank">内容</a>
JS：open("url","_blank");

在新窗口打开，只能开打一个：- 场景：电商网站：只允许用户打开一个付款页面

HTML：<a href="url" target="自定义name">内容</a>
JS：open("url","自定义");

每一个窗口其实底层都有一个名字，如果重新打开相同name，新打开的窗口会将就的窗口给替换掉，_self:自己窗口的名字，_blank:新建一个随机的名字

2)、window提供的属性和方法：

属性

获取浏览器的完整大小：outerWidth/Height;
获取到浏览器的文档显示区域的大小：innerWidth/Height; - body的大小
获取到屏幕的完整大小：screen.width/height;

方法

打开窗口：var newW=open("url","target/自定义","width=,height=,left=,top=");

注意

第三个配置参数没有传入时，大小和浏览器一样，并且粘在浏览器上面的，但是如果有了第三个参数，脱离浏览器
宽高不能设置的太小了

关闭窗口：window/newW.close();
修改窗口的大小：newW.resizeTo(newW,newH);
修改窗口的位置：newW.moveTo(x,y);

获取鼠标的位置：2步

在事件函数中的小括号里传入一个形参e，自动获取到事件对象event
获取坐标：

e.screenX/Y - 鼠标相对于屏幕的坐标：鼠标就算在最上面也是70px左右
e.clientX/Y - 鼠标相对于文档显示区域的坐标：网页不管多长多大，始终顶部是0，底部是900多
e.pageX/Y - 鼠标相对于整个页面的坐标 - 跟随我们的网页变化

完成鼠标跟随动画

window/document.onmousemove - 在页面的任何位置移动鼠标都会触发
js的加载速度比图片的加载速度快，使用加载事件：onload

3)、定时器：2种

周期性定时器：每过一段时间，会执行一次定时器中的操作 开启：timer=setInterval(callback,间隔毫秒数) 停止：clearInterval(timer);
一次性定时器：等待一段时间，执行一次定时器之中的操作就停止了 开启：timer=setTimeout(callback,等待毫秒数) 停止：clearTimeout(timer); 注意：一次性和周期性底层都是一样的，甚至可以相互转换，所以到底用哪个都可以

函数和循环和定时器的区别？

函数 - 用户触发绑定事件
循环 - 一瞬间基本就结束了
定时器 - 等一段时间做一次

JavaScript入门学习第四周