es6入门
箭头函数：
<script>
var single = a => a;
console.log(single('一个参数'));
var log = () => {
console.log('没有参数需要用小括号括起来');
};
log();
var add = (a,b) => a+b;
console.log("多个参数需要用小括号括起来："+add(1,2));
var add2 = (a,b) => {
if(typeof a == 'number' && typeof b =='number') {
return a+b;
}
return 0;
}
console.log("函数体多条语句需要用大括号括起来："+add2(1,2));
console.log("函数体多条语句需要用大括号括起来："+add2(1,'2'));
var getHash = arr => {
return ({
name: 'jack',
age: 33
})
}
console.log("返回对象时需要用小括号包起来："+getHash('aa'));
document.addEventListener('click',ev => {
console.log('直接作为事件handler');
console.log(ev);
});
var arr = [1,9,2,23,4,3,8,14].sort((a,b)=>{
if(a-b > 0) {
return 1;
}
return -1;
});
console.log("作为数组排序的回调："+arr);
{
// 总结
// 1、this： 用function生成的函数会定义一个自己的this，而箭头函数没有自己的this，而是会和上一层的作用域共享this
// 2、apply & call： 由于箭头函数已经绑定了this的值，即使使用apply或者call也不能只能祈祷传参数的作用，并不能强行改变箭头函数里的this
// 3、arguments: 普通函数里arguments代表了调用时传入的参数，但是箭头函数不然，箭头函数会把arguments当成一个普通的变量，顺着作用域链由内而外的查询
// 4、不能被new: 箭头函数不能与new关键字一起使用，会报错
// 5、typeof运算符和普通的function一样
}
</script>
类：class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script>
class Animal {
constructor(name, color) {
this.name = name;
this.color = color;
}
toString() {
console.log(this.name+'....'+this.color);;
}
}
var animal = new Animal('dag','white');
animal.toString();
console.log(animal.hasOwnProperty('name'));
console.log(animal.hasOwnProperty('toString'));
console.log(animal.__proto__.hasOwnProperty('toString'));
class Cat extends Animal {
constructor(action) {
// 子类必须要有在constructor中指定的方法，否则在新建实例的时候会报错
// 如果没有指定constructor，默认带super方法的constructor将会被添加
super('cat','white');
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat('catch');
cat.toString();
console.log(cat instanceof Cat);
console.log(cat instanceof Animal);
{
// class中同时具有__proto__和prototype两个属性，存在两条继承链
// 子类的__proto__属性，表示构造函数的继承，总是指向父类
// 子类的prototype的__proto__属性表示方法的继承，总是指向父类的prototype属性
//
}
console.log(Cat.__proto__ === Animal);//true
console.log(Cat.prototype.__proto__ === Animal.prototype);//true
</script>
</body>
</html>
增强的对象字面量：
1.可以在对象字面量里面定义原型
2.定义方法可以不用function关键字
3.直接调用分类方法
//通过对象字面量创建对象
var human = {
breath() {
console.log('breath....');
}
}
var humen = {
//设置此对象的原型为human,相当于继承human
_proto_: human,
name: 'men',
eat() {
console.log('eating...');
}
}
human.breath();
humen.breath();
字符串模版：字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。
var num = Math.random()
console.log(`电话开始放假${num}封口费健很快就好康`);
解构：自动解构数组或对象中的值，比如若一个函数要返回多个值，常规的做法是返回一个对象，将这个值作为这个对象的属性返回。但在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解构到对应接收该值的变量中。
var [x,y] = getVal();
var [a,,c] = ['aa','bb','cc'];
function getVal() {
return [1,2]
}
console.log(x);
console.log(y);
console.log(a);
console.log(c)
参数默认值，不定参数，拓展参数
1.默认函数
function sayHello(name='lhy') {
console.log(`hello ${name}`)
}
sayHello()
sayHello('hhh')
2.不定参数：在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。
//将所有参数相加的函数
function add(...x){
return x.reduce((m,n)=>m+n);
}
console.log(add(1,2,3,4,5,5))
3.扩展参数：它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：Hello Wayou,John,Sherlock
let与const 关键字
可以把let看成var，只是它定义的变量被限定在了特定范围内才能使用，而离开这个范围则无效。const则很直观，用来定义常量，即无法被更改值的变量。
for (let i=0;i<2;i++)console.log(i);//输出: 0,1 console.log(i);//输出：undefined,严格模式下会报错
Promises
Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的deferred 对象。当你发起一个异步请求，并绑定了.when(),.done()等事件处理程序时，其实就是在应用promise模式。
//创建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"
});
浙公网安备 33010602011771号