ECMAScript 6新特性（ES6）

一、ES6的三种声明方式

var：variable的简写，变量的意思。
let：声明局部变量。
const：声明常量。

二、解构赋值

①概述：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。等号左边和等号右边的形式要统一，如果不统一解构将失败。
数组解构：
第一种：let [a,b,c]=[1,2,3];
第二种：let [a,[b,c],d]=[1,[2,3],4];
第三种：let arr = ['jspang','小明','免费教程'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
对象的解构赋值：
let {foo,bar} = {foo:'JSPang',bar:'小明'};
字符串解构：
const [a,b,c,d,e,f]="JSPang";
对象的函数解构：
let json = {
a:'jspang',
b:'小明'
}
function fun({a,b='jspang'}){
console.log(a,b);
}
fun(json);
解构的默认值：
let [foo = true] =[];
圆括号的使用：
let foo;
({foo} ={foo:'JSPang'});

三、扩展运算符和rest运算符

①概述：对象扩展运算符和java中的可变参数类似
②示例1：
function jspang(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
 
}
jspang(1,2,3);
③扩展运算符的用处
let arr1=['www','xiaoming','com'];
let arr2=[...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);
④rest运算符
function jspang(first,...arg){
for(let val of arg){
console.log(val);
}
}
jspang(0,1,2,3,4,5,6,7);

四、字符串模版

①连接号
    let article = '文章'
    let xiaoluo='小落';
    let blog = `<b>非常高兴你能看到这篇${article}</b>，我是你的老朋友${xiaoluo}。<br/>这节课我们学习字符串模版。`;
②对运算的支持
let a=1;
let b=2;
let result=`${a+b}`;
③字符串查找
str.includes(str2)
str.startWidth(str2)
str.endWidth(str2)
④复制字符串
document.write('jspang|'.repeat(3));

五、ES6数字操作

①二进制和八进制
let binary = 0B010101;
console.log(binary);
let b=0o666;
console.log(b);
②数字判断和转换
Number.isFinite(11) 是否数字
Number.isNaN(NaN)
Number.isInteger(a)
Number.parseInt(a)
let max = Math.pow(2,53)-1
console.log(Number.MAX_SAFE_INTEGER); 最大安全整数
console.log(Number.MIN_SAFE_INTEGER); 最小安全整数
Number.isSafeInteger(a)

六、ES6中新增的数组知识

①JSON数组格式转换
let  json = {
'0': 'jspang',
'1': '小明',
'2': '小强',
length:3
}
let arr=Array.from(json);
②Array.of()方法
把一堆文本或者变量转换成数组
let arr =Array.of(3,4,5,6);
③find()实例方法
value：表示当前查找的值。
index：表示当前查找的数组索引。
arr：表示当前数组。
let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 5;
}))
④fill()实例方法
把数组进行填充
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
⑤数组的遍历
for (let item of arr)
for (let index of arr.keys())
for (let [index,val] of arr.entries())
arr.forEach((val,index)=>console.log(index,val));
数组的其他遍历方法
let arr=['jspang','小明','前端教程'];
arr.filter(x=>console.log(x));
arr.some(x=>console.log(x));
console.log(arr.map(x=>'web'));
⑦数组转换字符串
console.log(arr.join('|'));
console.log(arr.toString());
⑥entries()实例方法
let list=arr.entries();
console.log(list.next().value);

七、ES6中的箭头函数

ES6之前：
function add(a,b=1){
return a+b;
}
ES中：
var add =(a,b=1) => {
console.log('jspang')
return a+b;
};
console.log(add(1));

八、ES6中的对象

①直接赋值
let name="jspang";
let skill= 'web';
var obj= {name,skill};
②对象Key值构建
let key='skill';
var obj={
[key]:'web'
}
console.log(obj.skill);
③Object.is(  ) 对象比较
console.log(Object.is(obj1.name,obj2.name)); 
④Object.assign(  )合并对象
let d=Object.assign(a,b,c)

