ES6 新特性

一、 let和const

1. var声明的变量存在变量提升，let和const不存在变量提升
2. let和const只能在块作用域内访问
3. 同一作用域下let和const不能声明同名变量，var可以
4. const定义常量不能修改，且使用时必须初始化，定义对象时对象的属性可以修改

注意：因为对象是引用类型的，person中保存的仅是对象的指针，而修改对象的属性不会改变对象的指针，所以这种情况就会修改成功。也就是说const定义的引用类型只要指针不发生改变，都是被允许的。

二、模版字符串

1. ES6新增的模板字符串

   ${} 和 ``

2. 字符串新方法

   1. includes()：判断字符串是否包含参数字符串，返回boolean值。

   2. startsWith()/endsWith()：判断字符串是否以参数字符串开头或结尾。返回boolean值。这两个方法可以有第二个参数，一个数字，表示开始查找的位置。

   3. repeat()：按指定次数返回一个新的字符串。

   4. padStart()/padEnd()：用参数字符串按给定长度从前面或后面补全字符串，返回新字符串。

三、解构表达式

ES6中新增数组解构和对象解构两种解构

1. 数组解构

   let [a,b,c] = [1,2,3];
   console.log(a,b,c);    //1,2,3
    
   let [a,b,c] = [1,,3];
   console.log(a,b,c);    //1,undefined,3
    
   let [a,,b] = [1,2,3];
   console.log(a,b);//1,3
    
   let [a,..b] = [1,2,3];  //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
   console.log(a,b);//1,[2,3]
   

2. 对象解构

   let [a,b,c] = [1,2,3];
   console.log(a,b,c);    //1,2,3
    
   let [a,b,c] = [1,,3];
   console.log(a,b,c);    //1,undefined,3
    
   let [a,,b] = [1,2,3];
   console.log(a,b);		//1,3
    
   let [a,..b] = [1,2,3];  //...是剩余运算符，表示赋值运算符右边除第一个值外剩余的都赋值给b
   console.log(a,b);		//1,[2,3]
   

四、对象方面

1、Map 和 Set 对象

1. Map对象 : Map对象用于保存键值对

   (1) object的键只能是字符串或ES6的symbol值，而Map可以是任何值。

   (2) Map对象有一个size属性，存储了键值对的个数，而object对象没有类似属性。

   let myMap = new Map([['name','ren'],['age',12]]);
   console.log(myMap);  //{'name'=>'ren','age'=>12}
   
   myMap.set('sex','male');
   console.log(myMap);  //{'name'=>'ren','age'=>12,'sex'=>'male'}
   console.log(myMap.size);  //3
   
   myMap.get('name');  //'ren'
   myMap.has('age');  //true
   myMap.delete('age');  //true
   myMap.has('age');  //false
   myMap.get('age');  //undefined
   

2. Set对象

   (1) Set对象和Map对象类似，但它是用来存储一组唯一值的，而不是键值对。

   (2) 类似数组，但它的每个元素都是唯一的。

   (3) 利用Set对象唯一性的特点，可以轻松实现数组的去重。

   let mySet = new Set([1,2,3]);//里面要传一个数组，否则会报错
   console.log(mySet);  //{1,2,3}
   
   mySet.add(4);
   console.log(mySet);  //{1,2,3,4}
   
   mySet.delete(1);  //true
   mySet.has(1);  //false
   console.log(mySet);  //{2,3,4}
   
   let arr = [1,1,2,3,4,4];
   let mySet = new Set(arr);
   
   let newArr = Array.from(mySet);
   console.log(newArr);  //[1,2,3,4]
   

2、数组新方法

1. Array.from()方法：常用于将类数组转化为真正的数组
2. includes()方法：是查看数组中是否存在这个元素，存在就返回true,不存在就返回false
3. map()方法：要利用原数组经过运算后的数组，或者从对象数组中拿某个属性
4. filter()方法：是将符合挑选的筛选出来成为一个新数组，新数组不会影响旧数组
5. forEach()方法：是循环遍历数组中的每一项，没有返回值
6. find()方法：是查找数组中符合条件的第一个元素，直接将这个元素返回出来
7. some()方法：找到一个符合条件的就返回true,所有都不符合返回false
8. every()方法：数组所有值都符合条件才会返回true,有一个不符合返回false
9. ... 扩展运算符: 如...arr

3、对象新方法

