JavaScript Es6、Es7、Es8语法总结

es6,es7,es8语法总结

es6部分
1.let，const
    let,const具有块级作用域，不具有变量提升(let用法和var一样，但有区别)

(1)let用法：
1.不会变量提升
2.遇到{} 里面let定义的变量就会变成块级作用域，拿不到里面的值
块级作用域例子
function fn(){
        let num = 5;
        if(true){
            let num = 10;
        }
        console.log(num);//获取到的结果还是5，因为if里面有{}，let无法获取里面let=10的值
    }
    
(2)const用法
const定义的都是常量，不能在改变值
const PI = 3.1425;
    PI = 2;
    console.log(PI)//输出结果3.1425


2. 箭头函数
    我们经常要给回调函数给一个父级的this
    常用办法就是 var self = this 定义一个变量接住他
    使用 箭头函数，this 将不会受到影响,可以直接用this调用父级的this

箭头函数的写法和用法：

第一种：对于只有一个形参和一个返回值的情况下，这里的V代表形参和返回值
Es5写法：
function fn(v){
        return v;
    }
    fn(3);
Es6写法：
   var fn = v => v;
    var res = fn(3);
    console.log(res);


第二种：没有形参时，箭头函数加上（）代表空形参;
  Es5写法：function fn(){
        return 6;
    }
    fn();
    
   Es6写法：
    var fn = () => 6;
    var  res = fn();
    console.log(res)


第三种：形参为两个时，需要加上（形参1，形参2）
Es5写法：   
function fn(num1,num2){
        return num1 + num2
    }
    fn(3,4);

Es6写法：
var fn = (num1,num2) =>  num1 + num2;
var res = fn(2,3);
    console.log(res);


第四种：两个形参，且函数有多个内容，以及多个返回值时
Es5写法：   
function fn(num1,num2){
        console.log(1);
        console.log(2);
        return num1 + num2;
    }
Es6写法：
var fn = (num1,num2) => {  //多余一条语句  语句要放在 {}里，如果还行有返回值，那么要加return才可以
        console.log(1);
        console.log(2);
        return num1 + num2;
    }
    
    var res = fn(5,4);
    console.log(res)


第五种：函数里面的返回值是一个对象时，返回值需要用（）包起来，原来的对象还得需要加上{}
Es5写法：
function fn(name,age){    
        
        return {            
            uname : name,
            uage  : age        
        }
        
    }
    var res = fn('jack',16);
    console.log(res)

Es6写法：
var fn = (name,age) => ({uname : name,uage : age});
    var res = fn('jack',13);
    console.log(res);



3. 字符串
includes:
        const string = 'food';
        const substring = 'foo';
        console.log(string.includes(substring));
    返回的是布尔值。
    string.repeat(str,count)
    如果 string.length < count 即插入str到count == string.length为止

4. 模板字符串：  `` 遇到变量： ${变量}
Es6的字符串拼接方法：
var obj = {uname:"jack",age:8}
var str = `<div>姓名：<span>${obj.uname}</span>年龄：<span>${obj.age}</span></div>`;
document.body.innerHTML =str;

Es5的字符串拼接方法：
var obj = {uname:"jack",age:8}
var str ='<div>姓名：<span>'+obj.uname+'</span>年龄： <span>'+obj.age+'</span></div>';
document.body.innerHTML =str;

5.解构
结构数组：
一.数组的取值法
1.数组求值写法：
Es6的数组求值方法：
var arr = [4,2,32];
var [a,b,c] = arr;
console.log(a,b,c)；//新的求数组的每一项的方法，输出结果是4，2，3

Es5的数组求值方法：
var arr = [4,2,32];
   var a = arr[0];
    var b = arr[1];
    var c = arr[2];
    var d = arr[3];
    console.log(a,b,c,d);输出结果是4，2，3

2.数组默认值：
var ary = ["lily",34]
    let [name,age=16] = ary;
    console.log(name,age);//输出结果是 lily ，34
   
var ary = ["lily"]
    let [name,age=16] = ary;
    console.log(name,age);//输出结果是 lily ，16

