1.新的声明方式
字面理解ES6的三种声明方式：
-
var它是variable的简写，可以理解成变量的意思。 -
let它在英文中是“让”的意思，也可以理解为一种声明的意思。 -
const它在英文中也是常量的意思，在ES6也是用来声明常量的，常量你可以简单理解为不变的量。
2.变量的解构赋值
- 数组的解构赋值：
以前，为变量赋值，我们只能直接指定值。比如下面的代码：
let a=0;
let b=1;
let c=2;
而现在我们可以用数组解构的方式来进行赋值。
let [a,b,c]=[1,2,3];
上面的代码表示，可以从数组中提取值，按照位置的对象关系对变量赋值。
- 数组模式和赋值模式统一
可以简单的理解为等号左边和等号右边的形式要统一，如果不统一解构将失败。
let [a,[b,c],d]=[1,[2,3],4];
如果等号两边形式不一样，很可能获得undefined或者直接报错。
- 解构的默认值
解构赋值是允许你使用默认值的，先看一个最简单的默认是的例子。
let [foo = true] =[];
console.log(foo); //控制台打印出true
上边的例子数组中只有一个值，可能你会多少有些疑惑，我们就来个多个值的数组，并给他一些默认值。
let [a,b="天天向上"]=['好好学习']
console.log(a+b); //控制台显示“好好学习天天向上”
现在我们对默认值有所了解，需要注意的是undefined和null的区别。
let [a,b="天天向上"]=['好好学习',undefined];
console.log(a+b); //控制台显示“好好学习天天向上”
undefined相当于什么都没有，b是默认值。
let [a,b="天天向上"]=['好好学习',null];
console.log(a+b); //控制台显示“好好学习null”
null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。
- 对象的解构赋值
解构不仅可以用于数组，还可以用于对象。
let {foo,bar} = {foo:'好好学习',bar:'天天向上'};
console.log(foo+bar); //控制台打印出了“好好学习天天向上”
注意：对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
- 圆括号的使用
如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错。
let foo;
{foo} = {foo:'好好学习'};
console.log(foo);
要解决报错，使程序正常，我们这时候只要在解构的语句外边加一个圆括号就可以了。
let foo;
({foo} ={foo:'好好学习'});
console.log(foo); // 好好学习
- 字符串解构
字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e,f]="好好学习";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
3.扩展运算符和rest运算符
- 对象扩展运算符（…）
当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：
function fun(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
fun(1,2,3);
这时我们看到控制台输出了 1,2,3，undefined，这说明是可以传入多个值，并且就算方法中引用多了也不会报错。
- 扩展运算符的用处
我们先用一个例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。
let arr1=['www','baidu','com'];
let arr2=arr1;
console.log(arr2);
arr2.push('Google');
console.log(arr1);
控制台输出：
["www", "baidu", "com"]
["www", "baidu", "com", "Google"]
这是我们不想看到的，可以利用对象扩展运算符简单的解决这个问题，现在我们对代码进行改造。
let arr1=['www','baidu','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('Google');
console.log(arr2);
console.log(arr1);
现在控制台预览时，你可以看到我们的arr1并没有改变，简单的扩展运算符就解决了这个问题。
- rest运算符
如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用…（三个点）来表示，我们先来看一个例子。
function fun(first,...arg){
console.log(arg.length);
}
fun(0,1,2,3,4,5,6,7);
这时候控制台打印出了7，说明我们arg里有7个数组元素，这就是rest运算符的最简单用法。
- 如何循环输出rest运算符
这里我们用for…of循环来进行打印出arg的值。
function fun(first,...arg){
for(let val of arg){
console.log(val);
}
}
fun(0,1,2,3,4,5,6,7);
4.字符串模版
- 字符串模版
先来看一个在ES5下我们的字符串拼接案例:
let skill='js';
let blog = '我是一名前端工程师，我会 '+skill;
document.write(blog);
ES5下必须用+skill这样的形式进行拼接，这样很麻烦而且很容易出错。ES6新增了字符串模版，可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号，而是换成了xxx这种形式，也叫连接号。这时我们再引用skill变量就需要用${skill}这种形式了，我们对上边的代码进行改造。
let skill='js';
let blog = `我是一名前端工程师，我会${skill}`;
document.write(blog);
可以看到浏览器出现了和上边代码一样的结果。而且这里边支持html标签，可以试着输入一些。
- 对运算的支持
let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);
字符串查找
- 查找是否存在
//es5 中
let skill='js';
let blog = `我是一名前端工程师，我会${skill}`;
document.write(blog.indexOf(skill));
这是网页中输出了12，我们还要自己判断。
ES6直接用includes就可以判断，不再返回索引值，这样的结果我们更喜欢，更直接。
let skill='js';
let blog = `我是一名前端工程师，我会${skill}`;
document.write(blog.includes(skill));
- 判断开头是否存在
blog.startsWith(skill);
- 判断结尾是否存在
blog.endsWith(skill)
需要注意的是：starts和ends 后边都要加s。
- 复制字符串
我们有时候是需要字符串重复的，比如分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单。
document.write('skill|'.repeat(3));
5.ES6的数组
- JSON数组格式转换
let json = {
'0': '好好学习',
'1': '天天向上',
'2': '努力工作',
length:3
}
这就是一个标准的JSON数组格式，跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组，并打印在控制台。
let json = {
'0': '好好学习',
'1': '天天向上',
'2': '努力工作',
length:3
}
let arr=Array.from(json);
console.log(arr)
实际开发中这种方法还是比较常用的，毕竟节省了我们代码行数，也让我们的程序更清晰。
- Array.of()
它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，如果你一个老手程序员都知道eval的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上：
let arr =Array.of(3,4,5,6);
console.log(arr);
当然它不仅可以转换数字，字符串也是可以转换的，看下边的代码：
let arr =Array.of('好好学习','天天向上','努力工作');
console.log(arr);
- find()
所谓的实例方法就是并不是以Array对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法（不理解请看下边的代码，再和上边的代码进行比对，你会有所顿悟）。这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：
- value：表示当前查找的值。
- index：表示当前查找的数组索引。
- arr：表示当前数组。
在函数中如果找到符合条件的数组元素就进行return，并停止查找。你可以拷贝下边的代码进行测试，就会知道find作用。
let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
return value > 5;
}))
- fill( )
fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('好好学习',2,5);//把数组从第二位到第五位用“好好学习”进行填充
console.log(arr);//[0, 1, "好好学习", "好好学习", "好好学习", 5, 6, 7, 8, 9]
上边的代码是把数组从第二位到第五位用“好好学习”进行填充。
- for…of循环
这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环
let arr=['好好学习','天天向上','努力工作']
for (let item of arr){
console.log(item);
}
//好好学习
//天天向上
//努力工作
for…of数组索引:有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引。
let arr=['好好学习','天天向上','努力工作']
for (let index of arr.keys()){
console.log(index);
}
可以看到这时的控制台就输出了0,1,2，也就是数组的索引。
同时输出数组的内容和索引：我们用entries()这个实例方法，配合我们的for…of循环就可以同时输出内容和索引了。
let arr=['好好学习','天天向上','努力工作']
for (let [index,val] of arr.entries()){
console.log(index+':'+val);
}
- entries( )
entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码：
let arr=['好好学习','天天向上','努力工作']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
6. ES6中的箭头函数和扩展
之前我们写函数：
function add(a,b){
return a+b;
}
console.log(add(1,2));
我们声明了一个add函数，然后传入a和b两个值，返回a+b的值。 然后我们在控制台打印了这个函数的返回结果，这里是3.
- 默认值
在ES6中给我们增加了默认值的操作，我们修改上边的代码，可以看到现在只需要传递一个参数也是可以正常运行的。
function add(a,b=2){
return a+b;
}
console.log(add(1));//3
- 主动抛出错误
在使用Vue的框架中，可以经常看到框架主动抛出一些错误，比如v-for必须有:key值。那尤大神是如何做到的那？其实很简单，ES6中我们直接用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));
- 函数中的严谨模式
我们在ES中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在ES6中我们可以写在函数体中，相当于针对函数来使用。
function add(a,b=1){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add(1));
上边的代码如果运行的话，你会发现浏览器控制台报错，这是ES6中的一个坑,这个错误的原因就是如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。
- 获得需要传递的参数个数
如果你在使用别人的框架时，不知道别人的函数需要传递几个参数怎么办？ES6为我们提供了得到参数的方法(xxx.length).我们用上边的代码看一下需要传递的参数个数。
function add(a,b){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add.length);
这时控制台打印出了2，但是如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1， 也就是说它得到的是必须传入的参数。
箭头函数
改造一下之前学的add函数，写成箭头函数
var add =(a,b=1) => a+b;
console.log(add(1));
- {}的使用
在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上{}括号。例如下边的代码就必须使用{}.
var add =(a,b=1) => {
console.log('111111')
return a+b;
};
console.log(add(1));
箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。
7. ES6中的函数和数组补漏
- 对象的函数解构
我们在前后端分离时，后端经常返回来JSON格式的数据，前端的美好愿望是直接把这个JSON格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。
let json = {
a:'好好学习',
b:'天天向上'
}
function fun({a,b='努力工作'}){
console.log(a,b);
}
fun(json);//好好学习 天天向上
- 数组的函数解构
函数能解构JSON，那解构我们的数组就更不在话下了，我们看下边的代码。我们声明一个数组，然后写一个方法，最后用…进行解构赋值。
let arr = ['好好学习','天天向上','努力工作'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
- in
in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。
对象判断
let obj={
a:'好好学习',
b:'天天向上'
}
console.log('a' in obj); //true
- 数组判断
先来看一下ES5判断的弊端，以前会使用length属性进行判断，为0表示没有数组元素。但是这并不准确，或者说真实开发中有弊端。
let arr=[,,,,,];
console.log(arr.length); //5
上边的代码输出了5，但是数组中其实全是空值，这就是一个坑啊。那用ES6的in就可以解决这个问题。
let arr=[,,,,,];
console.log(0 in arr); //false
let arr1=['好好学习','天天向上'];
console.log(0 in arr1); // true
注意：这里的0指的是数组下标位置是否为空。
- 数组的遍历方法
1.forEach
let arr=['好好学习','天天向上','努力工作'];
arr.forEach((val,index)=>console.log(index,val));
2.filter
let arr=['好好学习','天天向上','努力工作'];
arr.filter(x=>console.log(x));
3.some
let arr=['好好学习','天天向上','努力工作'];
arr.some(x=>console.log(x));
4.map
let arr=['好好学习','天天向上','努力工作'];
console.log(arr.map(x=>'web'));
map在这里起到一个替换的作用，这个我们后续课程会详细讲解。
5.join()
let arr=['好好学习','天天向上','努力工作'];
console.log(arr.join('|'));
6.toString()
let arr=['好好学习','天天向上','努力工作'];
console.log(arr.toString());
8.ES6中对象
- 对象赋值
ES6允许把声明的变量直接赋值给对象，我们看下面的例子。
let name="xiaoxianxian";
let skill= 'web';
var obj= {name,skill};
console.log(obj); //Object {name: "xiaoxianxian", skill: "web"}
- 对象Key值构建
有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们如何构建我们的key值那。比如我们在后台取了一个key值，然后可以用[ ] 的形式，进行对象的构建。
let key='skill';
var obj={
[key]:'web'
}
console.log(obj.skill);
自定义对象方法
var obj={
add:function(a,b){
return a+b;
}
}
console.log(obj.add(1,2)); //3
- Object.is( ) 对象比较
对象的比较方法,以前进行对象值的比较，经常使用===来判断，比如下面的代码：
var obj1 = {name:'xiaoxianxian'};
var obj2 = {name:'xiaoxianxian'};
console.log(obj1.name === obj2.name);//true
那ES6为我们提供了is方法进行对比。
var obj1 = {name:'xiaoxianxian'};
var obj2 = {name:'xiaoxianxian'};
console.log(obj1.name === obj2.name);//true
console.log(Object.is(obj1.name,obj2.name)); //true
区分=== 和 is方法的区别是什么，看下面的代码输出结果。
console.log(+0 === -0); //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true
"===为同值相等，is()为严格相等。"
- Object.assign( )合并对象
操作数组时我们经常使用数组合并，那对象也有合并方法，那就是assgin( )。看一下啊具体的用法。
var a={a:'好好学习'};
var b={b:'天天向上'};
var c={c:'努力工作'};
let d=Object.assign(a,b,c)
console.log(d);
9.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的打印
我们先声明一个Symbol，然后我们在控制台输出一下。
var g = Symbol('web');
console.log(g);
console.log(g.toString());
这时候我们仔细看控制台是有区别的，没有toString的是红字，toString的是黑字。
- Symbol在对象中的应用
var xx = Symbol();
var obj={
[xx]:'前端开发'
}
console.log(obj[xx]);
obj[xx]='web';
console.log(obj[xx]);
- Symbol对象元素的保护作用
在对象中有很多值，但是循环输出时，并不希望全部输出，那我们就可以使用Symbol进行保护
没有进行保护的写法：
var obj={name:'xiaoxianxian',skill:'web',age:18};
for (let item in obj){
console.log(obj[item]);
}
现在我不想别人知道我的年龄，这时候我就可以使用Symbol来进行循环保护。
let obj={name:'xiaoxianxian',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
console.log(obj[item]);
}
console.log(obj);
9.Set和WeakSet数据结构
- set的声明
let setArr = new Set(['好好学习','天天向上']);
console.log(setArr);//Set {'好好学习','天天向上'}
Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。虽然Set很像数组，但是他不是数组。
- Set值的增删查
追加add
在使用Array的时候，可以用push进行追加值，那Set稍有不同，它用更语义化的add进行追加。
let setArr = new Set(['好好学习','天天向上']);
console.log(setArr);//Set {'好好学习','天天向上'}
setArr.add('前端职场');
console.log(setArr);
删除delete
let setArr = new Set(['好好学习','天天向上']);
console.log(setArr);//Set {'好好学习','天天向上'}
setArr.add('前端职场');
console.log(setArr); //Set {'好好学习','天天向上', "前端职场"}
setArr.delete('前端职场');
console.log(setArr); //Set {'好好学习','天天向上'}
查找has
用has进行值的查找，返回的是true或者false。
let setArr = new Set(['好好学习','天天向上']);
console.log(setArr);//Set {'好好学习','天天向上'}
console.log(setArr.has('好好学习'));//true
删除clear
let setArr = new Set(['好好学习','天天向上']);
console.log(setArr);//Set {'好好学习','天天向上'}
setArr.clear();
console.log(setArray);//true
set的循环 for…of…循环
let setArr = new Set(['好好学习','天天向上']);
for (let item of setArr){
console.log(item);
}
size属性 size属性可以获得Set值的数量。
let setArr = new Set(['好好学习','天天向上']);
for (let item of setArr){
console.log(item);
}
console.log(setArr.size);
forEach循环
let setArr = new Set(['好好学习','天天向上']);
setArr.forEach((value)=>console.log(value));
- WeakSet的声明
let weakObj=new WeakSet();
let obj={a:'好好学习',b:'天天向上'}
weakObj.add(obj);
console.log(weakObj);
这里需要注意的是，如果你直接在new 的时候就放入值，将报错。
WeakSet里边的值也是不允许重复的，我们来测试一下。
let weakObj=new WeakSet();
let obj={a:'好好学习',b:'天天向上'}
let obj1=obj;
weakObj.add(obj);
weakObj.add(obj1);
console.log(weakObj);
10.map数据结构
- Json和map格式的对比
let json = {
name:'xiaoxianxian',
skill:'web'
}
console.log(json.name);
但是这种反应的速度要低于数组和map结构。而且Map的灵活性要更好，你可以把它看成一种特殊的键值对，但你的key可以设置成数组，值也可以设置成字符串，让它不规律对应起来。
let json = {
name:'xiaoxianxian',
skill:'web'
}
console.log(json.name);
var map=new Map();
map.set(json,'iam');
console.log(map);
当然也可key字符串，value是对象。我们调换一下位置，依然是符合map的数据结构规范的。
map.set('xiaoxianxian',json);
console.log(map);
- 取值get
现在取json对应的值。
console.log(map.get(json));
- 删除delete
删除delete的特定值：
map.delete(json);
console.log(map)
- size属性
console.log(map.size);
- 查找是否存在has
consolec .log(map.has('xiaoxianxian'))
- 清楚所有元素clear
map.clear()
11.用Proxy进行预处理
先了解一个概念“钩子函数”：当我们在操作一个对象或者方法时会有几种动作，比如：在运行函数前初始化一些数据，在改变对象值后做一些善后处理。这些都算钩子函数。
Proxy的存在就可以让我们给函数加上这样的钩子函数，你也可以理解为在执行方法前预处理一些代码。你可以简单的理解为他是函数或者对象的生命周期。
在学习新知识之前，先来回顾一下定义对象的方法。
var obj={
add:function(val){
return val+10;
},
name:'I am xiaoxianxian'
};
console.log(obj.add(100));
console.log(obj.name);
- 声明Proxy
我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。new Proxy（{},{}）;
需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。
现在把上边的obj对象改成我们的Proxy形式。
var pro = new Proxy({
add: function (val) {
return val + 10;
},
name: 'I am xiaoxianxian'
},
{
get:function(target,key,property){
console.log('come in Get');
return target[key];
}
});
console.log(pro.name);
可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。
- 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 xiaoxianxian'
},
{
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='xiaoxianxian';
console.log(pro.name);
- apply的使用
apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。
get = function () {
return 'I am xiaoxianxian';
};
var handler = {
apply(target, ctx, args) {
console.log('do apply');
return Reflect.apply(...arguments);
}
}
var pro = new Proxy(target, handler);
console.log(pro());
proxy的知识是非常多的，这里我建议看阮一峰大神的《ES6》
12.promise对象的使用
- promise的基本用法
promise执行多步操作非常好用，那我们就来模仿一个多步操作的过程，那就以吃饭为例吧。要想在家吃顿饭，是要经过三个步骤的。
1.洗菜做饭。
2.坐下来吃饭。
3.收拾桌子洗碗。
这个过程是有一定的顺序的，你必须保证上一步完成，才能顺利进行下一步。我们可以在脑海里先想想这样一个简单的过程在ES5写起来就要有多层的嵌套。那我们现在用promise来实现。
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;
});
13.class类的使用
先声明一个最简单的coder类，类里只有一个name方法，方法中打印出传递的参数。
class coder{
name(val){
console.log(val);
}
}
- 类的声明
我们已经声明了一个类，并在类里声明了name方法，现在要实例化类，并使用类中的方法。
class Coder{
name(val){
console.log(val);
}
}
let xiaoxianxian= new Coder;
xiaoxianxian.name('xiaoxianxian');
- 类的多方法声明
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('xiaoxianxian')+':'+'Skill:'+val);
}
}
let xiaoxianxian= new Coder;
xiaoxianxian.name('xiaoxianxian');
xiaoxianxian.skill('web');
这里需要注意的是两个方法中间不要写逗号了，还有这里的this指类本身，还有要注意return 的用法。
- 类的传参
在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。
class Coder{
name(val){
console.log(val);
return val;
}
skill(val){
console.log(this.name('xiaoxianxian')+':'+'Skill:'+val);
}
constructor(a,b){
this.a=a;
this.b=b;
}
add(){
return this.a+this.b;
}
}
let xiaoxianxian=new Coder(1,2);
console.log(xiaoxianxian.add());
我们用constructor来约定了传递参数，然后用作了一个add方法，把参数相加。这和以前我们的传递方法有些不一样，所以需要注意下。
- class的继承
class htmler extends Coder{
}
let pang=new htmler;
pang.name('xiaoxianxian');
声明一个htmler的新类并继承Coder类，htmler新类里边为空，这时候我们实例化新类，并调用里边的name方法。结果也是可以调用到的。
14.模块化操作
在ES5中我们要进行模块华操作需要引入第三方类库，随着前后端分离，前端的业务日渐复杂，ES6为我们增加了模块话操作。模块化操作主要包括两个方面。
export :负责进行模块化，也是模块的输出。
import : 负责把模块引，也是模块的引入操作。
export
export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。先来看个最简单的例子，把一个变量模块化。我们新建一个temp.js文件，然后在文件中输出一个模块变量。
export var a = 'xiaoxianxian';
然后可以在index.js中以import的形式引入。
import {a} from './temp.js';
console.log(a);
这就是一个最简单的模块的输出和引入。
- 多变量的输出
这里声明了3个变量，需要把这3个变量都进行模块化输出，这时候我们给他们包装成对象就可以了。
var a ='xiaoxianxian';
var b ='xiaoxianxian2';
var c = 'web';
export {a,b,c}
函数的模块化输出
export function add(a,b){
return a+b;
}
as的用法 有些时候我们并不想暴露模块里边的变量名称，而给模块起一个更语义话的名称，这时候我们就可以使用as来操作。
var a ='好好学习';
var b ='天天向上';
var c = 'web';
export {
x as a,
y as b,
z as c
}
export default的使用 加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export default的区别
- export
export var a ='xiaoxianxian';
export function add(a,b){
return a+b;
}
对应的导入方式
import {a,add} form './temp';//也可以分开写
- export defalut
export default var a='xiaoxianxian';
对应的引入方式
import str from './temp';
ES6的模块化不能直接在浏览器中预览，必须要使用Babel进行编译之后正常看到结果。
