JavaScript笔记

html笔记

1. dom
- dom
dom 是html 中的文档标签

- 常用dom方法
getElementById() # 通过id查找标签
appendChild() # 在某标签内部的最后添加子元素
removeChild() # 删除某元素内部子元素
replaceChild() # 替换子元素
inserBefore() # 追加子元素(插入)
ul.insertBefore(添加元素,ul.lastElementChild);
createAttribute() # 创建属性
createElement() # 创建标签
createTextNode() # 创建文本节点
getAttribute() # 获取属性
setAttribute() # 修改属性
hasAttribute() # 判断是否拥有属性名，返回布尔值

- 常用dom 属性
innerHtml # 修改dom元素的内容，会将标签转义
innerText # 修改dom元素的内容，写什么就是什么
parentNode # 父节点
childNodes # 所有子节点
attrebutes # dom元素的所有属性

- 文档片段
var fragment = document.createDocumentFragment()
文档片段中可以包含其他的子节点，待所有子节点添加完成后，再
将整个文档片段添加到DOM树中，从而提高页面渲染效率，防止页
面闪屏问题

- Html DOM
HTML DOM 定义了用于 HTML 的一系列标准对象，以及访问和处理
HTML 文档的标准方法
HTML 标签对象化:
> 将网页中的每个元素都看作是一个对象
Image,Select,Form,Option...


-- 使用
var form = document.getElementById('form1');
//创建一个新的图片对象，加入到form中
var newNode = new Image();
newNode.src = '1.jpg';
form.appendChild(newNode);
// 将HTML对象中的每个元素都对象化

2. Bom
- bom
BOM: Browser Object Model,浏览器对象模型，用来访问和操纵
浏览器窗口，使 JavaScript 有能力与浏览器"对话"
> 通过使用 BOM，可移动窗口、更改状态栏文本、执行其他不与页面内容发生
直接联系的操作
> 没有相关标准，但被广泛支持

- bom模型的对象
window # 浏览器中打开的窗口
navigator # 包含有关浏览器的信息
screen # 包含有关客户端显示屏幕的信息
history # 浏览器历史对象
location # 包含有关当前url的信息
document # 包含当前浏览器加载的文档信息
event # 当前触发的事件对象

注：
1. window对象是BOM的根对象，其他对象其实都是window对象的
属性，window对象的属性和方法都可以省略“window.”，如
window.document可以简写为document，window.alert()可
简写为alert()。
2. 如果文档包含框架(frame 或 iframe 标签)，浏览器会为
HTML 文档创建一个window 对象，并为每个框架创建一个额
外的 window 对象

- windows对象
-- 属性
defaultStatus # 设置或返回窗口状态栏中的默认文本
innerheight # 返回窗口的文档显示区高度
innerwidth # 返回窗口的文档显示区宽度
length # 返回窗口内框架的数量
name # 设置或返回窗口的名称
open # 打开窗口
opener # 返回对创建此窗口的窗口的引用
# opener 会在当前窗口打开的窗口关闭后触发，
outerheight # 返回窗口的外部高度
outerwidth # 返回窗口的外部宽度
pageXOffset # 返回或设置当前窗口相对于窗口显示区左上角的x位置
pageYOffset # 返回或设置当前窗口相对于窗口显示区左上角的y位置
parentNode # 返回父窗口
self # 返回当前窗口
status # 设置窗口状态栏的文本
top # 返回最顶层的先辈窗口w

-- window的方法
alert() # 弹出提示框
blur() # 把键盘焦点从顶层窗口移开
clearInterval # 取消定时器
clearTimeout
setInterval
setTimeout
close() # 关闭浏览器窗口
confirm # 弹出带有一段消息以及确定和取消的提示框
# 同alert()
open() # 打开窗口
opener)_

- navigator对象
常用于获取客户端浏览器和操作系统信息

- location
常用于获取和改变当前浏览器的网址

-- 属性
hash # 设置或返回 # 开始的url(锚点)
host # 设置或返回主机名与端口号
hostname # 设置或返回主机名
href # 设置或返回完整url
pathname # 设置或返回url的路径部分
port # 设置或返回端口号
protocol # 设置或返回url的协议
search # 设置或返回？开始的url部分

-- 方法
assign # 加载新的文档(页面)
reload() # 重新加载当前文档(页面)
replace # 用新的文档替换当前文档(页面)

- history
history对象包含用户（在浏览器窗口中）访问过的URL的历史记录

-- 属性
length # 返回浏览器历史列表中的 url 数量

-- 方法
back() # 前一个
forward() # 后一个
go(num) # 加载具体某个页面

- screen
常用于获取屏幕的分辨率和色彩

