ES6 基础 - 01

1.什么是ES 6：

    ES 6 全称 ECMAScript 6.0，也叫 ES 2015，它是2015年6月发布的，是JavaScript语言的下一代标准，它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

    ECMAScript 和 JavaScript 的关系：前者是后者的规格，后者是前者的一种实现。

2.浏览器对ES6的支持：

    ES6提供了许多新的特性，但并不是所有的浏览器都能够完美支持，附一段桌面端浏览器对ES6的支持情况：

• Chrome：51 版起便可以支持 97% 的 ES6 新特性。
• Firefox：53 版起便可以支持 97% 的 ES6 新特性。
• Safari：10 版起便可以支持 99% 的 ES6 新特性。
• IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

3.ES6的一些新特性：

    （1）let ：用来声明变量，同 var 一样；

let a = 123;
console.log(a)    //输出123

    * let 和 var 的区别：

{ 
     var a = 123;
     console.log(a)    //输出123
     let b = 456; 
     console.log(b)    //输出456
}
console.log(a);   //输出123
console.log(b);   //报错 

    区别1：var 具有全有作用域和局部作用域，而 let 具备块级作用域，也就是只有在代码块内才能进行输出，比如{ }，if，for....

console.log(a)   //输出undefined
var a = 123;
console.log(b);    //报错
let b = 123;

    区别2：var 是具有变量声明提升的，而 let 不允许变量声明提升；

var a = 10;
var a = 123;
console.log(a)    //输出123,就近原则
let b = 10;
let b = 123;
console.log(b)    //直接报错

    区别3：var 是可以重复声明的，而 let 不允许重复声明；

//举一个例子：点击以下每个li中的数字，让控制台输出其对应的数字，HTML代码如下：
<ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>
//JavaScript代码如下：
var lis = document.getElementsByTagName("li")
for(var i = 0;i < lis.length;i ++){
   (function(i){
       lis[i].onclick = function(){
           console.log(i)
       }
   })(i)
}
//注：如果不使用立即执行函数，控制台只会输出一个5
//当将 var 换成是 let 时
for(let i = 0;i < lis.length;i ++){
    lis[i].onclick = function(){
       console.log(i)
    }
} 
//此时控制台就会正确输出对应的数字，因为使用let以后，循环体内部形成了各自单独的作用域

    （2）const：声明一个只读的常量，一旦声明，常量的值就不能改变；并且声明之后，必须要赋值；

const A = 123;     //人为规范：常量名全部使用大写
A = 456;
console.log(A)    //直接报错

    const 也是只在声明所在的块级作用域中才有效，同时也不允许声明提升和声明重复；

    （3）字符串模板：

    在ES6以前，只能通过 "字符串" + 变量 + " 字符串" 来进行字符串的拼接过程，并且不能直接换行，若要换行必须要加 \ （反斜杠）进行换行，大大的增加了代码量，而且容易出错；

    在ES6中，是将变量放在${ }中，和字符串进行拼接，并且可以直接进行换行，书写格式：` 字符串${变量} ` ；注意是 ` 符号；

//ES6以前
ar a = 123;
console.log('hello' + a)
//ES6中
let a = 123;
console.log(`hello${a}`)     //二者输出结果一样

    （4）字符串中的一些方法：

        includes：判断字符串中是否含有该字符，若有，返回true，反之返回false；

var a = "hello";
console.log(a.includes("a"))     //输出true

        repeat：获取字符串并可以进行重复n次：

var b = "ha";
console.log(b.repeat(3))    //输出hahaha

        startsWith 和 endsWith ：判断字符是否在字符串的头部和末尾，返回布尔值：   

var a = "hello world!";
console.log(a.startsWith('h'));    //true
console.log(a.endsWith('!'))      // true

   （5）数组的一些扩展方法：

        先来看一下ES6以前的数组的复制，克隆：

var arr = [1,2,3];
var arr1 = arr;
console.log(arr == arr1)   //true
//二者之间进行比较，比较的是地址
arr1[0] = 5;    //将arr1中内容发生改变
console.log(arr == arr1)    //true
console.log(arr,arr1)    //二者都输出523
//不管怎么改变，它们的地址始终不会变，并且arr的值会根据arr1的改变而改变

var arr2 = [];
console.log(arr == arr2)    //false
//只有为引用值时才能产生一个新的地址，也就是重新创建一个数组
for(var i = 0;i < arr.length;i ++){
     arr2.push(arr[i]);     //将arr中的值添加到arr2中
} 
console.log(arr2)   //523
arr2[0] = 2;    //进行arr2的值的改变
console.log(arr,arr2)    //输出523 和 223
//这是数组的深度克隆，前者不会因为后者的改变而改变

        再来看ES6中的数组的克隆：

//第一种 Array.form方法
var arr = [1,2,3];
var arr1 = Array.from(arr);
console.log(arr,arr1);    //结果相同，但地址不同
console.log(arr == arr1)    //false
//第二种：数组的超引用
var arr2 = [...arr];
console.log(arr == arr2);    //false

        ES6以前，类数组想要拥有数组中方法必须要加 Array.prototype....方法：

function str(){
   console.log(arguments);       //arguments是获取所有形参，它本身就是一个类数组
   arguments.push = Array.prototype.push;      //添加数组中push方法
   arguments.push(5);
   console.log(arguments)       //添加成功
}
str(1,2,3,4)

        在ES6中，简化了代码，并且直接以数组的形式输出出来；

function str(...age){      //名字随便定义，相当于获取了所有的形参
   console.log(age);     //[1,2,3,4]
   age.push(5);        //直接使用数组中的方法
   console.log(age)     //[1,2,3,4,5]
}
str(1,2,3,4)