ES6新增特性
【说明】ES5和ES6是javascript语法发展过程中的新增版本，对一些语法及功能性方法作了增加，因些，对于一些旧的浏览器来说，有很大的兼容性问题。因些，我们在做一些开发工作时，对一些浏览器的兼容有一定要求时，一定要慎用。
ES6新增数据类型
ES6中引入一第七种数据类型，Symbol类型
Symbol类型：一种新的原始数据类型，表示一个独一无二的值。
为何要引入？
如果有一个对象obj,对象下有一个fn方法，有一天突然要对这个对象扩展一些新功能，一不小心又添加了一个fn方法，于是之前定义好的fn方法会被新添加的fn方法覆盖。为了解决这种现象，js就引入了Symbol这个独一无二的值，常常用于对象的属性中。
每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符，让该属性具有唯一性和私密性；这是该数据类型仅有的目的
Symbol类型值的创建
let s = Symbol();
typeof s;//"symbol"
let s1 = Symbol();
console.log(s == s1);//false，是两个不同的值
【注】创建Symbol类型值，不能使用new关键字创建，因为Symbol是一个值，而不是一个对象。而new是创建一个对象。
Symbol的参数
//let s1 = Symbol('name');//name参数是这个Symbol原始类型值的名称,用于对这个值的描述，用来区分这个原始类型值是哪一个
var s1 = Symbol("name1");
var s2 = Symbol("name2");
console.log(s1);
console.log(s2);
在对象属性中的使用
var a = Symbol("isa");
var b = Symbol("isb");
var obj = {
name: "tom",
age : 19,
[a] : "a",
[b] : "b"
}
obj.a = 2;//不会将obj中的[a]属性修改
obj["a"] = 3;//不会将obj中的[a]属性修改
console.log(obj);
在对象中不会被迭代
var a = Symbol("isa");
var b = Symbol("isb");
var obj = {
name: "tom",
age : 19,
[a] : "a",
[b] : "b"
}
for(var key in obj){
console.log(key);//name age
}
console.log(Object.keys(obj));//["name", "age"]
console.log(Object.getOwnPropertyNames(obj));//["name", "age"]
// 可以使用ES6中Object的新增API迭代
console.log(Object.getOwnPropertySymbols(obj)[0]) //[Symbol(isa), Symbol(isb)]
新增变量声明方式let和const
let 和 const 的使用方式和 var 没有区别,但是声明出的变量，使用规则有所不同，let 和 const 多了一些对变量的限制
let和const声明变量的共同点：
1，不允许重复声明变量
2，有自己的块级作用域
3，没有变量提升
4，暂时性死区：作用域下，通过let声明的变量， 变量声明之前的区域，该变量不可用，这个区域就称作暂时性死区。
let声明变量
let a = 9;
const声明变量
1.const声明常量值
const q = 5;
2.const声明引用值
const arr = [1,2,3];
var,let,const的区别:
1、let声明的时候可以不赋值，const声明的时候必须赋值
2、let声明的变量，可以改变，const声明的变量，不可以改变（引用数据类型的地址不可变，数据可变）。
3、var声明的变量有变量提升，没有块级作用域，可以重复声明，let和const都相反
箭头函数
ES6中新增了书写函数的方式，值得注意的是：箭头函数只能在书写匿名函数的时候使用
this指向的总结
箭头函数的书写方式
var fn = () => {alert("ok")};fn();
只能在匿名函数上使用
box() => {};//语法错误：箭头函数参数列表格式错误：Uncaught SyntaxError: Malformed arrow function parameter list
所有匿名函数都可以写成前头函数
//自定义函数 var fn = () => {}; //定时器(回调函数) setTimeout(() => {}); //对象下 var obj = { fn : () => {}; } 事件 document.onclick = () => {} 回调函数 arr.forEach((ele,index,array) => {}); 自执行函数 (() => {})();
箭头函数的参数
1.正常传参
var fn = (a,b) => { alert(a+b); } fn(2,3);
2.只有一个参数时可省略小括号
var fn = a => { alert(a); } fn(2);
函数体只有一行代码时可以省略大括号,并自带返回值
var fn = a => a + 5; var val = fn(2); alert("返回值：" + val);//7
剪头函数中没有自己的this,this来源于上一层的上下文(来自父级作用域);
var fn = () => {
console.log(this); // window
}
document.onclick = () => {
console.log(this); // window
}
var obj = {
fn : () => {
console.log(this); // window
}
}
document.onclick = function(){
var fn = () => {
console.log(this); // document
}
}
document.onclick = function(){
var obj = {
fn : () => {
console.log(this); // document
}
}
}
document.onclick = function(){
setTimeout(() => {
console.log(this); // document
})
}
【说明】箭头函数中没有自己的this指向，this来源于声明时所在父级作用域。
箭头函数中没有arguments
var fn = () => { console.log(arguments);//Uncaught ReferenceError: arguments is not defined } fn(1,2,3,4,5);
函数参数的默认值
我们在定义函数的时候，有的时候需要一个默认值出现，就是当我不传递参数的时候，使用默认值，传递参数了就使用传递的参数
1,原来函数参数默认值设置
function fn(a){
a = a || 10;
alert(a);
}
fn();//输出默认值10
fn(20);//输出传递的实参20
2,ES6默认参数设置
function fn(a = 10){
alert(a);
}
fn();//输出默认值10
fn(20);//输出传递的实参20
【注】箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写 （）。
解构赋值
【概念】就是快速从对象或者数组中取出成员的一个语法方式
解构数组
函数中可以通过解构数组返回多个结果
解构对象
通过解构对象应用于函数的对象传参
轻松实现两个数的交换
【注】{}是专门解构对象的，[]是专门解构数组的，二者不能混用，字符也可以作为数组解析
var str = "1234";
var [a,b,c] = str;
console.log(a,b,c);//1 2 3
模板字符串
普通字符串的使用
模板字符串的使用
1，基本使用：
2，变量解析：
展开运算符（扩展运算符）
ES6 里面号新添加了一个运算符 “... ”，叫做展开运算符
展开数组
合并数组
展开对象
合并对象
函数参数中的使用
ES6函数新增bind（val）方法
bind方法：可以实现函数内部this指向的强制改变，不会立即执行函数，而是返回一个已经改变了 this 指向的新函数。
bind()方法的使用
bind()方法与call和applay的区别
call和applay也能强制改变函数内部this指向，但与bind的使用有异同
1.相同之处
2.不同之处
【注】 箭头函数不能使用call apply bind
字符串新增ES6方法
var str = "cdef";
console.log(str.includes("de"));//true,字符串是否包含de
console.log(str.endsWith("ef"));//true,字符串是否以ef结尾
console.log(str.startsWith("cd"));//true,字符串是否以cd开头
console.log(str.repeat(3));//cdefcdefcdef,str重复拼接自身3次
console.log(str.padStart(9,"ab"));//ababacdef，str开头以ab补全9-4个字符，
console.log(str.padEnd(9,"ab"));//cdefababa，str结尾以ab补全9-4个字符，
ES6新增set集合和map集合
set集合和map集合都是ES6中新增的保存数据的方式，set中保存的数据可以是任意数据类型，map中的数据以键值对的方式存在，值可以是任意数据类型
set集合：特点是自动去重，同时提供了一些非常好用的方法
1，创建集合对象
var set = new Set();定义一个set空的集合对象
2，添加数据 (数据会被自动去重)
var set = new Set( [23,43,23] );//要用[ ]的方式添加数据
//错误用法：
var set = new Set( 23,43,23 );
//使用方法添加数据
var set = new Set()
set.add( 23 ).set.add( 43 ).set.add( 23 )...
//使用Array.from(set)方法可以将set集合转换为真正的数组
var brr = Array.from(new Set(arr));
console.log(brr);//转换成了数组，并完成了数组去重
//世上最短的数组去重
var brr = [...new Set(arr)];
console.log(brr);
3，size属性
console.log(set.size);//set数据长度
4，方法的使用
set.add();向集合中添加一个值，一次只参添加一个
set.delete(val);删除集合中的某个值
set.has(val);判断集合中是否有某个值
set.clear();清空集合
5，set遍历
set.forEach( ( item ) => { console.log( item ) } );
for(var item of set){console.log( item )};
map集合
1，创建集合对象
var map = new Map();
2，添加数据
map.set("name","tom").set("phone","120").set("email","[email protected]");
3，size属性
console.log(map.size);//键值对的个数
4，方法的使用
map.set(key,val);//添加数据
console.log(map.get(key));//根据键获取值
console.log(map.has(key));//检测key字段在中是否存在
console.log(map.delete(key));//根据key删除对应的键值
map.clear();//清空数据
console.log(map);
5，map遍历
map.forEach(function(val,key,obj){
console.log(val,key,obj);
})
for(var arr of map){
console.log(arr[0] + "=" + arr[1]);
}
ES6补充
es5 数组新增遍历方式 for of
for ... of 遍历数组：遍历结果为值 但不能遍历JSON对象，会报错
es5新增方法Array.from();
1，Array.from(obj):
将一个含有length属性的对象、集合、类数组、伪数组 转成真正的数组
2，Array.from(obj，callBack):
callBack:参数是一个回调函数，功能与数组的map方法类似
3，一道面试题：定义一个函数，功能实现 生成m个n的数组 要求： 不利用循环
function fn(m,n){
var newArr = Array.from( { length:m },() => {
return n;
});
return newArr;
}
fn(6,3);