一、搭建环境
**npm init -y
npm install -g babel-cli //全局安装Babel-cli
npm install --save-dev babel-preset-es2015 babel-cli //本地安装babel-preset-es2015 和 babel-cli**
**** 新建.babelrc ****
{
"presets":[
"es2015"
],
"plugins":[]
}
babel src/index.js -o dist/index.js //运行
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},// package.json文件 简化命令为npm run build
二、声明方式
var //声明全局变量
const // 声明常量
let //声明局部变量
三、**变量解构赋值**
按照位置的对象关系对变量赋值，如果等号两边形式不一样，很可能获得undefined或者直接报错。
let [a,[b,c],d]=[1,[2,3],4];
const [a,b,c,d,e,f]="JSPang";//字符串解构转换成类数组：
**解构的默认赋值**
允许使用默认值
let [a,b="好"]=['你']
console.log(a+b); //控制台显示“你好”
**undefined和null的区别：undefined相当于什么都没有，null是默认值。**
**对象也可解构赋值**
let {foo,bar} = {foo:'你',bar:'好'};
console.log(foo+bar); //控制台打印出了“你好”
**注意：对象的解构与数组有一个重要的不同。
数组的元素是按次序排列的，变量的取值由它的位置决定；
而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。**
如果在解构之前就定义了变量，这时候你再解构会出现问题，需要加上圆括号：
let foo;
({foo} ={foo:'hollow'});
console.log(foo); //控制台输出hollow
四、扩展运算符和rest运算符
对象扩展运算符做参数，参数不确定的情况下：
function message(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
message(1,2,3);//1,2,3，undefined
**扩展运算符是对是对内存堆栈的引用：**
let arr1=['www','csnd','com'];
let arr2=arr1;
console.log(arr2);//['www','csnd','com']
arr2.push('shengHongYu');
console.log(arr1);//['www','csnd','com']
处理
let arr1=['www','csnd','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);//['www','csnd','com']
**arr2.push**('hollow');
console.log(arr2);//['www','csnd','com','hollow']
console.log(arr1);//['www','csnd','com']
五、字符串模板
**${csdn}**
let a=1;
let b=2;
let result=`**${a+b}**`;//**支持运算符**
document.write(result);//3
字符串查找
blog.**includes**(csdn)//返回true或false
blog.**startsWith**(csdn);//判断开头是否存在
blog.**endsWith**(csdn);//判断结尾是否存在
document.write('csdn|'.repeat(3));//复制字符串
六、数字操作
**0B+二进制值**
let binary = 0B010101;
console.log(binary);
**0o+八进制值**
let b=0o666;
console.log(b);
**Number.isFinite( )**进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。
**Number.isNaN()**验证NaN是特殊的非数字，返回了true/false。
**Number.isInteger()**判断是否为整数。
**Number.parseInt(xxx)**整数转换。
**Number.parseFloat(xxx)**浮点型转换。
** 整数取值范围操作 **
let a = Math.pow(2,53)-1;
console.log(a); //9007199254740991
consolec .log(Number.**MAX_SAFE_INTEGER**)；//最大安全整数
console.log(Number.**MIN_SAFE_INTEGER**); //最小安全整数
**安全整数判断isSafeInteger( )；**
let a= Math.pow(2,53)-1;
console.log(Number.isSafeInteger(a));//false
七、新增数组
不含length的josn转数组
**Array.from(xxx)；**
例：
let json = {
'0': '天天',
'1': ‘写代码',
'2': '无bug',
length:3
}
let arr=Array.from(json);
console.log(arr)；
**类似数组的数字或字符串转换成数组：**
let arr =**Array.of**(3,4,5,6);
console.log(arr);
**find方法**是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：
value：表示当前查找的值。
index：表示当前查找的数组索引。
arr：表示当前数组。
在函数中如果找到符合条件的数组元素就进行return，并停止查找。你可以拷贝下边的代码进行测试，就会知道find作用。
Array.find(function(value,index,arr){
})
数组遍历
for...of...循环
例：let arr=['天天','写代码','无bug']；
for (let item of arr){
console.log(item);
}
// 获取索引
for (let index of arr.keys()){
console.log(index);
}
** arr.entries()同时输出数组的内容和索引**
for (let [index,val] of arr.entries()){
console.log(index+':'+val);
}
**entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。**
let arr=['天天','写代码','无bug'];
let list=arr.entries();
console.log(list.next().value);
八、箭头函数及扩展
1.函数增加了默认值的操作
function add(a,b=1){
return a+b;
}
console.log(add(1));//2
**主动抛出错误：throw new Error( xxxx )；**
function add(a,b=1){
if(a == 0){
throw new Error('This is error')
}
return a+b;
}
console.log(add(0));
对象的函数解构：
JSON格式数据当作参数，传递到函数内部进行处理，方法同“变量的解构赋值”；
数组的函数解构：
let arr = ['天天','写代码','无bug'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
**in的用法**：用来判断对象或者数组中是否存在某个值的，返回true/false；
let obj={
a:'天天',
b:'搬砖'
}
console.log('a' in obj); //true
**数组的遍历方法：**
forEach循环的特点是会自动省略为空的数组元素，相当于直接筛空了；
let arr=['es5','es6','前端'];
arr.forEach((val,index)=>console.log(index,val));
some()方法：用于检测数组中的元素是否满足指定条件（函数提供）。
会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测， some() 不会改变原始数组。
map()方法：
创建新数组，不改变原数组，return什么就输出什么新数组；有替换的功能；
参数：回调函数参数，item(数组元素)、index(序列)、arr(数组本身)；
使用return操作输出，会循环数组每一项，并在回调函数中操作。
join() 方法用于把数组中的所有元素放入一个字符串,可插入元素；
九、对象
对象赋值：ES6允许把声明的变量直接赋值给对象。
let name="es6";
let skill= 'web';
var obj= {name,skill};
console.log(obj); //Object {name: "es6", skill: "web"}；
对象key值构建
let key='skill';
var obj={
[key]:'web'
} console.log(obj.skill);//web
** Object.is( ) 对象比较**
var obj1 = {name:'web'};
var obj2 = {name:'web'};
console.log(Object.is(obj1.name,obj2.name)); //true
===为同值相等，is()为严格相等；
Object.assign( )合并对象；
var a={a:'天天'};
var b={b:'写代码'};
var c={c:'无bug'};
let d=Object.assign(a,b,c)
console.log(d);//{a:'天天',b:'写代码',c:'无bug'}
十、Symbol对象
声明Symbol：var f= Symbol();
Symbol()可以对对象属性进行保护
let obj={name:'web',skill:'web1'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
console.log(obj[item]);
}
console.log(obj);
十一、set
声明：
let setArr = new Set(['h5','天天','web','es6']);
console.log(setArr);//Set {‘h5','天天','web','es6‘}；
set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。虽然Set很像数组，但是他不是数组。
追加：setArr.add('前端职场');
删除：setArr.delete('前端职场');
查询：setArr.has('前端职场')，返回true/false；
set可使用 for…of…循环...
setArr.size //可以获得Set值的数量;
setArr.forEach((value)=>console.log(value));
WeakSet的声明
let weakObj=new WeakSet();//不能在new的时候放入值，否则报错。WeakSet里边的值也是不允许重复的，
map
** Json和map格式的对比 **
Map的灵活性要更好，可以把它看成一种特殊的键值对，但你的key可以设置成数组，值也可以设置成字符串，让它不规律对应起来。
也可key字符串，value是对象。；
** map的增删查**
map.set('web',json);
map.get(json)；
map.delete();//删除特定值
map.size;
map.has('web')//判断
map.clear();//清除所有
十二、用Proxy进行预处理（需单独概括）
声明Proxy：new Proxy（{},{}）;//第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域；
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am es6'
}, {
get:function(target,key,property){
console.log('come in Get');
return target[key];
}
});
console.log(pro.name);
get属性
get属性是在你得到某对象属性值时预处理的方法，他接受三个参数：
target：得到的目标值
key：目标的key值，相当于对象的属性
property：这个不太常用，用法还在研究中，还请大神指教。
set属性
set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。
target:目标值。
key：目标的Key值。
value：要改变的值。
receiver：改变前的原始值
实例：
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am proxy'
}, {
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='ES6';
console.log(pro.name);
十三、异步回调promiss（需单独概括）
十四、class类的使用
类的声明
class coder{
name(val){
console.log(val);
}
}
类的使用
class Coder{
name(val){
console.log(val);
}
}
let es6 = new Coder;
jspang.name('es6');
类可多方法声明；
注：两个方法中间不要写逗号，这里的this指类本身，注意return 的用法；
类的传参:
在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
class的继承:extends //和Java类似
class htmler extends Coder{
}
let pang=new htmler;
pang.name('es6');
十五、模块化操作
export :负责进行模块化，也是模块的输出。
import : 负责把模块引入，也是模块的引入操作。
