知识点总结

又到了知识点总结的时期了，这个星期学的知识点很重要而且困难程度也很高，需要反复记忆学习。努力加油！！！

1、Error对象 - 错误
1、*** 浏览器自带4种错误类型：可以快速找到自己的错误
语法错误：SyntaxError - 多半都是你的符号写错了

引用错误：ReferenceError - 没有创建就直接使用了
类型错误：TypeError - 不是你的方法，你却去使用了
范围错误：RangeError - 只有一个API会碰到：num.toFixed(d);//d的取值范围只能在0-100之间

2、只要发生错误，就会报错，会导致后续代码终止，我们不希望
错误处理：就算发生错误，我们也不希望报错，而是给一个错误提示，让后续代码依然可以继续执行
语法：
try{
只放入你可能出错的代码
}catch(err){
发生错误后才会执行
console.log(err);//err就是我们的错误提示，英文
console.log("中文的错误提示")
}
try...catch：的性能非常差：几乎放在里面的代码效率都会被降到最低
*可以用一个技术代替：分支
*开发经验：记住一切的客户端输入/用户输入都是坏人 - 你不必担心，只要你做好防护就没问题（!isNaN、正则）

3、抛出自定义错误：
throw new Error("自定义错误信息") - 只要是报错就会卡主后续代码

