JavaScript高级

BOM

概念：Browser Object Model(浏览器对象模型)，将浏览器的各个组成部分封装为对象
组成：
- Window：窗口对象
- Navigator：浏览器对象
- Screen：显示器屏幕对象
- History：历史记录对象
- Location：地址栏对象

Window

特点

Window对象不需要创建，可以直接使用。window.方法名();
window引用可以省略。方法名();

与弹出框有关的方法

alert(内容)：显示一段消息和一个确认按钮的警告框
confirm(内容)：显示一段消息和确认按钮和取消按钮的对话框
- 如果点击确定则方法返回true
- 如果点击去下则方法返回*false
prompt()：显示可提示用户输入的对话框
- 返回值：获取用户输入的值

与开发关闭有关的方法

**close()**：关闭浏览器窗口，谁调用就关谁
open(可以写新窗口的地址)：打开一个新的浏览器窗口，返回新的window对象

与定时器有关的方法

setTimeout(“函数()”,毫秒数)：在指定毫秒数后执行函数，只执行一次，返回一个id，用于取消定时器
**clearTimeout(定时器id)：取消setTimeout()**方法设置的timeout
setInterval(“函数()”,毫秒数)：在指定毫秒数后执行函数，一直执行，返回一个id，用于取消定时器
**clearInterval(定时器id)：取消setInterval()**方法设置的timeout

属性

获取其他BOM对象：
- history
- location
- Navigator
- Screen
获取DOM对象
- document

Location

创建(获取)

window.location
location

方法

**reload()**：重新加载当前文档(刷新)
assign()：加载一个新的页面，括号中写url路径

属性

href：设置或返回完整的URL

1 2	`跳转到这个页面 window.location.href = "./index.html";`

search：获取url后面的参数

History

创建(获取)：

window.history
history

属性

length，返回当前窗口历史列表中的URL数量

方法

back()：加载前一个URL
forward()：加载下一个URL
**go(参数)**：加载某一个具体页面
- 参数如果是正数，表示前进几个历史记录，负数，表示后退几个历史记录

DOM：

概念：Document Object Model(文档对象模型)，将标记语言文档的各个组成部分封装为对象。可以使用这些对象，对标记语言文档进行CRUD操作

W3C DOM标准模型

核心DOM-针对任何结构化文档
- Document：文档对象
- Element：元素对象
- Attribut：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象，其他几个的父对象
XML DOM-针对XML文档
HTML DOM-针对HTML文档

Document文档对象

创建(获取)

在html dom模型中使用window对象来获取
- window.document
- document

方法

获取Element对象
- **getElementById()**：根据id获取元素对象
- getElementsByTagName()：根据元素名称获取所有元素对象，返回数组
- getElementsByClassName()：根据class获取所有元素对象，返回数组
- getElementsByName()：根据name属性值获取所有元素对象，返回数组
创建其他DOM对象
- createAttribute(name)：创建拥有指定名称的属性节点，并返回新的 Attr 对象
- createComment()：创建注释节点
- **createElement()**：创建元素节点
- **createTextNode()**：创建文本节点

Element

创建(获取)：通document来创建获取
方法：
1. **removeAttribute(“属性名”)**：删除属性
2. **setAttribute(“属性名”,”属性值”)**：设置属性

Node节点对象

特点

所有dom对象都可以被认为是一个节点

方法

CRUD dom树：
- **appendChild(节点名)**：向节点的子节点列表的结尾添加新的子节点。
- **removeChild(节点名)**：删除（并返回）当前节点的指定子节点。
- replaceChild(原节点,替换的节点)：用新节点替换一个子节点。

属性

parentNode：返回节点的父节点

HTML DOM

innerHTML：标签体的设置和获取
**insertBefore(新的元素,旧元素)**：添加新元素到元素前面
**appendChild(新元素)**：添加新元素到指定元素内
**removeChild(删除的元素)**：删除子元素
控制样式：
1. 使用style属性设置
2. 提前定义类选择器样式，使用className属性设置class属性值

事件

概念

某些组件被执行了某系操作后，触发某些代码的执行

事件：某些操作，如：单击，双击，键盘按下，鼠标移动
事件源：组件，如：按钮文本输入框
监听器：代码
注册监听：将事件，事件源，监听器结合在一起。当事件源发生了某个时间，则触发执行某个监听器代码

绑定事件

直接在html标签上，指定事件的属性(操作)，属性值就是js代码
通过js获取元素对象，指定事件属性，设置一个函数

常见事件

点击事件

onclick：单击事件
ondblclick：双击事件

焦点事件

onblur：失去焦点，一般用于表单校验
onfocus：元素获得焦点

加载事件

