ECMAScript6扫盲笔记(一)

ECMA组织推出的ECMAScript是一个标准（协议），JS是协议的实现。   ECMAScript简称ECMA或ES。目前使用最多的是ES5.1，ES6正式推出是在2015年。就酱~。    ES6（ES2015）兼容性：http://kangax.github.io/compat-table/es6/
ES6(ES2015) 支持 ：IE10+、Chrome、FireFox、移动端、NodeJS。

 

1. ES6编译转换

为了使ES6可以支持低版本的浏览器，可以对ES6进行编译和转换：在线转换（用户每次打开页面时都需要转换一次，用户体验差）和提前编译（也会耗费编译时间，因此，对于小白来说，不支持的东西就先不用了）。
提前编译ES6规则的js需要在html引入script和type，eg：

<script src="browser.js" charset="utf-8"></script>
<script type="text/babel">
    let a=12;
    let b=5;
    alert(a+b);
</script>

 

2. 变量

var声明变量的弊端

1. 同一个变量名可以重复声明（var a=5;var a=13;）。
2. 无法限制修改（没有常量）。
3. 没有块级作用域（块级作用域，例如在for循环中，for(int i=0;i<3;i++),定义的循环变量i，只在for块中有效。）。

ES6新变量：

let：定义变量；同名变量不能重复声明；块级作用域；

const：定义常量；同名变量不能重复声明；块级作用域；

块级作用域的作用  eg：

<input type="button"  value="按钮1" />
<input type="button"  value="按钮2" />
<input type="button"  value="按钮3" />
<script type="text/javascript">
	/*window.onload=function(){
		var aBtn = document.getElementsByTagName('input');
		for(var i=0;i<aBtn.length;i++){
			(function(i){
				aBtn[i].onclick=function(){
					console.info("i=",i);
				};
			})(i);
		}
	}*/
	window.onload=function(){
		var aBtn = document.getElementsByTagName('input');
		for(let i=0;i<aBtn.length;i++){
			aBtn[i].onclick=function(){ console.info("i=",i); }
		}
	}
</script>

 

3. 函数

  (1). 箭头函数（只有一个参数，则可以省略()；若只有一个return，则可以省略{}。只是一种简写而已）

        eg1：(function()可以被箭头()=>代替) 

<script>
	/*let show = function (){	alert('abc');	};*/
	let show = () => {  alert('abc');	};
	show();
</script>

        eg2：(省略了{}和return，由于两个参数，因此()不能省略。)

<script>
    let arr=[12, 5, 8, 99, 33, 14, 26];
    /*arr.sort(function (n1, n2){
      return n1-n2;
    });*/
    arr.sort((n1, n2)=>n1-n2);
    alert(arr);
</script>

        eg3：（有且只和有一个参数和一个return的情况）

<script>
    /*let show = function(a){
      retrun a*2;
    }*/
    let show=a=>a*2;
    alert(show(12));
</script>

  (2). 函数参数 

1. 默认参数。在es6规则中，定义的函数，其参数可以直接用“等号”赋予值，当该函数未接收到参数时，仍有默认值。eg:

   <script>
       function show(a, b=5, c=12){
         console.log(a, b, c);
       }
       show(99, 19);
   </script>

2. 接收不定个数的参数。es6规则可以使函数接收参数时，使用...YourNames接收多个参数。eg：
    

   <script>
       function show(a, b, ...args){//a,b参数均可以接收到值，其它参数全都收入args数组中
         alert(args);
       }
       show(12, 15, 8, 9, 20, 21);
   </script>

3. 简化数组表示方式。在ES6中，...args的形式即可表示数组的所有元素。eg：

    

 

4. 解构赋值

• 左右两边结构必须一样
• 右边必须是个对象
• 声明和赋值不能分开(必须在一句话里完成)

eg：

<script>
  let {a, b, c}={a: 12, c: 5, b: 6};   // 两边都是{}，右侧是json对象。
  console.log(a, b, c);

  let [e,f,g]=[1,5,8];  // 两边都是[],右边是数组。
  console.log(e,f,g);
</script>