Javascript综合知识
JS综合知识
学习可以分为三个部分，基础语法、然后是Web API，最后是高级进阶！
最核心的学习，当属Web APIs了，基础语法只是一套使用规程，而中要的是，运用这台规则去解决问题，实现一套实际的项目！
面向过程编程
处理数据
注意类型转换：隐式转换，和显式转换，也就是数据的类型！(算术运算、比较运算，正号) (1+‘1’)（!）
处理逻辑
结构语句，与改变顺序的方法！这也是逻辑中一大难点！当什么时候发生什么！把条件与执行的内容分开，通过箭头的方式去指向两件事！
循环的价值，是把一组数当作一个数，也可以把一个数当作无限多个数！适合破解密码，处理数据！并且理解起来就和顺序结构一致！特别是处理数组字面量！
生成柱状图——数据、遍历生成图表，并修改盒子的大小！
核心——封装复用功能（函数）
函数是具有特定功能的代码块，是一组强相关的一条条语句！传参、返回值，作用域！也有结束语句！
函数的作用是提高代码的通用性和复用性，同类型的问题，用一套代码——函数来解决！
逻辑中断，与和或中这个语句中，可以存在任何表达式，先执行表达式，表达式，或者运算符可以多次叠加
对象，是对一种事物的具象化提取特征、属性和方法；属性名为字符串，属性值可以是任一类型，包括函数
内置对象可以直接用；内置构造函数，需要先实例化，才能使用里面的属性和方法！
预解析很难理解，变量简单，直接是未定义，但是函数预解析是什么呢
第一步存值，也就是把数据放置到内存！第二步是处理数据，可以是是结构语句或者提供的方法！
函数的高阶用法
作用域和闭包，也就是函数作用域的特殊处理，使函数内部的变量，在执行后不被销毁，并且可以通过函数去处理这个变量！
函数的参数还可以提取出来，也就意味着可以传入随机个参数
箭头函数的特征，没有this，匿名，简写，没有arguments，有剩余参数！
数组和对象的解构，也就是把值赋给多个变量！方便提取值，对于JSON类型的对象数组非常好用！也就强化处理数据的能力，配合数组方法和对象方法，可以把给定的数据，处理成理想状态再渲染到页面！
面向对象编程
深入对象，对象除了可以设置数据外，还可以通过函数提取公共部分，快速创建相关类型的对象！批量生产对象，并且，这种对象还可以使用构建函数的方法和属性值！还可以传入属性值，设置不同对象！
构造器产生对象，也就是new过程的四个步骤：创新对象、this指向新对象、执行函数、返回新对象！
构造函数要实例化，才被执行，才能创造对象，构造函数的使命就是创建对象，创建一堆类似的对象！为了复用！实例化时，可以执行console.log()，方法运算等，但最好不要，想着生产对象就好了，this就是新对象！
一切皆对象，对象的静态方法、数组的实例方法、字符串的实例方法，数字的方法！——处理数据！
原型链：也就是类，或者称为对象制作器，由构造函数和原型组成！原型有个
__proto__属性，指向制造自己的原型！原型和构造器也是互相指向，原型的constructor属性，指向构造器，构造器的prototype指向原型！
构造器和原型的this，又指向实例！实例的
__proto__属性也指向原型，可以顺时针访问，（也许可以逆时针访问），所以实例的__proto__属性的constructor属性可以访问构造器！当我们复制给原型后，需要从新指向构造器！// 类，或者原型的方式去构造实例——本质也是通过构造函数去创建实例！ class Monster { a = '666' constructor(name, hp){ this,name = name this.hp = hp this.conInner = function () { console.log('inner') } } fnOut() { console.log('outward') } } let m = new Monster('wahaha', 1000) m.__proto__.sb = '999' let n = new Monster('niubi', 1000) console.log(n) console.log(m) // Monster {name: 'wahaha', hp: 1000} // 构造器，构造函数的方式去构造实例 function Monster(name, hp) { this,name = name this.hp = hp this.conInner = function () { console.log('inner') } } Monster.prototype.fnOut = function () { console.log('outward') } let m = new Monster('wahaha', 1000) console.log(m) // Monster {name: 'wahaha', hp: 1000}
24. 面向对象编程，也就是把待解决的问题、实现的功能看成一个整体！特别是DOM操作！一般分为生产一个功能，再给功能添加上样式和事件！——以对象功能来划分问题
25. 构造函数生产的对象解决一类问题：this看成是一个实例对象，给这个对象添加属性和方法！属性是所有数据，存在本身，原材料！对象、数组、字符串等，主要是DOM对象！方法是对这些数据进行操作，封装成独立的函数（方法），用来处理这些数据（存放在内存中的数据——属性值）！再最后是与其它对象相互关联，也就是绑定在其它DOM对象的事件！也就是一系列变化又需要一个“触发位置和触发机制”！构造函数生产的对象只是实现触发效果！
26. 注意逻辑以及思路：当什么是才什么，先什么后什么！JS中主要还是面向过程编程，部分常用功能可以封装成对象，面向对象编程！逻辑——思路才是最重要的！也就是基本功！理清执行条件、执行任务、循环和遍历，以及解构！再加上内置的方法！去处理数据
## 事件机制——JS的核心
27. 了解一下深浅拷贝、捕获异常、this的指向、防抖和节流！
28. 防抖和节流是种机制，帮助减少请求的机制，一般是访问后台调取数据是，或者某些效果的触发机制！用于处理频繁触发的事件！与事件相关，频繁触发！需要不那么敏感的执行回调函数！利用的是延时函数！
### 核心中的核心——DOM对象——把网页元素当对象处理
29. 对DOM对象的增删改查——主要是改！再配合事件一起，就是交互效果，就是玩！
30. DOM改的内容最多：也就是对样式属性，或者表单的各种常用属性进行操作！属性和内容的修改，具体是:
31. 
32. DOM改中：修改常见属性，直接使用`对象.属性 = 值`，包括表单元素！
33. DOM元素修改内容有两种，一种是只是文字内容，另一种包括增加HTML结构；修改CSS样式，可以通过`对象.style.样式属性 = 值`，来修改单个属性，修改多个有两种：替换类名`元素.className = ''`、增删类名`元素对象.classList.add('')`
34. 注意表单的disabled、checked、selected，可以使用`元素对象.checked/disabled = true/false`
35. 自定义属性有妙用，注意通过`元素对象.dataset.`获取的是字符，可以是数学字符，来确认按钮！切换栏
36. 然后是对DOM元素的增删，或者关系查找，其中要想增加又得分为两部分——创建和追加！创建一种写法，追加的方式有多种方法！`父.appendChild(插子)`、`父.insertBefor(插子,兄弟)`，删除也需要父元素才能使用删除的方法`父.removeChild(删子)`
37. 查找DOM元素：找爹`元素对象.parentNode`；查找儿子元素`元素对象.children`，返回伪数组
## DOM事件
38. 操作DOM，主要是为了交互，也就是事件——事件源、事件类型、事件调用函数！低级点的事件，只是鼠标键盘，对元素对象操作时，触发的反应！偶尔还涉及到事件对象event，来明确对象！
39. 除了事件三要素，还要关注事件发生时所有信息存储的对象——事件对象，`e.type`事件类型、`e.clientX/Y`光标视口位置，`e.offsetX/Y`光标相对元素位置！`e.target`事件源、以及事件中调用函数中this（环境对象）的指向的对象！委托时这两个对象不一样！
40. 高阶事件就要看清事件流，L0 和 L2 绑定事件的差异、不同事件是否支持冒泡，需不需要阻止冒泡，父子级的相互干扰，或者利用冒泡做委托，对于链接、表单提交等HTML自带事件进行阻止，除了DOM事件，也需要掌握BOM事件：页面尺寸、页面卷去高度、元素位置等信息——是相对视口还是相对页面定位！
41. 页面滚动事件`window.addEventListener('scroll', function() {})`，配合元素的`scrollLeft`和`scrollTop`属性（**卷去的大小**）设置临界点，再去修改DOM！
42. ```
document.documentElement.scrollTop = 0 // 回到顶部
// 也可以通过方法，来实现滚动，scrollTo(X,Y)，第一个参数是左右，第二个参数是上下！页面缩放事件
window.addEventListener('resize', function() {})window.clientWidth
45. 获取盒子大小宽高，通过**属性**：`offsetWidth`、`offsetHeight`包括边框以内，获取盒子相对位置，通过**属性**：`offsetLeft`和`offsetTop`，获取大小及其视口的位置的**方法**：`getBoundingClientRect()`
46. 给input注册 change 事件，值被修改并且失去焦点后触发
## BOM及事件
47. window对象是浏览器APIs中最顶级的对象，所有其它API都放在这个对象下！这样的对象分布称为BOM
48. 
49. BOM中各种API：跳转`location.href`、设备信息`navigator.userAgent`、本地存储`localStorage.setItem(key, value)`、`localStorage.getItem()`，存放数据也就不得不提数据的处理`JSON.stringify()`、`JSON.parse()`！一环扣一环，单个的功能和命令不足以成事，把不同功能融入到需求当中，去解决实现不同想法，而不是拘泥于方法本身！而是看网页想实现什么，那种操作更合理和舒服，更符合逻辑，交互的心理学！
50. 其中BOM中最常用的是定时器，分成延时函数(延时器) 和 间歇函数(定时器)，等待多久调用一次或反复调用
51. 
52. JS是单线程的，这么多延时或者事件，可以同时触发的原因是，由浏览器执行多线程任务，其中事件循环
53. 
## 表单的输入验证
54. 其中对表单的交互中，不得不提到对字符的处理，也就是——正则表达式：正则字面量（正则对象）
55. 正则也就是对每一个字符设置一套规则，字面量配合方法形成一种字符串匹配的模式，先是设置匹配规则，然后是利用方法处理字符
56. ```
const reg = /表达式/ // 其中/ /是正则表达式字面量，输入空格也算是字符！用来查看字符是否匹配，使用
reg.test(str)，如果符合规则匹配上则返回true不设置严格匹配时，主要功能是用来查找有没有，是否存在某些字符（不限制类型）
设置严格模式下，可以对一串字符，一个字符一个字符去设置按顺序去严格匹配，里面的字符是一个一个数
严格模式下，先通过范围给每一个字符设置一种匹配规则，再通过量词让多个字符使用一种规则，配合修饰
日期对象
可以得到当前系统的时间，这个对象内保存着年月日、时、分、秒等时间数据！可转化成时间轴上任意一点
const date = new Date() // 系统默认时间 const date = new Date('2020-05-01 08:30:00') // 指定时间
总结：JS交互的本质是——利用［编程思维］处理问题解决需求
- 需求：先谈谈需求，需要这些网页有什么样的交互效果，需要展示更新什么内容！实现的功能！通过HTML+CSS就能实现一篇图文并茂的网页，但是需要灵魂的更新，动画、交互、接受表单信息还得是JS来完成，一步步分析JS中需要实现的功能，动态的调整HTML和CSS样式！
- 逻辑：再来看看谁与谁关联，是条件还是处理结果，或者即是条件又是结果！收集案例，处理方法！熟练使用JS提供的内置构造函数——对象中属性和方法！JS自带九大：数字、字符串、数组、对象、函数、错误、正则、日期、数学！还有浏览器扩展出的功能Web APIs：DOM、BOM、EVENT对象！核心是利用JS自带的语法和处理数据的方法，来实现改变DOM、BOM等操作！也就是事件！也就是交互！
- 处理数据：有内容字符的细节处理，有高深的事件绑定需要考虑的方方面面，只要把逻辑理清，剩下的交给时间！
- 学会看需求、拆分成一套可以人机交互过程中，网页内容的不断变化，来解决一个问题！——逻辑结构！也就是编程思维，这才是前端交互的能力体现！因果关系、面向过程！
- 电脑编程，也就是在内存中，存入一些数据，然后修改这些数据，按照指定的逻辑展示到页面中去，页面交互过程，也通过逻辑修改和整理这些数据，再反映到页面中！容器就是变量，数据就是一切皆对象的数据！
- 巧用各种接口，也就是类或者叫构造函数！或者叫——API
wechat
alipay
