ES6新增特性

1.let和const

点击此处-上一篇我的博客中提到，在这里就不加描述了❤~

2.解构

从数组和对象中提取值，对变量进行赋值，称为解构；

数组解构

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

对象解构.

let obj = {
	name:'阿z'，
	age:18,
	x:'aaa',
	y:'bbb'
}
  let { x,y } = obj;
  let { name:m,age:n } = obj;
  console.log(x,y);
  console.log(m,n);

字符串解构

let str = "123abcd";
let [a,b,c,d,e,f] = str;
console.log(a,b,c,d,e,f);

应用：

函数参数的解构赋值

function fn([x,y,z=100]){
	console.log(x,y,z);//1 2 3
}
fn([1,2,3])

函数的返回值

function f2(){
	return [1,2,3.4];
}
let [a,b,c,d] = f2();
console.log(a,b,c,d);

变量互换

let a = 5;
let b = 6;
[a,b] = [b,a];
console.log(a,b);

3.扩展运算符（…）

作为数组的一部分

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

数组复制

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

合并数组

let arr4 = [1,2,3];
let arr5 = [4,5];
let arr6 = [...arr4,...arr5];
console.log(arr6);//1,2,3,4,5

合并对象

let obj1 = {
            name:'zs'
        }
let obj2 = {
    name:'lisi',
    school:'z'
}
let obj3 = {...obj1,...obj2};
console.log(obj3);

类数组转化成数组

<script>
        var aLi = document.getElementsByTagName("li");
        var arr = [];
        for(var i=0;i<aLi.length;i++){
            arr.push(aLi[i]);
        }
        console.log(arr);


        let arr2 = [...aLi];
        console.log(arr2);
</script>        

4.字符串扩展（模板字符串,includes）

对于比较复杂的字符串拼接，可以采用``方式

let a = 3;
let b = 4;
console.log(`${a}+${b}的结果是${a+b}`);//3+4的结果是7

5.数组扩展（find,filter,map,forEach,Array.from,for…of）

find: 找到第一个符合条件的成员
filter: 找到所有符合条件的成员
map: 映射出一个新的数组
forEach: 循环数组，不会映射出一个新的数组
Array.from: 类数组转化为数组的方法
for…of:
循环数组中的元素：for(val of arr),
循环数组的索引：for(index of arr.keys()),
循环数组的索引和值：for([index,val] of arr.entries())

6.对象扩展（简写，合并）

属性和变量同名时

var obj = {
            name:name,
            age:age,
            say:function(){
            	console.log("haha");  
            }
       }
 //简写
var obj1 = {
     name,
     age,
     say(){
         console.log("haha");   
     }
 }

合并对象

var obj1 = {
            name:'zs'
  }
var obj2 = {
     name:'lisi',
     age:20
 }
 Object.assign(obj1,obj2);
 console.log(obj1);

7.函数扩展（箭头函数=>）

1.箭头函数中this 指向声明时的this(父作用域的this) 普通函数中this调用时的this
2.箭头函数中不能使用arguments对象，该对象在函数体内不存在 ,可以使用…rest参数替代
3.箭头函数不可以当构造函数，也就是说，不可以使用new命令，否则会抛出一个错误

8.set和map

set 成员的值都是唯一的，没有重复值,通常来用数组去重

let x = new Set([1,2,2,3,3,4]);
console.log(x);//1,2,3,4
//注：set后为类数组，要使其转化为原来的数组，需要[...x]或者Array.from(x);

map 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键；换句话说，对象的属性名必须是字符串，map的属性名可以是其他类型的

let p1 = new Map();
p1.set('age',10);
p1.set('name',"lisi");
console.log(p1);
//{"age" => 10}
{"name" => "lisi"}

9.symbol

基本数据类型symbol，表示独一无二的值，可以保证不会和其他属性名产生冲突

10.类（继承）

ES5:
类也是构造函数
属性写在构造函数中，方法写在原型下
构造函数中有一个prototype属性，指向原型对象，可以被所有实例化对象所共享

子类继承父类的属性和方法：
1.继承属性：在子类构造函数中继承父类的属性，需要通过父类.call（this）继承属性
2.继承方法：子类的prototype = new 父类的实例化对象
子类构造函数下prototype属性，本来的constructor 指回子类的构造函数

ES6中Class可以通过extends关键字实现继承，相比起ES5用修改原型链的方式来实现继承，要清晰方便很多。
ES6:

class Person{
	constructor(){
			...
		}
}
class Coder extends Person{
	constructor(){
		super();//super用来继承父类的属性
		...
	}
}

小结：

ES6中新增了不只上面这些，以上我总结的我认为是最重要的、最需要掌握的！
欢迎各位小伙伴们指点！！❤