onload：一张页面或图像加载完成后执行

鼠标事件

onmousedown：鼠标按钮被按下。
- 定义方法时，定义一个形参接收event对象
- event对象的button属性可以判断哪个鼠标键被点击了
onmousemove：鼠标被移动。
onmouseout：鼠标从某元素移开。
onmouseover：鼠标移到某元素之上。
onmouseup：鼠标按键被松开。

键盘事件

onkeydown：某个键盘按键被按下。
onkeyup：某个键盘按键被松开。
onkeypress：某个键盘按键被按下并松开。

选中和改变

onselect：文本被选中
onchange：域的内容被改变

表单事件

onsubmit：确认按钮被点击
- 可以允许或者阻止表单提交：返回true或者false
onreset：重置按钮被点击

文件处理

HTML5的File API提供了File和FileReader两个主要对象，可以获得文件信息并读取文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	#test-image-preview {
		width: 500px;
		height: 300px;
		border: 2px;
	}
</style>
<body>
	<div id="fileShow"></div>
	<input type="file" id="inputFile" name="test">
	<p id="fileInfo"></p>
</body>
<script type="text/javascript">
	var
    fileInput = document.getElementById('inputFile'),
    info = document.getElementById('fileInfo'),
    preview = document.getElementById('fileShow');
// 监听change事件:
fileInput.addEventListener('change', function () {
    // 清除背景图片:
    preview.style.backgroundImage = '';
    // 检查文件是否选择:
    if (!fileInput.value) {
        info.innerHTML = '没有选择文件';
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    info.innerHTML = '文件: ' + file.name + '<br>' +
                     '大小: ' + file.size + '<br>' +
                     '修改: ' + file.lastModifiedDate;
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('不是有效的图片文件!');
        return;
    }
    // 读取文件:
    var reader = new FileReader();
    reader.onload = function(e) {
        var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
        preview.style.backgroundImage = 'url(' + data + ')';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
});
</script>
</html>

ES6新语法

关键字

let：变量只在循环体内部有效

for(let i; i < 3; i++){
    console.log(i);
}
console.log(i);  // 报错

const：声明为常量，值不能被修改

1 2	`const str = "abc"; str = "111"; // 报错`

字符串API

**includes()**：返回布尔值，表示是否找到了参数字符串
**startsWith()**：返回布尔值，表示参数字符串是否在原字符串的头部
**endsWith()**：返回布尔值，表示参数字符串是否在原字符串尾部

let str = "hello";

str.includes("he"); // true
str.startsWith("he"); // true
str.endsWith("he"); // false

字符串模板

使用**`**来标记字符串模板

let str = `
    abc
    def
    ghj
`

解构

数组解构

1
2
3

let arr = [1,2,3];
let [x,y,z] = arr;
// x=1,y=2,z=3

对象解构

const per = {
    name: "jtxyh",
    age: "18"
}
const {name,age} = per;
const {name:n,age:a} = per;
// name === n age === a

函数默认值

1
2
3

function( a, b = 1){
    return a+b;
}

箭头函数

var t = x => x+10;

// 上面的相当于下面

function t(x){
    return x+10;
}

多个参数需要用()括起来

var fn = (x,y)=>{
    if(x>y){
        return 'x比y大';
    }else{
        return 'y比x大';
    }
}
console.log(fn(10,11)); '输出y比x大'

可变参数

1	`var fn = (x,y,...rest)=>{}`

返回json对象

1 2	`var fn = (x,y) => ({ x: x ,y:y}) console.log(fn(10,11)); '输出{x:10,y:11}'`

map和reduce

map方法

调用Array的map()方法，传入我们自己的函数，可以得到一个新的Array作为结果

var array = [1,2,3,4];
var result = array.map(x => { return x * 10});
// 输出[10, 20, 30, 40]

var result2 = array.map(String);
// 输出["1", "2", "3", "4"]

reduce方法

Array的reduce()把一个函数作用在这个Array的[x1, x2, x3…]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积

var arr = [1, 3, 5, 7, 9];
arr.reduce((x, y) => {
    return x + y;
});
// 结果为25
arr.reduce((x, y) => {
    return x + y;
},1);
// 结果为26

扩展运算符

使用**...**将一个数组转为以逗号分隔的参数列表

var arr = [1, 2, 3];
// 打印为 1 2 3
console.log(...arr);
// 打印为 0 1 2 3 4 5
console.log(0,...arr,4,5);

let add = (x,y)=>{
    return x + y;
}
var numbers = [1,2]
// 打印3
console.log(add(...numbers));

// 数组合并
let arr = [...[1,2],...[3,4]];
// 打印[1,2,3,4]

// 字符串转数组
console.log(...'hello');
// 打印['h','e','l','l','o']

Promise

Promise是一个对象，可以获取异步操作的信息

const p = new Promise(function (resolve, reject) { 
    // 这里我们用定时任务模拟异步 
    setTimeout(() => { const num = Math.random(); 
    // 随机返回成功或失败 
    if (num < 0.5) { 
            resolve("成功！num:" + num)
        } 
    else {
            reject("出错了！num:" + num) 
        }
    }, 300)
})

// 调用promise 
p.then(function (msg) { 
    console.log(msg); 
}).catch(function (msg) {
    console.log(msg); 
})

set和map

set

不能存储相同的元素

let set = new Set();
set.add(1); // 添加元素
set.add(2); // 添加元素
set.clear(); // 清空
set.delete(2); // 删除指定元素
set.has(2); // 判断元素是否存在
set.forEach(val=>{}); // 遍历元素
set.size; // 元素个数，属性，不是方法

map

本质上与Object类似的结构，但Object强制规定key只能是字符串，但map的key可以是任意对象

const map = new Map([
    ['key1','value1'],
    ['key2','value2'],
]);

map.get('key1'); // 获取元素
map.set('key3','value3'); // 添加元素
map.clear(); // 清空
map.delete(key); // 删除指定元素
map.has(key); // 判断是否存在
map.forEach((key,value)=>{}); // 遍历
map.size; // 判断元素个数，属性
map.values(); // 获取值的迭代器
map.keys(); // 获取键的迭代器
map.entries(); // 获取entry的迭代器

for(let key of map.keys()){
    console.log(key);
}

class的基本语法

class User {
    // 构造函数
    constructor(name, age = 20){
        this.name = name;
        this.age = age;
    }

    // 普通方法
    say() {
        return "你好 " + this.name;
    }

    // 静态方法
    static judgeAge(age) {
        if(age >= 18){
            return '你已成年!';
        }
        return '你未成年!';
    }
}

let user = new User("极客小祥",30);
// 调用普通方法
user.say();
// 调用静态方法
User.judgeAge(20);

// 继承
class Boy extends User {
    constructor(){
        // 必须实现父类的构造
        super("男孩",30);
    }
    eat() {
        return this.name + " 在吃";
    }
}

let boy = new Boy();
boy.eat();
// 调用父类普通方法
boy.say();
// 调用父类静态方法
Boy.judgeAge(20);

generator

generator生成器是ES6标准引入的新的数据类型。可以返回多次
使用function*定义
通过yield关键字可以实现返回
取值时需要使用next()
done表示这个方法是否已经执行结束，false表示没有执行结束，true表示执行结束

function* g(x){
    yield x+10;
    yield x+11;
    return x+12;
}

var g = g(10);
console.log(g.next()); 
// 输出{value: 20, done: false}
console.log(g.next()); 
// 输出{value: 21, done: false}
console.log(g.next()); 
// 输出{value: 22, done: true}
console.log(g.next()); 
// 输出{value: undefined, done: true}

// 使用for ... of获取所有的值
for(let x of g){
    console.log(x); 
    // 输出20,21
}

修饰器Decorator

修饰器是一个函数，用来修改类的行为，需要使用Babel转码器转码才能使用

// 修饰器
@T
class User {
    // 构造函数
    constructor(name, age = 20){
        this.name = name;
        this.age = age;
    }
}
// target对象为修饰的目标对象，目前是User
function T(target){
    // 给User类添加一个静态属性country
    target.country = "China";
}
// 打印，报错说明需要转码
console.log(User.country);

模块化

模块化主要有两个命令export 和 import

export命令用于规定模块的对外接口
import命令用于导入其他模块提供的功能

class Util {
    static num = (a,b) => {
        return a + b;
    }
}
// 导出
export default Util;

1 2	`// 导入 import Util from './Util';`

2019

#前端知识

XML 上一篇

JavaScript基础下一篇

JavaScript高级

BOM

Window

特点

与弹出框有关的方法

与开发关闭有关的方法

与定时器有关的方法

属性

Location

创建(获取)

方法

属性

History

创建(获取)：

属性

方法

DOM：

W3C DOM标准模型

Document文档对象

创建(获取)

方法

Element

Node节点对象

特点

方法

属性

HTML DOM

事件

概念

绑定事件

常见事件

点击事件

焦点事件

加载事件

鼠标事件

键盘事件

选中和改变

表单事件

文件处理

ES6新语法

关键字

字符串API

字符串模板

解构

数组解构

对象解构

函数默认值

箭头函数

map和reduce

map方法

reduce方法

扩展运算符

Promise

set和map

set

map

class的基本语法

generator

修饰器Decorator

模块化

相关文章