分析：age变量的取值先看数组ary中有没有对应的值，如果有，取数组里面的值34，如果没有取默认值16

结构对象：
Es6的对象求值新方法：
let {uname : name1, age : age1}   = obj ;
    console.log(name1,age1);//输出结果：jack，10
   
特殊：变量名和 属性名一样了；可以把属性名省略
let {uname : uname , age : age} = obj;
    console.log(uname,age)//输出结果：jack，10

Es5的对象求值方法：
   console.log(obj.uname);
    console.log(obj.age);

6.对象方法的简写
Es6的对象函数简写：相比较而言，省略了function函数
var obj = {
    say(){
       alert(1);
    },
     play(){
       alert(2);
    }
}obj.play();


Es5的对象函数：

var obj = {
        say : function(){
            alert(1);
        },
        play : function(){
            alert(2);
        }
    }
    obj.play();

7.rest参数
    处理不定数目参数：
        function logArguments(...args) {
            for (let arg of args) {
                console.log(arg);
            }
        }
8.归并和扩展运动符

(1)assign用法：
objct.assign()方法 归并
objct.assign(target,a,b,c);就是把三个对象归并到target目标对象里面

var target = {pid:1};
var a ={pnam:"华为"};
var  b ={price：1200};
var b = {pid:10}
console.log(Objctassign(target,a,b,c))

(2)扩展运算符 ...
var obj1 = {name:"lily",age:18};
var obj2 = {...obj1};

console.log(obj2);
//输出结果是：
age: 18
name: "lily"

console.log(Object.assign({},{name : "lily"},{age : 18}))

console.log(obj2);
/输出结果是：
age: 18
name: "lily"
扩展运算符和assign()用法很像

9.构造函数:
Es5构造函数方法
function Animal(){  // 构造函数中的this否是实例
        this.color = "白色";
        this.age = 8;
        this.say = function(){
            
        }
    }
    var res =  new  Animal();  // 对象（实例）  一个属性   方法
    console.log(res)*/


Es6构造函数方法
class Animal{//class开头
        constructor(){//用的对象简写
            this.age = 5;
            this.color = "黑色"
        }
    }
    
    var res = new Animal();
    console.log(res);

注意：class 定义一个类
属性要放在     constructor里


10.set集合和Map是Es6中提供的新的数据结构
Set类似于数组，但成员的值都是唯一的，数组不能调用它的方法

Set 实例的属性和方法
1.size:所有元素个数(相当于数组中的length)
2.add(value):添加某个值，返回Set结构本身
3.delete(value):删除某个值，返回一个布尔值，表示删除是否成功，删除成功返回true，删除失败返回false
4.has(value):返回一个布尔值，表示该值是否为Set成员
5.clear();清除所有成员，没有返回值
遍历：
6.
(1)forEach():使用回调函数遍历每个数组 数组方法
(2)for of:遍历对象
for(var item of set){
    console.log();
}
7.Es6新增的数组方法
Array.from() :将每个集合类数组转成数组 
Array.of()
8. map集合map类似于对象，也是键值对的集合， 但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键方法有：
set():设置
get():获取
delete():删除
has():查找
clear():清除所有
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

var map = new Map();
    map.set('pid', "华为123");
    map.set("price", "120元");
    map.set('address' ,"中南海");




案例解析：
(1).Array.from()方法的使用
var set = new Set([5,3,4,5,6,3,4]);  // new出来的 都是一个对象，为了让他变成数组，使用
Array.from()
var arr = Array.from(set);
arr.push(8);//变成数组后就可以用数组的方法在后面添加8了
console.log(arr);//输出结果为：[5，3，6，4，8]
(2).add(value)和size的用法
var set = new Set();    
    set.add(3);
    set.add(4);
    set.add(6);
      
    set.add(4).add(5).add(7);
    console.log(set.size);//相当于数组中的length，输出结果是5
    console.log(set);//输出结果是3，4，6，5，7，说明Set方法可以去重复
