1 复习关于this和window
function fn() {
// 使用fn2()调用的时候，this是window对象
console.log(this);
}
fn()
结果：
fn() 等价于 fn.call(window) //this默认是window对象
注：
call方法比普通的调用多一个参数是this，call就是调用函数的方法，只不过第一个参数可以指定谁来调用。
箭头函数的this
// 箭头函数的this永远是外面的this window
const fn=()=>{
console.log(this);
}
fn()
箭头函数中的this指向的是定义时的this，而不是执行时的this。(zhuanlan.zhihu.com/p/136732548) ,即：箭头函数的this永远是外面的this window
2 数组的其他操作
2.1找最大最小值
const arr =[1,2,3,4,5,6,7,8,9]
const maxvalue =Math.max(...arr)
2.2数组翻转
let arr1=["html","css","js"]
const arrReverse = arr1.reverse
2.3数组变为字符串
const arr2 =arr1.join("")
2.4数组排序
//数组排序(升序)
arr.sort((a,b)=>{return a-b})
//数组排序(降序)
arr.sort((a,b)=>{return b-a})
2.5数组求和
const sum = arr.reduce((a,b)=>{return a+b},0)//0是返回值，数组上所有都累加到0上面
eg实例-按照年龄升序排序:
const students = [
{ name: "zhang", age: 20 },
{ name: "li", age: 18 },
{ name: "wang", age: 19 },
{ name: "chen", age: 24 }
]
//当数组内部是对象，直接比较对象中的值，可以将对应的值进行排序
const up = students.sort((a,b)=>{return a['age']-b['age']})
3 new关键字起了什么作用？
目的：生成100个小兵
1 使用循环的写法，创建了100个小兵对象
let sodiers = []
for (let i = 0; i < 100; i++) {
let sodier = {
atk: 5,
dfs: 5,
attack() {
console.log('捶你胸口');
}
}
sodiers.push(sodier)
}
2 使用原型去改善内存
let sodiers = []
let sodierProtoType = {
dfs: 5,
attack() {
return this.atk
}
}
for(let i=0;i<100;i++){
// 使用我们创建的原型去生成一个对象,这样可以节省内存
sodier=Object.create(sodierProtoType)
sodier.atk=5
sodiers.push(sodier)
}
3 使用函数帮助我们生成对象
let sodiers = []
const createSodier = (atk) => {
// Object.create使用原型创建对象
// 1.自动创建对象
const obj = Object.create(sodierProtoType)
// 2.绑定属性
obj.atk = atk
// 返回对象
return obj
}
for(let i=0;i<100;i++){
// 使用我们创建的原型去生成一个对象,这样可以节省内存
sodier=createSodier(5)
sodiers.push(sodier)
}
构造函数其实就是在给对象添加属性
new 操作符做了啥？
①创建临时对象
创建临时对象，我们不需要创建临时对象了，new帮你做，你可以用this访问到这个临时对象（this=临时对象）
②绑定属性，相当于class中的执行构造函数
执行构造函数，也就是将传入的属性绑定到this上
③绑定原型
绑定原型，你也不用给原型想名字了，new统一叫做prototype
④返回临时对象
详细请见：(www.zhihu.com/people/ting…)
4原型与构造函数
构造函数,帮助我们往对象上添加属性
5为什么要有类？
类可以帮助我们快速构建一个通用对象
class dog{
constructor(name){
this.legNumber=4 //狗子有4条腿
this.size='big'
this.name=name
}
bar(){
console.log('bar')
}
}
//博美犬
let dogButty = new dog("bomei")
//泰迪
let taddy = new dog('Taddy')
总之：减少内存占用<br>
6 DOM树
Document Object Model，即文档对象模型,DOM是W3C的标准，定义了访问 HTML 和 XML 文档的标准。DOM 以树结构表达 HTML 文档.
详细请见：(zhuanlan.zhihu.com/p/323172450)
获取DOM的一些api
html
<div id='app'>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<ul id="list">
<li></li>
<li></li>
</ul>
</div>
通过id获取页面元素
const app = document.getElementById('app')
通过标签名获取到页面元素
const div = document.getElementsByTagName('div')
通过class获取到页面元素
const classList = document.getElementsByClassName('one')
另外，querySelector为通用api,可以代替id和class方法获取元素
（querySelector只能获取到一个元素）
const A = document.querySelector('#app')
const B = document.querySelector('.one')
除此之外，querySelectorAll可以获取到一类元素，返回一个伪数组
const C = document.querySelectorAll('.one')
const D = document.querySelectorAll('#list li')
7结点类型
div标签本身，叫做元素节点nodeType===1
id = 'app' 叫做属性节点nodeType===2
hello world 叫做文本节点nodeType===3
nodeType可以判断节点的类型
eg:console.log(app.nodeType);
firstChild可以获取文本节点
const nodeTxt=app.firstChild
console.log(nodeTxt);
getAttributeNode获取属性节点
const nodeAttr=app.getAttributeNode('id')
console.log(nodeAttr)
8结点上基本的操作
html
<ul id="app">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
要实现的三个目标：
1 在列表前面添加一个节点，在列表后面添加一个节点
2 删除列表中的所有li节点，删除列表
3 将之前添加的节点替换掉
<script>
const app = document.getElementById('app')
console.log(app.children); //只获取元素节点
/*增*/
//prepend 可以在开头添加节点(可以插入字符串也可以插入标签)
const p = document.createElement('p')
p.innerHTML='prepend'
app.prepend(p)
//append 在结尾添加结点
const p2 = document.createElement('p')
p2.innerHTML='append'
app.append(p2)
/*删*/
//removeChild
const lis = document.querySelectorAll('li')
lis.forEach(li=>{app.removeChild(li)})
//remove 将自身从页面中删除
app.romeve()
/*改*/
//replaceChild
const p3 = document.createElement('p')
p3.innerHTML="我是替换的节点"
app.replaceChild(p3,p2)
</script>
9事件
最常用的事件有onlick,onkeyup等
http
<div id="app"></div>
script
//window.onload 等待页面加载结束，再执行javaScript代码
winow.onload()=>{
//获取元素
const app = document.getElementById('app')
//鼠标悬浮
app.onmouseover=()=>{
app.style.backgroundColor='red'
}
//获取焦点
app.onfocus=()=>{
app.style.backgroundColor='green'
}
//失去焦点
app.onfocus=()=>{
app.style.backgroundColor='blue'
}
}
| onclick | 点击事件 |
| onbclick | 双击事件 |
| onmouseenter | 鼠标进入 |
| onmouseleave | 鼠标离开 |
| onmousedown | 鼠标离开 |
| onmouseup | 鼠标弹起 |
| onfocus | 失去焦点 |
| onblur | 移除焦点 |
| onload | 加载完毕之后 |