1. Object.is()方法：用来判断两个值是否为同一个值，返回一个布尔类型的值

   const obj1 = {};
   const obj2 = {};
   console.log(Object.is(obj1, obj2)); // false
   
   const obj3 = {};
   const value1 = obj3;
   const value2 = obj4;
   console.log(Object.is(value1, value2)); // true
   

2. Object.assign()方法：用于将所有可枚举属性的值从一个或多个源对象分配到目标对象，并返回目标对象

   const obj1 = { a: 1 };
   const obj2 = { b: 2 };
   const obj3 = { a:5 , c: 3 };
   //对象合并，把后面对像合并到第一个对象，对象里相同的属性会覆盖
   Object.assign(obj1, obj2, obj3);
   console.log(obj1); // { a: 5, b: 2 , c:3}
   

3. Object.keys() 返回对象所有属性

4. Object.values() 返回对象所有属性值

5. Object.entries() 返回多个数组，每个数组是 key–value

   let person = {
       name: "admin",
       age: 12,
       language: ["java", "js", "css"],
   };
   console.log(Object.keys(person)); // [ 'name', 'age', 'language' ]
   console.log(Object.values(person)); // [ 'admin', 12, [ 'java', 'js', 'css' ] ]
   console.log(Object.entries(person));    
   /* [
       ["name", "admin"],
       ["age", 12],
       ["language", ["java", "js", "css"]],
   ]; */
   

6. 对象字面量简写

   let person={
       name,
       age
   }
   

7. 对象拓展符

   1. 拷贝

   let person={
       name: "admin",
       age: 12,
       wife:"迪丽热巴"
   }
   let person2={...person}
   console.log(person2===person);//false
   console.log(person2);//{name: 'admin', age: 12, wife: "迪丽热巴"}
   

   2. 合并对象

   const obj1 = { a: 1 };
   const obj2 = { b: 2 };
   const obj3 = { a: 5, c: 3 };
   let newObj ={...obj1,...obj2,...obj3}
   console.log(newObj); // { a: 5, b: 2 , c:3}
   

4、函数方法

1. 参数默认值

   function add(a = 0, b = 0) {
   	return a + b;	
   }
   let x=add(); 
   let y=add(2); 
   let z=add(3, 4); 
   console.log(x,y,z); //x=0, y=2, z=7
   

2. 箭头函数

   ​ 箭头函数实现了一种更加简洁的书写方式。箭头函数内部没有arguments，也没有prototype属性，所以不能用new关键字调用箭头函数

   let add = (a,b) => {
       return a+b;
   }
   let print = () => {
       console.log('hi');
   }
   let fn = a => a * a;
   //当只有一个参数时，括号可以省略，函数体只有单行return语句时，大括号也可以省略。
   

   箭头函数的特点：

   (1) 箭头函数比普通函数更加简洁，且箭头函数都是匿名函数

   (2) 箭头函数没有自己的this，其只能沿用其上一层作用域的this

   (3) 箭头函数不能改变this指向，call()、apply()、bind()等方法不能改变箭头函数中this的指向

   (4) 箭头函数不能作为构造函数使用，不能使用new操作符创建

   (5) 箭头函数没有自己的arguments类数组对象

3. class类

   class 作为对象的模板被引入ES6，可通过class关键字定义类。class本质依然是一个函数。

   (1) 创建类

   class person {
       //关键字声明方式
       constructor(name) {
       	this.name=name
       }           
       say() {
           console.log("hello");
       }
   }
   var p = new person('p');
   p.say(); //'hello'
   console.log(p.name);
   

   (2) 类的继承

   类的继承通过extends关键字实现。子类必须在constructor中调用super()。

   class Person {
       constructor(name, age) {
           this.name = name;
           this.age = age;
       }
       say() {
       	console.log(this.name + ":" + this.age);
       }
   }
   class Student extends Person {
       constructor(name, age, sex) {
           super(name, age);
           this.sex = sex;
       }
   }
   var student = new Student("admin", 12, "male");
   student.name;   //'admin'
   student.sex;    //'male'
   student.say(); //'ren:12'
   

5、模块化

1. 导入：ES6使用关键字 import 导入模块（文件）

   import ‘模块名称’  from  ‘路径’；
   import  ‘路径’；
   

2. 导出：ES6 通过 export 和export default 导出模块

   let name = 'ren',age = 12;
   export {name,age};
   //注意：变量需要用大括号包裹，然后才能向外输出
   

   1. 防止命名冲突

   2. 复用性强