ecma6

1、什么是ECMA6

1.ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准，在2015年6月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

---

2.ECMA6的缺点： 只有2015后出的浏览器版本，才有可能兼容ECMA6语法。

---

3、为什么要学习ECMA6

①ES6中引入的语言新特性，更具规范性，易读性、方便操作、简化了大型

②项目开发的复杂程度、降低了出错概率，提升了开发效率。大部分公司（不代表所有，代表着一个趋势）都在用ES6开发。

---

下面我们一起看下ECMA6的常用语法

---

ECMA6语法

1、EMCA6新增两个关键字 let const 声明变量

var关键字和let和const关键字声明变量到底有什么区别？
①let和const不允许重复声明变量。

let num1 = 10;
let num1 = 10;
alert(num1);  //报错

const num2 = 10;
const num2 = 10;
alert(num2);  //报错

②let和const声明的变量不会进行声明提升。（通过let声明变量，之前的区域，叫做暂时性死区）

var 的情况:
console.log(num);  //输出undefined
var  unm =10;

let 的情况：
console.log(num);  //报错
let num = 10；  

③、let和const声明的变量会被所有的代码块限制作用域（作用域更小），只要遇到大括号就形成作用域。

if(1){
var num = 10;
let num2 = 20;
//const num2 = 20;
alert(num2);   //  20
}
alert(num);    //  10
alert(num2)   报错

let关键字和const的区别

①let声明的变量的值可以被改变 const声明的变量的值不可以被改变（const一般情况声明常量） <-可以来声明IP->

const IP = "127.0.0.1";
IP = 10;  
alert(IP);  //报错

②let声明的时候可以不赋值，const声明的时候必须赋值

---

2、箭头函数

①箭头函数的语法 (函数的行参) => { 函数体内要执行的代码 }

//函数表达式写法：
var add = function(x, y){
return  x + y;
}

箭头函数  适当省略return和function关键字

//箭头函数的写法：
var add = (x, y) => x + y;
alert(add(30, 40));
【注】
箭头函数只能简写函数表达式，不能简写声明式函数。
箭头函数从执行效率上来说，和普通的声明函数写法没有任何区别。

② 箭头函数的写法上需要注意

1、函数的形参只有一个的时候可以不写()，其余情况下必须写
2、如果函数体只有一行代码的时候，可以不写{}，并且会自动return
var obj = {
fun1: function(){
alert("没有参数");
},
func2: function(a){
alert("有一个参数");
},
func3: function(a, b){
alert("两个以上的参数");
}
}

var obj = {
func1: () => {
alert("没有参数，必须写小括号");
},
func2: a => {
alert("有一个参数，可以不写小括号");
},
func3: (a, b) => {
alert("两个以上参数，必须写小括号");
}

}
obj.func1();
obj.func2();
obj.func3()；

③箭头函数的特殊

【注】普通函数中都有this，this指向当前函数的主人。
<1>、箭头函数中没有this，箭头函数里面的this指向上一层函数中的this。
<2>、箭头函数中没有arguments这个对象
④箭头函数的应用场景

箭头函数和ECMA5的语法结合使用，非常完美。
    forEach  遍历
    filter   过滤
    map      映射

普通函数遍历
var arr = [10, 20, 30, 40, 50];
 arr.forEach(function(item){
    document.write(item + "<br/>");
  })
箭头函数的遍历  
arr.forEach(item => {document.write(item + "<br/>");})
箭头函数的过滤
var newArr = arr.filter(item => item > 20);
箭头函数的映射
var newArr = arr.map(item => item * 2);

 alert(newArr); //20,40,60,80,100

3、函数传递参数的时候的默认值

要求：如果我们不传入参数的话，我们希望形参可以有一个默认值

//ES6之前默认值的设置
function func(a){
a = a || 10;
alert(a);
}
func();
func(100);

//【注】在ES6中我们可以直接把默认值写在函数的形参位置
function func(a = 10){
alert(a);
}
func();
func(100);

4、解构赋值

①、通过数组解构进行赋值
普通赋值
var x = 10, y = 20, z = 30;
alert(x + ", " + y + ", " + z); 
解构赋值
var [x, y, z] = [10, 20, 30];
alert(x + ", " + y + ", " + z); 

②通过对象解构进行赋值
var {name, age, sex} = {
age: 18,
name: "钢铁侠",
sex: "男"
}

解构的好处：
①、交换两个数位置的时候
[num1, num2] = [num2, num1];
②、函数传参的时候没有必要考虑函数的顺序
③、解构的形式里面，也可以给参数设置默认值
④、函数可以同时返回多个结果

---

5、模板字符串

普通字符串：所有带单引号或者双引号就叫做字符串。
‘hello’ “world”;
<1>、普通的字符串，一般情况下，只能放在一行处理
<2>、进行字符串拼接，通过+号进行拼接

ECMA6新的字符串 — 模板字符串
<1>必须用反引号``括起来，可以随机换行
<2>占位符的语法，进行字符串拼接 ${表达式}

function showSelf({name, age = 40, sex = "男"}){
alert(`我的名字叫${name}, 我的年龄是${age}, 我的性别是${sex}`);
}
showSelf({
name: "贝吉塔",
age: 33,
sex: "男"
})            
//我的名字叫贝吉塔, 我的年龄是33, 我的性别是男

---

6、里面新添加了一个运算符… -->展开运算符

<1>作用，将数组展开

let arr = [1, 2, 3, 4, 5];
console.log(arr);  // Array(5)

console.log(...arr);   // 1 2 3 4 5

<2>作用，将对象展开

var person = {
name: "Jack",
age: 18
}
var person2 = {
...person,
sex: "男"
}
var person2 = {
name: person.name,
age: person.age,
sex: "男"
}
console.log(person2)  // name: "Jack"age: 18sex: "男"