-- 属性
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth 设置或返回调色板的比特深度。
colorDepth 返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI 返回显示屏幕的每英寸水平点数。
deviceYDPI 返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled 返回用户是否在显示控制面板中启用了字体平滑。
height 返回显示屏幕的高度。
logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval 设置或返回屏幕的刷新率。
width 返回显示器屏幕的宽度。

- event
事件触发后将会产生一个event对象

事件句柄(又称事件处理函数、事件监听函数)，指用于响应
某个事件而调用的函数。
 每一个事件均对应一个事件句柄，在程序执行时，将相应的
函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行
指定的函数或语句
(事件句柄也就是 onclick 这些)

-- 高级事件处理方式(一个事件可以绑定多个监听函数:)
btnObj.attachEvent('onclick',function(){}); //IE
btnObj.addEventListener('click',function(){}); //DOM

# 此语法可以为一个元素绑定多个监听函数，但需要注意
# 浏览器兼容性问题！

-- 阻止默认行为
event.retrunValue = false; //IE
event.preventDefault(); //DOM

-- 取消事件执行
onclick = function(){
return false
}

-- 冒泡取消
冒泡有三个阶段：
> 第一阶段：事件捕获，事件对象沿DOM树向下传播
> 第二阶段：目标触发，运行事件监听函数
> 第三阶段：事件冒泡，事件沿DOM树向上传播
# 注：IE的事件模型中没有“事件捕获”阶段

function logCancel(){
console.log("btnClicked");
event.cancelBubble=true; //IE
event.stopPropagation(); //DOM
}

-- event 属性
任何事件触发后将会产生一个event对象
event对象记录事件发生时的鼠标位置、键盘按键状态和触发
对象等信息

srcElement(ie)/target(火狐)： 事件源对象
eventPhase： 事件所处的传播阶段
cancelBubble： 是否取消事件冒泡
clientX/offsetX/pageX/screenX/x： 事件发生的X坐标
clientY/offsetY/pageY/screenY/y： 事件发生的Y坐标
button： 鼠标哪个按键被按下
returnValue： 是否阻止事件默认行为

-- event兼容性
function func(e){
var obj = e.srcElement || e.target;
alert(obj.nodeName); //DIV
}

-- event事件
onabort 图像的加载被中断。
onblur 元素失去焦点。
onchange 域的内容被改变。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获得焦点。
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按钮被点击。
onresize 窗口或框架被重新调整大小。
onselect 文本被选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。

3. Cookie

- 保存cookie
//保存一个简单Cookie
document.cookie='uname=tom';
//保存一个复杂的Cookie
document.cookie='msg='+encodeURIComponent('Hi,JS你好');
# Cookie键值中不能包含分好，逗号，等号，空格，同时为了防
# 止中文乱码问题，键值应该使用encodeURIComponent()函数进
# 行编码
//保存一个具有指定超时时间的Cookie
document.cookie='uid=7788;expires='+new Date().toGMTString();

- 获取cookie
document.cookie

- cookie设置保存时长
document.cookie = 'uid=7890'; //单会话Cookie
var time = new Date().getTime()+1000*3600*24*30;
var exp = new Date(time);
document.cookie = 'uname=tom;expires='+exp.toGMTString();
//30天后失效的Cookie

注：
1. 若没有指定expires属性，创建的Cookie其实只是保存在
内存中，浏览器一关闭也就被销毁了
2. 把expires设置为一个过去的时间，就可以实现删
除Cookie的效果

4. eval函数
用于执行以string形式出现的JavaScript代码
例如：
eval('1+1')

5. 对象的方法
Number,String

- String,ES6新方法
startsWith(xx) 判断字符串是否以 XX 开头
endsWith(xx) 判断字符串是否以 XX 结尾
includes(str) 判断字符串中是否包含 str
repeat(n) 拷贝n份
padStart() 用于头部补全，
// "2030111111"
let y1 = '2030'.padEnd(10, '1');
padEnd() 用于尾部补全;
// "2030-11-22"
let y2 = '11-22'.padStart(10, '2030-MM-DD');

- Number
-- 属性
MAX_VALUE 可表示的最大的数。
MIN_VALUE 可表示的最小的数。
NaN 非数字值。
NEGATIVE_INFINITY 负无穷大，溢出时返回该值（小于Number.MIN_VALUE时）。
POSITIVE_INFINITY 正无穷大，溢出时返回该值（大于Number.MAX_VALUE时）。

-- 方法
toString 把数字转换为字符串，使用指定的基数。
toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential 把对象的值转换为指数计数法。
toPrecision 把数字格式化为指定的长度。

- Boolean

6. 异常
try {
//此处是主业务功能代码
//主业务功能代码中可能产生并抛出错误
} catch([error]) {
//此处是负责错误处理的代码
}[finally {
//此处是出口语句
}]

