ES6
1. 类（class）
class Animal {
// 构造函数，实例化的时候将会被调用，如果不指定，那么会有一个不带参数的默认构造函数.
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型对象上的属性
toString() {
console.log('name:' + this.name + ',color:' + this.color);
}
}
var animal = new Animal('dog','white');//实例化Animal
animal.toString();
console.log(animal.hasOwnProperty('name')); //true
console.log(animal.hasOwnProperty('toString')); // false
console.log(animal.__proto__.hasOwnProperty('toString')); // true
class Cat extends Animal {
constructor(action) {
// 子类必须要在constructor中指定super 函数，否则在新建实例的时候会报错.
// 如果没有置顶consructor,默认带super函数的constructor将会被添加、
super('cat','white');
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat('catch')
cat.toString();
// 实例cat 是 Cat 和 Animal 的实例，和Es5完全一致。
console.log(cat instanceof Cat); // true
console.log(cat instanceof Animal); // true
2. 模块化
模块化主要由import和export组成
- export可以导出变量，常量，函数，导出多个可以用{}；
- import可以在export之后进行导入；
3. 箭头函数
箭头函数主要学this的指向 https://blog.csdn.net/liwusen/article/details/70257837
4. 函数参数默认值
例：
function foo(height = 50, color = 'red')
{
// ...
}
//不使用情况
function foo(height, color)
{
var height = height || 50;
var color = color || 'red';
//...
}
5. 模板字符串
ES6中只需要将变量放入${}中既可完成字符串的拼接
例：
//不使用
var name = 'Your name is ' + first + ' ' + last + '.'
//使用
var name = `Your name is ${first} ${last}.`
6. 解构赋值
可以获取或修改数组和对象的值
数组例：
var foo = ["one", "two", "three", "four"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
//如果你要忽略某些值，你可以按照下面的写法获取你想要的值
var [first, , , last] = foo;
console.log(first); // "one"
console.log(last); // "four"
//你也可以这样写
var a, b; //先声明变量
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
对象例：
const student = {
name:'Ming',
age:'18',
city:'Shanghai'
};
const {name,age,city} = student;
console.log(name); // "Ming"
console.log(age); // "18"
console.log(city); // "Shanghai"
7.延展操作符(Spread operator)
可用于函数调用，数组拷贝，数组连接，es2018增加了对对象的支持
var people=['Wayou','John','Sherlock'];
console.log(...people);//输出'Wayou','John','Sherlock'
8.对象属性简写
例：
const name='Ming',age='18',city='Shanghai';
const student = {
name,
age,
city
};
console.log(student);//{name: "Ming", age: "18", city: "Shanghai"}
9.Promise
主要解决回调地狱的问题；
10.let和const
都是块级作用域；const定义了就不能修改；
ES7
- includes() 判断数组是否存在某值；
- 指数运算符 **
例：
console.log(2**10);// 输出1024
ES8
- async/await
也是为了解决回调地狱的问题；
login(userName) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('1001');
}, 600);
});
}
getData(userId) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (userId === '1001') {
resolve('Success');
} else {
reject('Fail');
}
}, 600);
});
}
// 不使用async/await ES7
doLogin(userName) {
this.login(userName)
.then(this.getData)
.then(result => {
console.log(result)
})
}
// 使用async/await ES8
async doLogin2(userName) {
const userId=await this.login(userName);
const result=await this.getData(userId);
}
this.doLogin()// Success
this.doLogin2()// Success
- Object.values()
Object.values()是一个与ES7的Object.keys()类似的新函数，但返回的是Object自身属性的所有值，不包括继承的值。
const obj = {a: 1, b: 2, c: 3};
//不使用
const vals=Object.keys(obj).map(key=>obj[key]);
console.log(vals);//[1, 2, 3]
//使用
const values=Object.values(obj1);
console.log(values);//[1, 2, 3]
3.Object.entries
Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。
//不使用
Object.keys(obj).forEach(key=>{
console.log('key:'+key+' value:'+obj[key]);
})
//key:a value:1
//key:b value:2
//key:c value:3
//使用
for(let [key,value] of Object.entries(obj1)){
console.log(`key: ${key} value:${value}`)
}
//key:a value:1
//key:b value:2
//key:c value:3
4.String padding
String.padStart(targetLength,[padString])和String.padEnd(targetLength,padString])
- targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
- padString:(可选)填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断，此参数的缺省值为 " "。
例1:
console.log('0.0'.padStart(4,'10')) //10.0
console.log('0.0'.padStart(20))// 0.00
例2：
console.log('0.0'.padEnd(4,'0')) //0.00
console.log('0.0'.padEnd(10,'0'))//0.00000000
5.函数参数列表结尾允许逗号
var f = function(a,b,) {}
6.Object.getOwnPropertyDescriptors()
来获取自身属性的描述符
const obj2 = {
name: 'Jine',
get age() { return '18' }
};
Object.getOwnPropertyDescriptors(obj2)
// {
// age: {
// configurable: true, //结构
// enumerable: true, //可列举的
// get: function age(){}, //the getter function
// set: undefined
// },
// name: {
// configurable: true,
// enumerable: true,
// value:"Jine",
// writable:true
// }
// }