2、***** Function对象：
1、创建：3种
1、* 声明方式：function 函数名(形参,...){函数体;return 返回值}; - 会完整的声明提前
2、直接量方式：var 函数名=function(形参,...){函数体;return 返回值}; - 只有函数名部分会提前，但是赋值留在原地的，通过这个方法我们看出来函数名其实就是一个变量名
3、* 构造函数方式：var 函数名=new Function("形参1","形参2",..."函数体;return 返回值");
何时使用：如果你的函数体不是固定的而是动态拼接的一个字符串
var arr=[12,5,25,432,7,54,4312,41];
var user=prompt("请进行排序，如果输入a-b则为升序排列，如果输入b-a则为降序排列")
var compare=new Function("a","b","return "+user);
arr.sort(compare);
2、调用时，如果还有return，记得接住：
var result=函数名(实参,...)
3、考点：
1、创建的方式
2、作用域：变量的使用规则：优先使用局部的，局部没有找全局，全局没有则报错
3、声明提前
4、按值传递
5、重载overload：相同的函数名，根据传入的实参的不同，可以自动选择对应的函数进行执行
为什么：减轻程序员的压力
问题：js的语法不支持重载
js不允许多个同名函数同时存在，如果同时存在，最后的会覆盖之前所有的
解决：在【函数中】有一个对象 - arguments对象
什么是arguments：只能在函数中使用，自动创建，是一个类数组对象（支持下标、length、遍历）
作用：*** 可以接收住所有的传入的实参
*** arguments可以做的事：
1、实现重载：通过在函数内部判断arguments的不同，执行不同的操作
2、以后有没有形参都无所谓啦
3、正式开发中，有可能会将多个函数整合为一个函数 - 减轻程序员的压力
6、匿名函数：没有名字的函数
1、匿名函数自调
为什么：节约内存，因为匿名函数，没有变量引用着，用完，垃圾回收器就会发现此引用类型没有人引用着，则垃圾回收器的计数器为0，垃圾回收器就会吧此函数释放掉
(function(){
//以后可以代替全局代码写法，尽量的不要再去外部书写任何代码 })();
2、匿名函数回调：将函数作为了一个实参，传递给其他函数调用
1、* 学习回调的目的：让你们知道哪些东西叫做回调函数，只要是匿名函数，没有自调，就是回调
arr.sort(function(){})
str.replace(reg,function(){})

elem.onclick=function(){}
2、以后ES6有个技术，箭头函数：简化一切回调函数的
3、了解了一下回调函数的原理
7、***** 闭包 - js面试必然有一道题：两链一包

1、***** Function 作用域：2种 1、全局：随处可用，可以被反复使用。缺点：容易被污染
2、函数：只能在函数内部调用时使用，不会被污染。缺点：一次性的，是会自动释放的
*** 函数的执行原理：
1、程序加载时：
创建执行环境栈（ECS）：保存函数调用顺序的数组
首先压入全局执行环境（全局EC）
全局EC引用着全局对象window
window中保存全局变量和全局函数

2、定义函数时
创建出函数对象：封装代码段
在函数对象中有一个scope（作用域）属性：记录着此函数来自的作用域是哪里
全局函数的scope都是window
3、调用前
在执行环境栈（ECS）压入新的EC（函数的EC）
创建活动对象（AO）：保存着本次函数调用时用到的局部变量
在函数的EC中有一个scope chain（作用域链）属性引用着AO
AO有一个parent属性是函数的scope引用着的对象

4、调用时：正是因为前面三步，我们才有了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错
5、调用完：函数的EC会出栈，AO自动释放，局部变量也就自动释放了
*** 两链一包：
作用域链：以函数的EC的scope chain属性为起点，经过AO，逐级引用，形成的一条链式结构
作用：查找变量，带来了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错

1、***** 闭包：我们发现全局和函数都有缺点，希望保护一个【可以反复使用的局部变量】的一种词法结构 - 其实还是函数
何时使用：希望保护一个【可以反复使用的局部变量】的时候
如何使用：
1、两个函数进行嵌套
2、外层函数创建出受保护的变量
3、外层函数要return出内层函数
4、内层函数要去操作受保护的变量
function f1(){
创建的受保护的变量
return function(){
操作受保护的变量
}
}

强调：
1、判断是不是闭包，有没有两个函数嵌套，返回内层函数，内层函数在操作受保护的变量
2、外层函数调用几次，就会创建几个闭包，受保护的变量就有了几个副本
3、同一次外层函数调用，返回的内层函数，都是在操作同一个受保护的变量

缺点：受保护的变量，永远不会被释放，使用过多，会导致内存泄漏 - 不可多用
问题：应该在哪里用呢？ - 防抖节流
1、三个事件需要防抖节流
1、elem.onmousemove - 鼠标移动事件
2、input.oninput - 每次输出/改变都会触发
3、window.onresize - 每次窗口的大小发生变化就会触发

公式：
xxxx=function(){
result();
}

1、ES5： 1、保护对象：保护对象的成员（属性和方法）对象是object 如何保护： 1、四大特性 - 每一个属性或方法都有四大特性如何设置四大特性： Object.defineProperties(obj,{ "属性名":{ value: 实际保存值的地方, writable: true/false,//开关：控制着这个属性是否可以被修改 enumerable: true/false,//开关：控制着这个属性是否可以被for in循环遍历到 configurable: true/false,//开关：控制着这个属性是否可以被删除 } })

2、三个级别：
	1、防扩展：禁止给对象添加新属性
		Object.preventExtensions(obj);

	2、密封：禁止给对象添加新属性和删除属性
		Object.seal(obj);

	3、冻结：禁止给对象添加新属性和删除属性和修改属性
		Object.freeze(obj);

	其实保护对象对我们程序员并不重要：为什么
		1、如果你用的是面向过程，你保护个屁
		2、别人基本不可能知道我们的对象名叫什么
		3、前辈们都没有保护，你保护个啥

	学习的目的：应付鄙视和面试

2、***** 数组的新的API：3组6个 1、判断：判断结果一定是一个布尔值 every：每一个 - 要求每一个元素都要满足，结果才为true，只要有一个不满足，结果则为false - 类似&&：碰到false就不会再执行后续操作了语法：arr.every(function(val,i,arr){ //val - 当前值 //i - 当前下标 //arr - 数组本身 return 判断条件 })

	some：有一些 - 要求每一个元素都不满足，结果才为false，只要有一个满足，结果则为true - 类似于||：碰到true就不会再执行后续操作了
		语法：arr.some(function(val,i,arr){
				return 判断条件
		      })

2、遍历：将数组中每一个元素取出来执行 相同 或 相似的操作
	forEach：遍历数组，直接修改原数组
		语法：arr.forEach(function(val,i,arr){
				直接做操作
		      })

	map：遍历数组，不修改原数组，返回一个新数组
		语法：var newArr=arr.map(function(val,i,arr){
				return 操作;
		      })

3、汇总和过滤：
	过滤：筛选出自己想要的，但是不会修改原数组
		语法：var newArr=arr.filter(function(val,i,arr){
				return 判断条件;
		      })

	汇总：把数组中的每个元素都汇总到一起
		语法：var result=arr.reduce(function(prev,val,i,arr){
				return prev+val;
		      },基础值)

以上6个API的底层都是for循环，目的 - 简化for循环

3、Object.create()：希望根据父对象创建子对象，继承自动设置完毕语法：var 子对象=Object.create(父对象,{ "自有属性":{四大特性}, ... })

4、面试：严格模式：很严格开启：在你的任何作用域的顶部都可以加上这句话："use strict" 功能：1、禁止给未声明的变量赋值 - 解决了全局污染 2、静默失败升级为错误

5、***** call/apply/bind：不是自己的方法也可以使用，不管是笔试、面试、实际开发都很常用 call/apply：【临时替换函数中的this】 - 借用数组中的方法语法：函数名.call(借用的对象,实参,...); - 单独传入每一个实参函数名.apply(借用的对象,[实参,...]); - 只能传入一个实参，是一个数组，但是其实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)==="[object Array]"
  3、***类数组转为普通数组：保存一下=Array.prototype.slice.call/apply(类数组)

ES5其实并没有任何简化操作，只是提供了更多的API

2、ES6：简化了语法 - 变化较大 1、*模板字符串：可以再字符串中放入变量，不需要在做字符串的拼接了，简化了输入法的切换， ${}还实现了一个简单的js环境语法：`我的名字叫$ {name}`

2、*块级作用域：尽量以后创建变量【优先】使用let关键字
	let 变量名=值;
	作用：
	  1、禁止了声明提前
	  2、添加了块级作用域：一个{}就是一个块
	  3、记录着当前触发事件的元素的下标

3、***箭头函数：简化回调函数
	公式：去掉function，在()和{}之间添加=>，如果形参只有一个，省略()，如果函数体只有一句话，省略{}，如果函数体只有一句话并且是return，return和{}都省略
	特殊：千万不要将事件也简化为箭头函数 - this会失效 - 暂时

4、for of循环 - 垃圾
	for(var v of arr){
		v;//当前元素
	}

	缺点：1、不能修改原数组，只能返回新数组
	      2、不支持hash数组，不支持对象


    
    1、什么是DOM：Document Object Model（文档对象模型）
将每一个标签/元素/属性/文本/注释，看做了一个DOM节点/元素/对象（提供了操作这些东西的属性和方法）

面试题：HTML/XHTML/DHTML/XML HTML - 网页 XHTML - 更严格的网页 DHTML - Dynamic：动态的网页，其实并不是新技术、新概念，只是将现有技术的整合统称，使我们网页在离线版也具有动态效果 DHTML：HTML+CSS+JS(dom) XML - 数据格式

DOM：原本是可以操作一切结构化文档的 HTML 和 XML，后来为了方便各类开发者分为了3个部分 1、核心DOM：【无敌】，既可以操作HTML 和 XML 缺点：API比较繁琐

2、HTML DOM：只能操作HTML，API简单，缺点：比如属性部分，只能操作标准属性，不能操作自定义属性

3、XML DOM：只能操作XML，XML基本已经被淘汰了 - 现在最流行的数据格式json代替了

开发建议：优先使用HTML DOM，HTML DOM实现不了的时候在用核心DOM进行补充

2、DOM树：树根：document - 不需要我们创建，一个页面只有一个document：由浏览器的js解释器自动生成可以通过数个你找到每一个DOM节点/元素/对象，提供了很多很多的API

3、每个DOM元素都有三大属性： 1、xx.nodeType：描述节点的类型 document节点：9 元素节点：1 属性节点：2 文本节点：3

	以前有用：判断xx是不是一个页面元素 - 因为以前我们找元素的方法和大家现在不一样

2、xx.nodeValue：描述节点值，说白了就是获取属性值
	以前有用：因为我们获取一个属性值没有现在这么容易

3、***xx.nodeName：描述节点名称 - 判断xx是什么标签 - 后期搭配上事件委托（利用冒泡）
	注意：返回的是一个全大写的标签名

今日唯一目标：学会找元素

4、*通过关系获取元素父：xx.parentNode; 子：xx.children; - 集合第一个儿子：xx.firstElementChild; 最后一个儿子：xx.lastElementChild; 前一个兄弟：xx.previousElementSibling; 后一个兄弟：xx.nextElementSibling;

5、***** 递归：简单来说就是函数中，又一次调用了函数自己，迟早有一天会停下来何时使用：遍历DOM，专门用于【遍历层级不明确】的情况如何使用递归：2步 function 函数名(root){ 1、第一层要做什么操作就直接做

		2、判断他有没有下一级，如果有下一级再次调用此方法，但是传入的实参是下一级		

	}

	函数名(实际的根节点)

	算法：深度优先！优先遍历当前节点的子节点，子节点遍历完毕才会调到兄弟节点
	缺点：同时开启大量的函数调用，消耗内存，只有一个情况采用：【遍历层级不明确】

	递归 vs 循环
	递归：优点：直观、易用
	      缺点：性能较低
	循环：优点：性能高，几乎不占内存
	      缺点：难得一匹

6、遍历API：【遍历层级不明确】的情况：TreeWalker：一个在DOM树上行走的人缺点：1、会自动跳过根节点的操作 2、只能遍历层级不明确的DOM树，而不能遍历层级不明确的数据如何：固定公式： 1、创建tw对象： var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/[SHOW_ELEMENT]);

2、反复调用nextNode方法找到没一个元素
	while((node=tw.nextNode())!==null){
		node要做什么操作
	}

7、*API直接查找元素 1、按照HTML的特点去查找元素 1、id：var elem=document.getElementById("id值") 2、class/标签名：var elems=document.getElementsByClassName/TagName/Name("class/标签名"); 建议：表单控件元素尽量可以不写class，因为必须要写name

2、按照CSS的选择器去查找元素 1、单个元素：var elem=document.querySelector("任意css选择器"); 强调：万一选择器匹配到多个元素，只会返回第一个没找到null

2、多个元素：var elems=document.querySelectorAll("任意css选择器");
	强调：找到了集合，没找到空集合
	更适合做复杂查找

面试题：getXXX 和 querySelectorXXX 有什么区别？
	返回结果不同：
		1、getXXX：HTMLCollection - 是一个动态集合
		2、queryXXX：NodeList - 是一个静态集合

		动态集合：根据DOM树的改变，动态集合也会悄悄改变，每一次修改DOM树，getXXX都会悄悄再次查找元素
		    缺点：每次都会悄悄重新查找，效率较低，不能使用forEach

		静态集合：每次修改DOM树，静态集合都不会发生变化，只会认准你找的时候的第一次找到的元素
		    优点：每次不会悄悄重新查找，效率较高，支持forEach

操作元素： 1、元素的内容：3个 1、*innerHTML：获取和设置元素的内容，并且识别标签 - 没有兼容性问题，老IE也支持获取：elem.innerHTML; - 往往用于判断设置：elem.innerHTML="新内容" - 添加/修改

2、textContent：获取 和 设置元素的文本，不能识别标签 - 有兼容性问题老IE不支持
	获取：elem.textContent;	-   往往用于判断
	设置：elem.textContent="新文本"	-   添加/修改
	解决：innerText - 小三上位了，此方法本来是属于老IE的，但是现在主流浏览器也支持

3、*value：获取 和 设置input的内容
	获取：input.value;	-   往往用于判断
	设置：input.value="新文本"	-   添加/修改

2、元素的属性： 1、*获取属性值： - 往往用于判断核心DOM：elem.getAttribute("属性名"); - 虽然API比较繁琐，但是无敌的

	HTML DOM：elem.属性名	  -	虽然简单，但是不能操作自定义属性

2、*设置属性值： - 添加/修改
	核心DOM：elem.setAttribute("属性名","属性值");	-   虽然API比较繁琐，但是无敌的

	HTML DOM：elem.属性名="属性值"	  -	虽然简单，但是不能操作自定义属性

3、删除属性值：
       *核心DOM：elem.removeAttribute("属性名") - 完整删除整个属性节点

	HTML DOM：elem.属性名=""	  -  删不干净，只能删掉属性值，属性节点依然存在，而有的属性，只需要写出属性名就已经有作用（比如：href、disabled、readonly）了

4、判断有没有 - 垃圾
	elem.hasAttribute("属性名"); - 结果是一个布尔值，但是没有用，只能判断有没有，不能判断具体属性值是什么
	真正推荐判断，你还是使用获取属性值

建议：以后优先使用HTML DOM，HTML DOM实现不了在用核心DOM补充
	小心：1、class要写为className
	      2、不能操作自定义属性

3、元素的样式： 1、内联样式：优点：1、优先级高 2、不会牵一发动全身获取：elem.style.css属性名; 设置：elem.style.css属性名="css属性值";

	特殊：1、css属性名,把横线去掉换成小驼峰命名法
	      2、获取也只能获取内联样式 - 小缺点

2、样式表：
	//1、获取你想要操作的样式表
	var sheet=document.styleSheets[i];
	//2、获取所有样式规则
	var rules=sheet.cssRules;
	//3、数出 你需要操作的某个样式规则
	var rule=rules[i];
	//4、对此规则做获取或者设置
	console.log(rule.style.background);
	rule.style.background="purple";

作业： 1、通过JS来实现placeholder 2、*2_1.html *3_1.html *4_1.html（既不能用let也不能用自定义下标） 2_2.html(不必一定做出来，但是一定要思考，一定要试一试)

1、创建元素：2步 1、创建空标签：var elem=document.createElement("标签名"); 比如：var a=document.createElement("a"); 2、添加必要的属性和事件 elem.属性名="属性值" elem.on事件名=function(){操作}

以上两步只是在js内存中创建出了元素，还需要渲染到DOM树上

2、渲染页面方式：3种 *1、父元素.appendChild(新);//新元素会追加到父元素中当最后一个儿子 2、父元素.insertBefore(新,已有子元素);//新元素会追加到父元素中当儿子，会插到已有子元素的前面 3、父元素.replaceChild(新,已有子元素);//新元素会替换到父元素中当儿子，会替换已有子元素

3、删除元素：elem.remove();

核心DOM已经全部学习完毕了：总结一句话说完：增删改查DOM（元素、内容、属性、样式）

3、HTML DOM常用对象：HTML DOM就是对核心DOM进行了简化： 1、Image对象：图片对象：简化了创建方式：var img=new Image(); 不是人人都能简化创建，只有个别可以

2、Form对象：表单对象：
   简化了查找元素：var form=document.forms[i];//获取页面上的第i个form元素
   简化了查找表单控件元素：var inp=form.elements[i]//获取此form表单中的第i个表单空间元素

3、*Select对象：
	属性：1、select.options === select.children 获取到select下面的所有option
	      2、*select.selectedIndex;//获取到选中项的下标


	方法：1、*select.add(option);//将option上树
	      2、select.remove(i);//删除下标为i的option

    *专属事件：onchange - 选中项发生改变后才会触发

4、*Option对象：
   简化了创建方式：var opt=new Option("innerHTML","value");
   建议你，如果以后希望创建出opt并且放到select中：一句话完成4个操作
	select.add(new Option("innerHTML","value"))

一阶段常识：
  表单控件元素必须添加name，才能传到服务器端/后端
  有的表单控件还要添加value，用户不能输入只能选择的，我们程序员就要把value提前写好，供用户选择

js第四周知识点总结

知识点总结

ES5其实并没有任何简化操作，只是提供了更多的API