(3).delete和has(value)和clear()
set.delete(4);
console.log(set.has(4));
set.clear();
console.log(set)
(4).set.forEach()
set.forEach(function(item,index,set1){
console.log(item)  //   注意 ： set是一个集合  index 和 item是一样的
console.log(set1)
})
(5).链式写法  
arr.slice(1,3) 返回来的还是 数组，所以可以继续调用push方法  
var arr = [4,23,2,36,7];
arr.slice(1,3).push(5);



11.Promises 链式调用
        func1(value1)
        .then(func2)
        .then(func3)
        .then(func4)
        .then(func5, value5 => {
        });
12.Generators 用同步的代码风格来写异步代码
    function* genFunc() {
        // (A)
        console.log('First');
        yield; //(B)
        console.log('Second'); //(C)
    }


ES7部分(新增的两个)
Array.prototype.includes   它是一个替代indexOf，开发人员用来检查数组中是否存在值，indexOf是一种尴尬的使用，因为它返回一个元素在数组中的位置或者-1当这样的元素不能被找到的情况下。所以它返回一个数字，而不是一个布尔值。开发人员需要实施额外的检查。在ES6，要检查是否存在值你需要做一些如下图所示小技巧，因为他们没有匹配到值，Array.prototype.indexOf返回-1变成了true（转换成true），但是当匹配的元素为0位置时候，该数组包含元素，却变成了false。
includes也可以在NaN(非数字)使用。最后 ，includes第二可选参数fromIndex，这对于优化是有好处的，因为它允许从特定位置开始寻找匹配。

1. includes
案例1：
    代码:
        let array = ['1','2','3']
        if(array.includes('2')){
            console.log('有')
        }
案例2：
console.log([1, 2, 3].includes(2)) // === true)
console.log([1, 2, 3].includes(4)) // === false)
console.log([1, 2, NaN].includes(NaN)) // === true)
console.log([1, 2, -0].includes(+0)) // === true)
console.log([1, 2, +0].includes(-0)) // === true)
console.log(['a', 'b', 'c'].includes('a')) // === true)
console.log(['a', 'b', 'c'].includes('a', 1)) // === false)

2. 指数操作符
案例：2**3 == 8
案例2：
let a = 7 ** 12
let b = 2 ** 7
console.log(a === Math.pow(7,12)) // true
console.log(b === Math.pow(2,7)) // true
开发者还可以操作结果:

ES8部分
1. object.entries()
    案例1代码:
        let obj = {a: 1, b: 2, c: 3};
        Object.entries(obj).forEach(([key, value]) =>{
            console.log(key + ": " + value); // 输出a: 1, b: 2, c: 3
        })
    案例2代码：
        //·Object.entries·将会返回对象自身可迭代属性key-value对数组（作为一个数组），他们（key-value）分别以数组存放数组中:
        let obj = {a: 1, b: 2, c: 3}
        JSON.stringify(Object.entries(obj))
        "[["a",1],["b",2],["c",3]]"
    
    案例3代码：
    let obj = {a: 1, b: 2, c: 3}
    for (let [key, value] of Object.entries(obj)) {
      console.log(`${key} is ${value}`)
    }
    // a is 1, b is 2, c is 3

2.Async Await 异步
异步函数（或者async/await）特性操作是Promise最重要的功能。这种想法是为了在写异步代码中简化它，因为人类大脑最讨厌这种平行非序号思维了。它只是不会演变这种方式。本来以为Promise的到来已经是摆脱node异步的福音了，在ES8，异步函数是那么给力。开发者定义一个asyc函数里面不包含或者包含await 基于Promise异步操作。在这引擎之下一个异步函数返回一个Promise，无论无何你在任何地方不会看到这样的一个词Promise。
    

案例1
代码:
        async fetchData(query) =>{
            try {
                const response = await axios.get(`/q?query=${query}`);
                const data = response.data;
                return data;
            }
            catch (error) {
                console.log(error)
            }
        }
        fetchData(query).then(data => {
            this.props.processfetchedData(data)
        })

3.函数参数列表和调用中的尾逗号（Trailing commas）
尾逗号在函数定义中只是一个纯粹语法变化，在ES8中，这种尾逗号是没有问题的：

