ES6,ES7,ES8特性总结整理

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增加了对对象的支持

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

1. 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

2. 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
//   }
// }