九、Set数据结构

Set的数据结构是以数组的形式构建的。Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个。虽然Set很像数组，但是他不是数组。
Set不允许内部有重复的值
let setArr = new Set(['jspang','小明','web','jspang']);
setArr.add('前端职场');
setArr.delete('前端职场');
setArr.has('jspang');
setArr.size;
setArr.clear();
setArr.forEach((value)=>console.log(value));

十、map数据结构

Map的灵活性要更好，是一种特殊的键值对，key可以设置成数组，值也可以设置成字符串，让它不规律对应起来。
let json = { name:'jspang',skill:'web'}
var map=new Map();
map.set(json,'iam');
map.get(json)
map.delete(json);
map.size;
map.has('jspang');
map.clear();

十一、用Proxy进行预处理

当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数，Proxy的存在就可以让我们给函数加上这样的钩子函数，也可以理解为在执行方法前预处理一些代码。可以简单的理解为他是函数或者对象的生命周期。
①声明Proxy
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am Jspang'
}, {
get:function(target,key){
console.log('come in Get');
return target[key];
},
set:function(target,key,value,receiver){
console.log(`    setting ${key} = ${value}`);
return target[key] = value;
}
 
});
 
console.log(pro.name);
pro.name='小明';
console.log(pro.name);
可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。
②get属性：get属性是在你得到某对象属性值时预处理的方法，他接受三个参数
target：得到的目标值
key：目标的key值，相当于对象的属性
property：这个不太常用，用法还在研究中，还请大神指教。
③set属性：set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。
target:目标值。
key：目标的Key值。
value：要改变的值。
receiver：改变前的原始值。
③apply的使用：apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。
let target = function () {
return 'I am JSPang';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());
let target = function () {
return 'I am JSPang';
};

十二、promise对象的使用

promise解决回调地狱的问题，执行多步操作非常好用。
例：1.洗菜做饭。2.坐下来吃饭。3.收拾桌子洗碗。这个过程是有一定的顺序的，你必须保证上一步完成，才能顺利进行下一步。
let state=1;
function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    if(state==1){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }
}
function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    if(state==1){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }
}
function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }
}
new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);
}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

十三、class类的使用(和java类似)

class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('jspang')+':'+'Skill:'+val);
}
 
constructor(a,b){
this.a=a;
this.b=b;
}
 
add(){
return this.a+this.b;
}
}
let jspang=new Coder(1,2);
console.log(jspang.add());

十四、模块化操作

export :负责进行模块化，也是模块的输出。
import : 负责把模块引，也是模块的引入操作。
①export的用法
export var a = 'jspang';
import {a} from './temp.js';
console.log(a);
②多变量的输出
var a ='jspang';
var b ='小明';
var c = 'web';
export {a,b,c}
③函数的模块化输出
export function add(a,b){
return a+b;
}
④as的用法
var a ='jspang';
var b ='小明';
var c = 'web';
export {
x as a,
y as b,
z as c
}
⑤export default的使用
加上default相当是一个默认的入口。在一个文件里export default只能有一个。导入不用相同名称
export default var a='jspang';
import str from './temp';

十五、Symbol在对象中的作用

它的意思是全局标记。我们先看看它的声明方式。
①声明Symbol
var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object; 
var f= Symbol();
console.log(typeof(d));
②Symbol的打印
var g = Symbol('jspang');
console.log(g);
console.log(g.toString());
③Symbol在对象中的应用
如何用Symbol构建对象的Key，并调用和赋值。
var jspang = Symbol();
var obj={
    [jspang]:'小明'
}
console.log(obj[jspang]);
obj[jspang]='web';
console.log(obj[jspang]);
④Symbol对象元素的保护作用
在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用Symbol进行保护。
let obj={name:'jspang',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
    console.log(obj[item]);
} 
console.log(obj);