前言：
时代不断向前，时刻要跟上步伐，要不断保持学习。最新开始做新项目，基于前端工程化用到很多新知识，比如ES6；因此趁机学习补齐短板。
let, const定义变量
1 | var fn 存在变量声明; 声明的变量会给window增加属性（全局作用域下） |
结构赋值
1 | let arr = [1, 2, 3, 4, 5]; |
字符串的扩展
1 | console.log(String.prototype); |
模版字符串
let name = 'sunny';
document.body.innerHTML = `<div>${name}</div>`;
Array类上的扩展
1 | console.dir(Array); |
数组原型上的扩展方法 (所有数组实例方法 参数从索引n到索引m, 包n不包m)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86console.log(Array.prototype);
//copyWithin 从原数组中读取内容, 替换数组的指定位置的内容
//参数(替换的目标起始位置, 查找的起始位置, 查找的结束位置/默认到结尾)
//原数组length不变, 如果有超出部分截取掉
let arr = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(arr.copyWithin(4, 2, 4)); //[1, 2, 3, 4, 3, 4, 7, 8]
console.log(arr.copyWithin(3, 2)); //[1, 2, 3, 3, 4, 5, 6, 7]
//includes 判断数组中有没有某一项, 参数2是开始查找的位置
console.log([1, 2].include(1)); //true
let arr = [1, 2, 3, 4];
//遍历数组的方法, 参数是一个函数, 自己函数中的this是window; 改变this指向, 可以通过第二个参数改变函数中的this
//reduce, reduceRight不可以改变this, 第二参数给初始值赋值
//fill 按照指定字符填充数组的指定位置(会改变原数组)
//将数组的每一项都变成指定字符
console.log(arr.fill('sunny')); //['sunny', 'sunny', 'sunny', 'sunny']
console.log(arr.fill('sunny', 2, 3)); //[1, 2,'sunny', 4]
//filter 遍历数组, 根据返回值去过滤原数组（原数组不变） es5
let arr = ['sunny', 1, 2, 'sunny'];
let newArr = arr.filter(function(item, index) {
//如果返回true留下当前项, 返回false不留下当前项; 结果返回一个新数组
//return true;
//return false
return typeof item === 'number';
})
console.log(newArr); //[1, 2]
//find 先遍历数组, 一旦参数函数返回true, 停止查找 返回当前项 (es6)
//只会查找一个
let num = arr.find(function(item) {
return typeof item === 'number';
})
console.log(num); // 1
//findIndex 先遍历数组, 一旦参数函数返回true, 停止查找 返回当前索引
//只会查找一个
let index = arr.find(function(item) {
return typeof item === 'string';
})
console.log(index); // 0
//every 遍历数组, 如果遍历每一项都返回true, 最后结果为true; 只要有一个为false, 结果为false
let num = [1, 2, 3].every(function(item) {
return item === 'number'
});
console.log(num); //true
let num = [1, 2, 3, 'sunny'].every(function(item) {
return item === 'number'
});
console.log(num); //false
//some 遍历数组, 只要有一项都是true, 结果为true
let num = [1, 2, 3, 'sunny'].some(function(item) {
return item === 'number'
});
console.log(num); //true
//reduce 迭代
let arr = [1, 2, 3];
let num = arr.reduce(function(prev, item) {
//prev 上一次的返回值
//item 当前项
console.log(prev);
//return 1;
// return prev + item;
}, n); // n初始的值
console.log(num); // 1 1; 6
//reduceRight 和reduce顺序相反
//keys 遍历每一项的索引的接口 使用for of遍历
console.log([1, 2].keys());
for(let key of arr.keys()) {
console.log(key); //打印索引
}
//for of 遍历数组每一项的值; for in 遍历数组每一项的索引
//entries 遍历接口 可以遍历到索引和每一项 每一次遍历得到一个数组[索引, 当前项]
//一般可以通过数组的结构赋值获取到遍历的结果
for(let [index, item] of arr.entries()) {
console.log(index, item);
}
数组的空位 –> 当前数组的某个索引位置 没有任何值, undefined不是空位
//判断一个数组中某一个位置是不是空位 使用in方法判断
//in 判断数组索引位置上有没有值1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21let arr = [, , , ,];
console.log(arr.length); //4 --> 查看有几个逗号
let arr = [, undefined, , ,];
console.log(1 in arr); //true
console.log(0 in arr); //false
//es5中数组方法对空位处理不一致, 一般直接跳过空位
//es6中将空位处理为undefined
let arr = [1, , , 3];
arr.fillter(function(item) {
console.log(item);
})
arr.find(function(item) {
console.log(item);
})
for(let item of arr) {
console.log(item);
}
函数的扩展
1 | //参数默认值 |
参数作用域问题
1 | //函数执行时候先给形参赋值, 形参也是私有变量, |
扩展运算符 …
1 | //将非数组变成数组(类数组 length) |
箭头函数
1 | //箭头函数是匿名函数 |
对象的扩展
1 | let name = 'sunny', age = 18; |
对象的set和get
1 | let obj = { |
Symbol
1 | //Symbol 是一个新的基本数据类型 而且是一个值类型 |
set
1 | //类似数组 只有值val, 没有键key |
set使用场景
1 | //数组去重 |
Map
1 | //构造函数方式创建一个Map实例 |
Proxy
对象默认操作拦截
1 | //new Proxy({参数1:目标对象}, {参数2:拦截的方法}); |
class
class中的constructor1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31class Fn{
constructor(x) {
//this:当前实例
this.x = x; //增加私有属性
//return 的是基本数据类型对实例没有影响,
//如果是引用数据类型 会改变实例
}
}
let fn = new Fn(10); --> { x:10 }
// Fn(); 类必须使用new执行, 不可以作为普通函数执行
typeof Fn; // 'function'
//class的name问题
class Fn(){
constructor() {
console.log(Fn.name); //Fn
}
getFn() {
console.log(Fn.name); //fn
}
}
/*
let Fn1 = class Fn(){
//Fn 只能在类里面使用
constructor() {
console.log(Fn.name); //Fn -->就近原则
}
}
*/
let fn = new Fn();
class中的执行变量1
2
3
4
5
6
7
8
9
10
11
12
13
14class Person{
constructor(name) {
this.name = name;
}
}
let person = new Person('sunny');
//采用class表达式让类执行
// es6中class 和 let const 一样没有变量提升
let person = new Class{
constructor(name) {
console.log(name);
}
}('sunny');
class静态方法1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56//类就相当于原型,
//写在原型上的方法都被实例继承
//static关键字不会被实例继承 可以被子类继承
class Person() {
constructor() {}
getName() {
console.log('sunny');
}
static getAge() { //静态方法
console.log('cherry');
}
}
class Son extends Person{
getPerson() {
super.getAge()
}
}
let person = new Person;
person.getName(); // sunny
person.getAge();
let son = new Son;
son.getPerson();
//子类继承父类 子类中没有this; super执行完之后才会有this
class A{
constructor(x) {
//super 父类的constructor
this.x = x;
}
getX() {
console.log(this.x);
}
getY() {}
}
class B extends A{
constructor(x) {
//super 执行不能写this
//super就是父类的constructor
super(x);
}
getA() {
//super 指向父类的原型
super.getX() {}
}
//static 父类的静态方法也可以继承
static getY() {
//super 指向父类本身
super.getY();
}
}
let a = new A(10);
let b = new B(100);
promise
1 | //执行顺序：先执行new Promise中的函数 --> 队列中同步代码 --> then中的回调函数 |
1 | //实现promiseAll |
async
1 | //async 默认返回一个Promise对象 |