ECMAScript简介及es6新增语法

前言
以前和大家分享的都是JavaScript的基础，今天就和大家分享的是JavaScript新增的语法ECMAScript，简称es6。

ECMAScript是JavaScript语言的国际化标准，JavaScript是ECMAScript的实现。（前者是后者的规格，后者是前者的实现。但通常两者是可互换的。）

let关键字

1. let 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用
         在 { } 之外,是不能被调用执行的
         { } 包括 if 、switch、for、forEach、for...in、while、function
   

   es6新增了let关键词，用来声明变量。let声明一个块级作用域的变量，而var声明一个函数作用域的变量。简单来说，let声明的变量只作用在它所在的花括号内。
   例子如下：首先用var声明的 i 变量，我们可以看到，for循环结束以后，我们仍然可以获取变量i的值。

        function fun1() {
            var sum = 0;
            for (var i = 0; i < 100; i++) {
                sum += i;
            }
            console.log(i) //输出为100
        }
        fun1();

下面用let，声明一个块级作用域的变量。一对花括号的内部范围即为一个块级作用域。 i的值为undefined，我们获取不到for循环内部的i的值。let有效！

		function fun2() {
            var sum = 0;
            for (let i = 0; i < 100; i++) {
                sum += i;
            }
            console.log(i); //输出为Uncaught ReferenceError: i is not defined...
	   	}
	 	fun2();

2. let 定义的变量,不会进行预解析
   

// var 的情况
console.log(fun1); // 输出undefined
var fun1 = 6;
 
// let 的情况
console.log(fun2); // 报错Uncaught ReferenceError...
let fun2= 6;

3. 不允许重复声明

   let不允许在相同作用域内，重复声明同一个变量，一个变量名称只能定义一次。
   

4. let 在不同 { } 中,是不同作用域中定义let 变量。此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重复 
   

2.const关键字

在JavaScript中往往管const定义的变量,称为常量

(1).const定义的变量,一旦赋值,不能改变。

例子： 对const定义的变量,重复赋值,会报错

        const str = 100;
        str = 200;// Uncaught TypeError: Assignment to constant variable.

(2).定义变量的名称,不能重复,否则会报错

 		const str = 100;
        const str = '';//Uncaught SyntaxError: Identifier 'strstr' has already been declared

(3). const定义在{ }中,不能在{ }外调用

        if (true) {
            const sss = 'sss';
            console.log(sss);//sss
        }
        console.log(sss);//Uncaught ReferenceError: sss is not defined...

(4). const中存储的是引用数据类型的地址,只要地址不改变,可以改变数组,对象中的单元存储的数据

	对于数组：给数组中第1个单元,修改存储的数据
	const arr 中存储的数组的地址是不改变的,可以执行的

        const arr = [1, 2, 3, 4, 5, 6];
        arr[0] = '北京';
        console.log(arr); //["北京", 2, 3, 4, 5, 6]

	对于对象;修改对象中,单元存储的数据,
	不是修改 obj中存储的内存地址,是可以执行的

        const obj = {
            name: '张三'
        };
        obj.name = '李四';
        console.log(obj);//{name: "李四"}

对let和const的小总结：

  	let    多用于定义 基本数据类型 以及 循环中
    const  多用于定义 引用数据类型

3.箭头函数

所谓的箭头函数，是函数的另一种语法形式。
    const fun = function(){}     普通函数
    const fun = ()=>{}           箭头函数
    将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式

        普通函数
        oDiv.addEventListener('click' , function(){
            console.log('我是div标签')
        })

        箭头函数
        oDiv.addEventListener('click' , ()=>{
            console.log('我是div标签');
        })
        
        普通函数（只有一个参数）
        oDiv.addEventListener('click' , function(e){
            console.log(e);
        })
        
        箭头函数（只有一个参数，可以不写(),直接定义一个参数）
        oDiv.addEventListener('click' , e=>{
            console.log(e);
        })

		如果执行体中只有一行代码,可以不写{}
        const fun = e=>{console.log(e)}    普通箭头函数
        const fun = e=> console.log(e)     不写{}箭头函数

4.箭头函数中的this指向

普通函数的this指向
声明式,赋值式/匿名函数,对象中函数,绑定的事件处理函数
this都是指向的调用函数时,之前定义的内容

    1,声明式 --- 指向的是window
    function fun1(){
        console.log(this);
    }
    fun1();

    2,匿名函数/赋值式 --- 指向的是window
    const fun2 = function(){
        console.log(this);
    }
    fun2();

    3,定义在对象中的函数 --- 指向的是对象
    const obj = { 
        fun3 : function(){
            console.log(this);
        }
    }
    obj.fun3();
    
	4,绑定的事件处理函数 --- 指向的是绑定事件处理函数的标签
	<div>1234</div>
    const oDiv = document.querySelector('div');
    oDiv.addEventListener('click', function() {
        console.log(this);//<div>1234</div>
    })

2,箭头函数的this指向

  如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
  如果父级程序没有this指向(数组,对象....),this指向的是window

//this指向window
oDiv.addEventListener('click', () => {
            console.log(this);
        })

 箭头函数的this,是父级程序,forEach()的this,是window
     <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    const oLis = document.querySelectorAll('li');
     oLis.forEach(function(item, key) {
         console.log(this); // 输出的是forEach的函数的this指向
         item.addEventListener('click', () => {
             console.log(key, this);//key是li的索引下标   Window  
         })
     })

箭头函数有几个使用注意点。

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

ok，这可累死我了，希望可以帮助你呀！！！