ES6语法的特点以及使用

1、let定义变量

1. 先定义后使用，不存在预解析，不可重复定义

   console.log(a); //a is not defined
   let a = 1;
   //如果有预解析，会打印undefined
   

2. 块级{}作用域

   for (let i = 0; i < 10; i++) { 
     //i只作用于{}内
       function a() {
         console.log(i); //打印0 ~ 9，作用域链的关系，可以访问外部let定义的i 
       }
       a();
   }
   console.log(i);//i is not defined
   

2、 const定义常量

1. 先定义后使用，不存在预解析，不可重复定义

2. 定义常量，定义后不可更改

   const a = 1;
   a = 2;
   console.log(a); //Assignment to constant variable 报错
   

3. 定义必须赋值

   const a;
   a = 1;
   console.log(a); //Missing initializer in const declaration 报错
   

4. 一般用来定义对象，数组， 函数

   const a = {};
   a.name = 'ls';
   console.log(a); //{ name: 'ls' }
   

3、对象和数组的解构赋值，数组去重，扩展运算符，…rest，模板字符串

1. 对象的解构赋值

   let obj = {
     username: 'ls',
     age: 20
   }
   //解构赋值
   let {username, age} = obj;
   console.log(username, age); //'ls' 20  把对象里的属性当作变量来使用，使用前记得先定义
   

2. 对象解构赋值重命名

   let obj = {
     username: 'ls',
     age: 20
   }
   //解构赋值
   let {username: name, age: a} = obj;
   console.log(name, a); //'ls' 20  username,age已经无法使用
   

3. 数组的解构赋值

   const arr = [1, 2, 3];
   let [a, b, c] = arr;
   console.log(a, b, c); //1 2 3
   

4. 交换两个变量值

   let a = 1;
   let b = 2;
   [b, a] = [1, 2]; //等号右边是数组  左边是解构
   console.log(a, b); // 2 1
   

5. 数组去重
   注意：通过new Set()方法返回的数组是一个伪数组，伪数组能够拥有真数组的一些属性特效，但是不能使用真数组的方法比如：push()、pop()、unshift()…等等。此时我们可以使用Array.from ()这个方法把为数组转换成真数组

   const arr = [1, 1, 2, 3, 4, 3];
   const newArr =  new Set(arr) 
   //新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值，Array.from()把伪数组转成数组
   console.log(newArr ); //[ 1, 2, 3, 4 ]
   const trueArr = Array.from(newArr);
   trueArr.push(3)//[ 1, 2, 3, 4,3 ]
   
   

6. 扩展运算符 三个点… 用来解压数组或者对象
   注意：如果对象里面有相同的属性那么后面解压对象的属性值会覆盖前面对象的属性值

   //合并数组
   const a1 = [1, 2];
   const a2 = [3，...a1];//a2 = [3, 1, 2] 
   //合并对象
   const obj1 = {name: 'ls'};
   const obj2 = {age: 18, ...obj1}; //{age: 18, name: 'ls'}
   

7. 函数形参…rest 接收的是一个数组，是实参的值，放进rest数组里。而函数里的arguments是伪数组

   function foo(...rest){
        console.log(a); //undefined
        console.log(b); //undefined
        console.log(rest); //[1, 2, 3, 4, 5]          
   }
   foo(1,2,3,4,5); // 1,2,Array [3,4,5]
   

8. 模板字符串 `` 数字1左边的反引号 变量用 ${变量名} 表示

   var name = "ls";
   var age = 22;
   //es5
   console.log("Hello I'm " + name + ",my age is " + age + "")
   //es6
   console.log(`Hello I'm ${name},my age is ${age}`)
   

4 、箭头函数 是匿名函数

1. 完整体

   (形参...) => {代码块}  === function () {}
   

2. 箭头函数里的this指向它外部函数里的this

   const _name = '王五'
   const obj = {
   	_name: '张三',
       fn: function () {
           //我是定时器回调函数的外部函数，我的this谁调用指向谁
           console.log(this._name); //obj调用的我，所以我打印   '张三'
           //改造前
           setTimeout(function () {
               console.log('我是普通函数打印的' + this._name); //obj调用的我，我是普通函数  '王五'
           }, 200)
           //改造成箭头函数   箭头函数里的this指向它外部函数里的this
           setTimeout(() => {
               console.log('我是箭头函数打印的' + this._name); //obj调用的我，我是箭头函数  '张三'
           }, 200)
       }
   }
   obj.fn();
   

3. 箭头函数的书写

   • 完整体

     const getNum = (x, y) => {
         return x + y
     };
     console.log(getNum(1, 2)); //3
     

   • 只有一个形参，（）可以省略

     const getNum = x => {
         return x + 2;
     }
     console.log(getNum(1, 2)); //3
     

   • 没有形参，（）不能省略

     const getNum = () => {
         return 1 + 2;
     }
     console.log(getNum()); //3
     

   • {}内只有一行代码，{}可以省略，自带return效果

     const getNum = x => x + 2;
     console.log(getNum(1)); //3
     

5、 定义对象中属性和方法的新方式

1. 对象属性名和函数名一致,只写一次就行

   const fn = () => {console.log('打印一下')};
   //es5
   const obj1 = {
       fn: fn
   }
   //es6
   const obj2 = {
       fn
   }
   obj1.show(); //打印一下
   obj2.show(); //打印一下
   

2. 对象中的方法简写

   //es5
   const obj1 = {
       show: function () {
           console.log('打印一下')
       }
       //es6 这么写this指向就变了哦
       show: () => {
           console.log('打印一下')
       }
   }
   //es6
   const obj2 = {
       //es5普通写法的简写， 如果是箭头函数没有简写
       show() {
           console.log('打印一下')
       }
   }