案例1
var f = function(a,
  b,
  c,
  d,
) { // COMMA? OK!
  // ...  console.log(d)
}
f(1,2,3,'this')

案例2
var arr = [1,  // Length == 3
  2,
  3,
]  // <--- ok
let obj = {a: 1,  // Only 3 properties
  b: 2,
  c: 3,
}  // <--- ok


4.Object.getOwnPropertyDescriptors
这新的 Object.getOwnPropertyDescriptors返回对象obj所有自身属性描述。这是一个多参数版本的Object.getOwnPropertyDescriptors(obj,propName)将会返回obj中propName属性的一个单独描述。
在我们日常不可变编程（immutable programming）时代中，有了这个方法很方便（记住,Javascript中对象是引用传递）在ES5中，开发者要使用Object.assign()来拷贝对象, Object.assign()分配属性只有copy和定义新的属性。当我们使用更加复杂对象和类原型，这可能会出问题。
Object.getOwnPropertyDescriptors允许创建真实的对象浅副本并创建子类,它通过给开发者描述符来做到这一点.在Object.create(prototype, object)放入描述符后，返回一个真正的浅拷贝。
Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)
或者可以合并两个对象target和source如下：
Object.defineProperties(
  target,
  Object.getOwnPropertyDescriptors(source)
)
这里有两种描述符号类型：
1.数据描述符（Data descriptor）
2.存取器描述符（Accessor descriptor）
存取描述符有必须属性：get 或者set或者get和set两个就是如你所想的getter和setter函数，然后存取描述符还有可选属性configurable和enumerable
let azatsBooks = {  
  books: ['React Quickly'],
  get latest () {
    let numberOfBooks = this.books.length
    if (numberOfBooks == 0) return undefined
    return this.books[numberOfBooks - 1]
  }
}

这个例子数据描述符books由Object.getOwnPropertyDescriptor(azatsBooks, 'books')产生结果如下：
Object
    configurable: true
    enumerable: true
    value: Array[1]
    writable: true
    __proto__: Object
同样的，Object.getOwnPropertyDescriptor(azatsBooks, 'latest')将会展现latest的描述符，这个latest（get）存取器描述符展现如下：
Object
    configurable: truee
    numerable: true
    get: latest()
    set: undefined
    __proto__: Object
现在我们调用新方法获取所有的描述符：
console.log(Object.getOwnPropertyDescriptors(azatsBooks))
它会给出这个对象两个描述符books和latest：

Object
  books: Object
    configurable: true
    enumerable: true
    value: Array[1]
    writable: true
    __proto__: Object
  latest: Object
    configurable: true
    enumerable: true
    get: latest()
    set: undefined
    __proto__: Object
  __proto__: Object


5.String padding(字符串填充)
String.prototype.padStart 和 String.prototype.padEnd在javascript字符操作是一个不错的体验，帮助避免依赖而外的库。
padStart()在开始部位填充，返回一个给出长度的字符串，填充物给定字符串，把字符串填充到期望的长度。从字符串的左边开始（至少大部分西方语言），一个经典例子是使用空格创建列：
console.log('react'.padStart(10).length)         // "       react" is 10
console.log('backbone'.padStart(10).length)         // "  backbone" is 10
它对于财务方面非常有用：
console.log('0.00'.padStart(20))            
console.log('10,000.00'.padStart(20))    
console.log('250,000.00'.padStart(20))
如果是为会计做账之类的，这个很实用，帐做的很整齐?
         0.00
    10,000.00
   250,000.00    
第二个参数，让我们放一些其他的填充字符替代空字符串，一个字符串填充：
console.log('react'.padStart(10, '_'))         // "_____react"
console.log('backbone'.padStart(10, '*'))         // "**backbone"
padEnd顾名思义就是从字符串的尾端右边开始填充。第二个参数，你能实际上用一个任何长度的字符串。例如：
console.log('react'.padEnd(10, ':-)'))         // "react:-):-" is 10
console.log('backbone'.padEnd(10, '*'))         // "backbone**" is 10