7. 原型
1> 原型是每个对象都拥有的关联对象，js的继承就是继承原型
2> 原型只保存对象的共有属性和对象的方法
3> 原型有一般有两个属性 constructor 和 __proto__
constructor 保存的是该原型对象的属性
__proto__ 保存的是创造该原型的原型对象
# 如果原型对象是自己创建的，那么就只有__proto__和自己设置
# 的属性或方法。
如果原型有方法，那么这个方法与constructor同级。例如：
{
constructor:xxx,
__proto__:xx,
getName:xxx,
}
4> 每一个对象的__proto__都指向创造自己的对象的原型
例如：A是一个函数
function A(name){
A.a = 'a公有属性',
this.name = name + '私有属性',
}
var a = A('a')
# a.__proto__ 指向的是 A.prototype
# A.prototype.__proto__指向的是 Object
5> 从原型对象中继承来的属性，一旦原型对象中属性进行添加或改变，
所有继承自该原型的对象的属性均添加新属性或改变。

7.es6 新特性
- 介绍
ECMAScript 6.0，简称ES6，第一个版本是在2015年6月进行发布，
目前主流浏览器已经可以完美兼容和使用ES6。

本篇主要讲解ES6的知识点，内容如下：
let和const、解构赋值、字符串操作、函数、
数组API、集合、对象拷贝、延展操作符、
对象补充、Generator、Proxy、Reflect。
- let和const
ES6新增了let和const来声明变量，主要是解决var声明变
量所造成的困扰和问题：
> 可以定义常量
# 不能给常量重新赋值，但如果是引用类型的话可以进行修改。
const E = 2.718;
E = 2.71;
console.log(E);
运行结果:
# Assignment to constant variable.
> 不可以重复声明变量
let site = 'itLike';
let site = 'itLike';
console.log(site);
// 运行结果:
# Identifier 'site' has already been declared
> 不存在变量提升
console.log(site);
let site = 'itLike';
运行结果：
# site is not defined
> 块级作用域
if(1){ let str = '小撩'; }
console.log(str);
运行结果:
# str is not defined
注意：
1）let声明的变量不会放在window上
2）对象不是作用域

- 解构赋值
-- 数组的解构
// 普通写法
let nameArr = ['撩课', '小撩', '小煤球'];
let name1 = nameArr[0];
let name2 = nameArr[1];
let name3 = nameArr[2];

// 解构写法
let [name1, name2, name3] = nameArr;
console.log(name1, name2, name3);
-- 对象的解构
xxx看不懂

- 延申操作
-- 数组延申
let arr1 = [ 'a', 'b', 'c'];
let arr2 = [1, 2, 3];
let result = [...arr1, ...arr2];
console.log(result);
// [ "a", "b", "c", 1, 2, 3 ]

-- 对象延申
let smallDog = {name:'小煤球', age: 1};
let bigDog = {name: 'Python', gender: '公'};
let dog = {...smallDog, ...bigDog};
console.log(dog);
// {name: "Python", age: 1,gender:'公'}

- 字符串操作
-- 模板字符串
# 相当于python中的format进行字符串格式化
let name = {name:'小煤球'};
let sex = '公';
let result = `我叫 ${name.name} , 我是 ${sex} 的`;

它的实现原理是使用正则：
let name = '小煤球';
let sex = '公';
let result = `我叫 ${name} , 我是 ${sex} 的`;
result = result.replace(/\${([^}]*)}/g);
console.log(result);

- 函数操作
-- 设置默认参数
function logPerson(name, sex = '男', age = 20) {
}

-- 参数延申
# 相当于python中的*args参数
let logName = function (arg1, ...arg2) {
console.log(arg1, arg2);
};
logName('宋小宝', '赵薇', '王菲', '那英');
// 宋小宝 , ["赵薇", "王菲", "那英"]

-- 箭头函数
() => {console.log(123)}
注：
箭头函数中的this是包裹箭头函数的外层对象

- 数组新增方法
forEach、findIndex、find、map、reduce、filter、every、some等。

-- Array.from()
将一个数组或者类数组变成新数组，是浅拷贝操作。
let oldArr = [
'小煤球', 10,
{df1: '小Python', df2: '土豆'}
];
let newArr = Array.from(oldArr);
console.log(newArr === oldArr); // false

- 对象操作
-- 属性简写
let a = {
name(){
console.log(1)
}
}// 可以直接写函数，不需要 name:function(){}这种

-- 类class写法
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return '(' + this.x + ',' + this.y + ')';
}
}
var p = new Point(1,2);
# 其中 constructor 方法是类的构造函数，是一个
# 默认方法，通过 new 命令创建对象实例时，自动
# 调用该方法(constructor相当于python中__init__)。
// class写法等同于
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function() {
return '(' + this.x + ',' + this.y + ')';
}

