KonishiLee's Blog

ES6 新特性

箭头函数

代替了每次都需要写 function 的烦恼了

1
2
3
(() => {
console.log('this is new features of es6.')
})()

箭头函数与普通 function 的区别

1.箭头函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。

举个例子

1
2
3
4
5
6
7
8
9
10
11
12
<button type="button" class="btn1">点击1</button>
<button type="button" class="btn2">点击2</button>
$('.btn1').click(() => {
console.log(this);
})
$('.btn2').click(function(){
console.log(this);
})

两种方法看似一样,但是执行结果真的一样吗?

结果:1.window 对象。2.btn2 对象。

2.箭头函数不可以当作构造函数,也就是说,不可以使用 new 命令,否则会抛出一个错误。

3.箭头函数不可以使用 arguments 对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。

4.不可以使用 yield 命令,因此箭头函数不能用作Generator函数。

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
//定义
class Animal {
//ES6中新型构造器
constructor(name) {
this.name = name;
}
sayName() {
console.log('This is ' + this.name);
}
}
//继承
class Dog extends Animal {
constructor(name) {
super(name);
}
call() {
console.log("wang wang wang...");
}
}
var xiaohua = new Programmer('xiaohua');
xiaohua.sayName(); //输出 'This is xiaohua'
xiaohua.call(); //输出 'wang wang wang...'

Math,Number,String,Object 的新 API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Number.EPSILON
Number.isInteger(Infinity) // false
Number.isNaN("NaN") // false
Math.acosh(3) // 1.762747174039086
Math.hypot(3, 4) // 5
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2
"abcde".contains("cd") // true
"abc".repeat(3) // "abcabcabc"
Array.from(document.querySelectorAll('*')) // Returns a real Array
Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1) // [0,7,7]
[1,2,3].findIndex(x => x == 2) // 1
["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]
["a", "b", "c"].keys() // iterator 0, 1, 2
["a", "b", "c"].values() // iterator "a", "b", "c"
Object.assign(Point, { origin: new Point(0,0) })

Promises

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//创建promise
var promise = new Promise(function(resolve, reject) {
// 进行一些异步或耗时操作
if ( /*如果成功 */ ) {
resolve("Stuff worked!");
} else {
reject(Error("It broke"));
}
});
//绑定处理程序
promise.then(function(result) {
//promise成功的话会执行这里
console.log(result); // "Stuff worked!"
}, function(err) {
//promise失败会执行这里
console.log(err); // Error: "It broke"
});
如果喜欢这个分享,就帮忙买杯咖啡吧