-- class继承 super
class B extends A {
constructor() {
super(); // ES6 要求，子类的构造函数必须执行一次 super 函数，否则会报错。
}
}
注：在 constructor 中必须调用 super 方法，因为子类没
有自己的 this 对象，而是继承父类的 this 对象，然
后对其进行加工,而 super 就代表了父类的构造函数。
super 虽然代表了父类 A 的构造函数，但是返回的是
子类 B 的实例，即 super 内部的 this 指的是 B，因
此 super() 在这里相当于
```A.prototype.constructor.call(this, props)``。
# 大致意思是：
# B使用super继承了A中constructor的属性。
# 当B使用继承自A的属性时，是B使用，而不是
# A使用。
.

-- super详解
1. super继承
class A {
constructor() {
console.log(new.target.name); // new.target 指向当前正在执行的函数
}
}

class B extends A {
constructor() {
super();
}
}

new A(); // A
new B(); // B
# 可以看到，在 super() 执行时，它指向的是 子类 B
# 的构造函数，而不是父类 A 的构造函数。也就是说，
# super() 内部的 this 指向的是 B。

2. super当做对象使用
class A {
c() {
return 2;
}
}
class B extends A {
constructor() {
super();
console.log(super.c()); // 2
}
}
let b = new B();

上面代码中，子类 B 当中的 super.c()，就是将 super 当
作一个对象使用。这时，super 在普通方法之中，指向
A.prototype，所以 super.c() 就相当于 A.prototype.c()。

3. super当做对象使用时的 this 指向
class A {
constructor() {
this.x = 1;
}
s() {
console.log(this.x);
}
}

class B extends A {
constructor() {
super();
this.x = 2;
}
m() {
super.s();
}
}
let b = new B();
b.m(); // 2

上面代码中，super.s()虽然调用的是 A.prototytpe.s()，
但是 A.prototytpe.s()会绑定子类 B 的 this，导致输出
的是 2，而不是 1。也就是说，实际上执行的
是 super.s.call(this)。

4. super 赋值
由于绑定子类的 this，所以如果通过 super 对某个
属性赋值，这时 super 就是 this，赋值的属性会变
成子类实例的属性。
class A {
constructor() {
this.x = 1;
}
}

class B extends A {
constructor() {
super();
this.x = 2;
super.x = 3;
console.log(super.x); // undefined
console.log(this.x); // 3
}
}

let b = new B();

上面代码中，super.x 赋值为 3，这时等同于对
this.x 赋值为 3。而当读取 super.x 的时候，
调用的是 A.prototype.x，但并没有 x 方法，所
以返回 undefined。

-- Object.is对比两个值是否相等
Object.is(Array, Object)

-- Object.setPrototypeOf(obj1,obj2)给obj1设置原型
将一个指定的对象的原型设置为另一个对象或者null
let dog1 = { name: '小煤球' };
let obj = {name: 'xxx'};
Object.setPrototypeOf(dog1, obj);
let dog2 = {
__proto__: obj
};
console.log(dog1.__proto__.name); // xxx
console.log(dog2.__proto__.name); // xxx

- 集合set
相当于python中的set
// 创建一个集合
let set = new Set(['张三', '李四', '王五', '张三', '李四']);
console.log(set);
// 一个属性
console.log(set.size);
// 四个方法
// add
console.log(set.add('刘德华').add('旋之华'));
console.log(set);
// delete
console.log(set.delete('张三'));
console.log(set.delete('李四'));
console.log(set);

// has
console.log(set.has('张三'));
console.log(set.has('张三1'));

// clear
console.log(set.clear()); // undefined
console.log(set);

- map(也就是hash类型的数据，说白了就是python中的字典)
# map是键值对进行显示。
# 它类似于对象，也是键值对的集合，但是“键”的范围不限
# 于字符串，各种类型的值（包括对象）都可以当作键。
实例属性和方法：size、set、get、has、delete、clear
// 创建一个Map
let obj1 = {a: 1}, obj2 = {b: 2};
const map = new Map([

['name', '张三'],

['age', 18],

['sex', '男'],

[obj1, '今天天气很好'],

[obj2, '适合敲代码'],

[[1,2], 'hhh']

]);
console.log(map);

console.log(map.size);

// set和get
map.set('friends', ['赵六', '力气']).set(['dog'], '小花');
console.log(map);
console.log(map.get('name'));
console.log(map.get(obj1));

// delete
map.delete(obj1);
console.log(map.delete('xxxx'));
console.log(map);

// has
console.log(map.has(obj1));
console.log(map.has(obj2));

// clear
map.clear();
console.log(map);

// 遍历
map.forEach(function (value, index) {
console.log(index + ':' + value);
});

// 注意事项
map.set({}, '呵呵呵呵呵');
map.set({}, '哈哈哈哈');
console.log(map);
console.log({} === {});