1、新的声明方式
以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式了。
字面理解ES6的三种声明方式:
var:它是variable的简写,可以理解成变量的意思。
let:它在英文中是“让”的意思,也可以理解为一种声明的意思。
const:它在英文中也是常量的意思,在ES6也是用来声明常量的,常量你可以简单理解为不变的量。
var是全局声明
var a=2;
{ var a=3;}
console.log(a);
这时打印出来的值是多少那?对,应该是3,因为var是全局声明的。
let局部声明
var a=2;
{ let a=3;}
console.log(a);
这时候控制台打印出来的值就是2了。如果我们只在区块里声明,不再外部声明,我们打印a时就会报错,显示找不到变量。
const声明常量
在程序开发中,有些变量是希望声明后在业务层就不再发生变化了,简单来说就是从声明开始,这个变量始终不变,就需要用const进行声明。
我们来一段用const声明错误的代码,在错误中学习const的特性也是非常好的。
const a="JSPang";
var a='技术胖';
console.log(a);
编译这段代码的过程中,你就会发现已经报错,无法编译了,原因就是我们const声明的变量是不可以改变的。const是很好理解的,我就不作过多的解释说明了。
这节课我们学了ES6的3种声明方式,var、let、const,这三种方式各有所长,既然已经学习了新技术,我们就要拥抱它,试着在你的项目中根据情况用let和const进行声明吧,不要再只使用var了。
2、变量的解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。也许你还是不太明白,那先来一个最简单的数组解构赋值来进行赋值。
数组的解构赋值:
简单的数组解构:
以前,为变量赋值,我们只能直接指定值。比如下面的代码:
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="JSPang"]=['技术胖']
console.log(a+b); //控制台显示“技术胖JSPang”
现在我们对默认值有所了解,需要注意的是undefined和null的区别。
let [a,b="JSPang"]=['技术胖',undefined];
console.log(a+b); //控制台显示“技术胖JSPang”
undefined相当于什么都没有,b是默认值。
let [a,b="JSPang"]=['技术胖',null];
console.log(a+b); //控制台显示“技术胖null”
null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。
对象的解构赋值
解构不仅可以用于数组,还可以用于对象。
let {foo,bar} = {foo:'JSPang',bar:'技术胖'};
console.log(foo+bar); //控制台打印出了“JSPang技术胖”
注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。
圆括号的使用
如果在解构之前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。
let foo;
{foo} ={foo:'JSPang'};
console.log(foo);
要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。
let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制台输出jspang
字符串解构
字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。
const [a,b,c,d,e,f]="JSPang";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
3、扩展运算符和rest运算符
对象扩展运算符(…):
当编写一个方法时,我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数,看一个简单的列子:
function jspang(...arg){
console.log(arg[0]);
console.log(arg[1]);
console.log(arg[2]);
console.log(arg[3]);
}
jspang(1,2,3);
这时我们看到控制台输出了 1,2,3,undefined,这说明是可以传入多个值,并且就算方法中引用多了也不会报错。
扩展运算符的用处:
我们先用一个例子说明,我们声明两个数组arr1和arr2,然后我们把arr1赋值给arr2,然后我们改变arr2的值,你会发现arr1的值也改变了,因为我们这是对内存堆栈的引用,而不是真正的赋值。
let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr1);
控制台输出:
["www", "jspang", "com"]
["www", "jspang", "com", "shengHongYu"]
这是我们不想看到的,可以利用对象扩展运算符简单的解决这个问题,现在我们对代码进行改造。
let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];
console.log(arr2);
arr2.push('shengHongYu');
console.log(arr2);
console.log(arr1);
现在控制台预览时,你可以看到我们的arr1并没有改变,简单的扩展运算符就解决了这个问题。
rest运算符
如果你已经很好的掌握了对象扩展运算符,那么理解rest运算符并不困难,它们有很多相似之处,甚至很多时候你不用特意去区分。它也用…(三个点)来表示,我们先来看一个例子。
function jspang(first,...arg){
console.log(arg.length);
}
jspang(0,1,2,3,4,5,6,7);
这时候控制台打印出了7,说明我们arg里有7个数组元素,这就是rest运算符的最简单用法。
如何循环输出rest运算符
这里我们用for…of循环来进行打印出arg的值,我们这里只是简单使用一下,以后我们会专门讲解for…of循环。
function jspang(first,...arg){
for(let val of arg){
console.log(val);
}
}
jspang(0,1,2,3,4,5,6,7);
for…of的循环可以避免我们开拓内存空间,增加代码运行效率,所以建议大家在以后的工作中使用for…of循环。有的小伙伴会说了,反正最后要转换成ES5,没有什么差别,但是至少从代码量上我们少打了一些单词,这就是开发效率的提高。
总结:我们这节课学习了对象扩展运算符和reet运算符,它们两个还是非常类似的,但是你要自己区分,这样才能在工作中运用自如。在以后的课程中还会有很多关于扩展运算符和rset运算符的妙用,让我们一起期待吧。
4、字符串模版
这节我们主要学习ES6对字符串新增的操作,最重要的就是字符串模版,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作。
字符串模版
先来看一个在ES5下我们的字符串拼接案例:
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章,我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
document.write(blog);
ES5下必须用+jspang+这样的形式进行拼接,这样很麻烦而且很容易出错。
ES6新增了字符串模版,可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号,而是换成了xxx这种形式,也叫连接号。这时我们再引用jspang变量就需要用${jspang}这种形式了,我们对上边的代码进行改造。
let jspang='技术胖';
let blog = `非常高兴你能看到这篇文章,我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
document.write(blog);
可以看到浏览器出现了和上边代码一样的结果。而且这里边支持html标签,可以试着输入一些。
let jspang='技术胖';
let blog = `非常高兴你能看到这篇文章,我是你的老朋友${jspang}。
这节课我们学习字符串模版。`;document.write(blog);
对运算的支持
let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);
强大的字符串模版,在实际开发中,我们可以让后台写一个活动页面,然后轻松的输出给用户。
字符串查找
ES6还增加了字符串的查找功能,而且支持中文哦,小伙伴是不是很兴奋。还是拿上边的文字作例子,进行操作。
查找是否存在:
先来看一下ES5的写法,其实这种方法并不实用,给我们的索引位置,我们自己还要确定位置。
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章,我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.indexOf(jspang));
这是网页中输出了20,我们还要自己判断。
ES6直接用includes就可以判断,不再返回索引值,这样的结果我们更喜欢,更直接。
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章,我是你的老朋友技术胖。这节课我们学习字符串模版。';
document.write(blog.includes(jspang));
判断开头是否存在:
blog.startsWith(jspang);
判断结尾是否存在:
blog.endsWith(jspang);
需要注意的是:starts和ends 后边都要加s,我开始时经常写错,希望小伙伴们不要采坑。
复制字符串
我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。
document.write('jspang|'.repeat(3));
当然ES6对字符串还有一些其它操作,因为实际工作中不太使用,这里就不作太多的介绍了。希望你能动手练习一下,并把这些新特性应用到工作中,否则可能很快就忘记了。
5、ES6中新增的数组知识(1)
JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,我们先来看一下JSON的数组格式怎么写。
let json = {
'0': 'jspang',
'1': '技术胖',
'2': '大胖逼逼叨',
length:3
}
这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的Array操作都存在于Array对象里。我们就用Array.from(xxx)来进行转换。我们把上边的JSON代码转换成数组,并打印在控制台。
let json = {
'0': 'jspang',
'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('技术胖','jspang','大胖逼逼叨');
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;
}))
控制台输出了6,说明找到了符合条件的值,并进行返回了,如果找不到会显示undefined。
6、ES6中新增的数组知识(2)
fill( )实例方法:
fill()也是一个实例方法,它的作用是把数组进行填充,它接收三个参数,第一个参数是填充的变量,第二个是开始填充的位置,第三个是填充到的位置。
let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr);
上边的代码是把数组从第二位到第五位用jspang进行填充。
数组的遍历
for…of循环:
这种形式比ES5的for循环要简单而且高效。先来看一个最简单的for…of循环。
let arr=['jspang','技术胖','大胖逼逼叨']
for (let item of arr){
console.log(item);
}
for…of数组索引:有时候开发中是需要数组的索引的,那我们可以使用下面的代码输出数组索引。
let arr=['jspang','技术胖','大胖逼逼叨']
for (let index of arr.keys()){
console.log(index);
}
可以看到这时的控制台就输出了0,1,2,也就是数组的索引。
同时输出数组的内容和索引:我们用entries()这个实例方法,配合我们的for…of循环就可以同时输出内容和索引了。
let arr=['jspang','技术胖','大胖逼逼叨']
for (let [index,val] of arr.entries()){
console.log(index+':'+val);
}
entries( )实例方法:
entries()实例方式生成的是Iterator形式的数组,那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码:
let arr=['jspang','技术胖','大胖逼逼叨']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);
console.log(list.next().value);
总结:我们通过两节课讲了ES6对数组的扩展,数组在我们的实际开发中是特别重要的,几乎我每天都要编写数组的操作代码,所以这节课一定要在听完之后自己敲一遍代码。
7、ES6中的箭头函数和扩展
这节课开始,先不着急看ES6中的函数,而是回顾一下ES5中的函数写法。写一个函数,进行一个加法计算。
function add(a,b){
return a+b;
}
console.log(add(1,2));
我们声明了一个add函数,然后传入a和b两个值,返回a+b的值。 然后我们在控制台打印了这个函数的返回结果,这里是3.
默认值
在ES6中给我们增加了默认值的操作,我们修改上边的代码,可以看到现在只需要传递一个参数也是可以正常运行的。
function add(a,b=1){
return a+b;
}
console.log(add(1));
主动抛出错误
在使用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中的一个坑,如果没人指导的话,可能你会陷进去一会。这个错误的原因就是如果你使用了默认值,再使用严谨模式的话,就会有冲突,所以我们要取消默认值的操作,这时候你在运行就正常了。
function add(a,b){
'use strict'
if(a == 0){
throw new Error('This is error');
}
return a+b;
}
console.log(add(1,2));
获得需要传递的参数个数
如果你在使用别人的框架时,不知道别人的函数需要传递几个参数怎么办?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, 也就是说它得到的是必须传入的参数。
箭头函数
在学习Vue的时候,我已经大量的使用了箭头函数,因为箭头函数真的很好用,我们来看一个最简单的箭头函数。也就是上边我们写的add函数,进行一个改变,写成箭头函数。
var add =(a,b=1) => a+b;
console.log(add(1));
{}的使用
在箭头函数中,方法体内如果是两句话,那就需要在方法体外边加上{}括号。例如下边的代码就必须使用{}.
var add =(a,b=1) => {
console.log('jspang')
return a+b;
};
console.log(add(1));
箭头函数中不可加new,也就是说箭头函数不能当构造函数进行使用。
对象的函数解构
我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。
let json = {
a:'jspang',
b:'技术胖'
}
function fun({a,b='jspang'}){
console.log(a,b);
}
fun(json);
是不是感觉方便了很多,我们再也不用一个个传递参数了。
数组的函数解构
函数能解构JSON,那解构我们的数组就更不在话下了,我们看下边的代码。我们声明一个数组,然后写一个方法,最后用…进行解构赋值。
let arr = ['jspang','技术胖','免费教程'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
这种方法其实在前面的课程中已经学过了,这里我们就当复习了
in的用法
in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。
对象判断
let obj={
a:'jspang',
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=['jspang','技术胖'];
console.log(0 in arr1); // true
注意:这里的0指的是数组下标位置是否为空。
数组的遍历方法
http://www.runoob.com/jsref/jsref-obj-array.html
1.forEach
let arr=['jspang','技术胖','前端教程'];
arr.forEach((val,index)=>console.log(index,val));
arr.forEach(item =>{ console.log(item) })
forEach循环的特点是会自动省略为空的数组元素,相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。
2.filter
let arr=['jspang','技术胖','前端教程'];
arr.filter(x=>console.log(x));
filter方法,移除被删除数据
ouid:被删除的数据的字段id
arr = arr.filter(item => {
return ouid.indexOf(item.ouid) === -1
})
3.some
对数组中每个元素执行一次ck函数,知道某个元素返回true,则直接返回true。如果都返回false,则返回false检查整个数组中是否有满足ck函数的元素。
var result = [1,5,3,6].some( (v,i) => (v>10) ) //所有元素都不满足,返回result = false
var result = [10,5,30,60].some( (v,i) => (v<10) ) //有一个(多个)满足,返回result = true
4.map
每个数组元素都执行一次ck函数,最后返回每次元素执行ck函数后返回值的集合(数组)
var newArray = [50,30,40].map( (v,i) => v/10 ) //每个元素除以10,最后返回一个新数组 newArray = [5,3,4]
5.every
每个数组元素都执行一次ck函数,直到某个元素执行函数ck返回false,则直接返回false,如果全部返回true,则返回true
var result = [5,50,35,12,85].every( (v,i) => v<51 ) //返回有一个(多个)大于等于51,则返回 result = false
var result = [5,50,35,12,85].every( (v,i) => v<100 ) //全部大于51,则返回 result = true
6.reduce
计算数组元素相加后的总和
var result = [0,1,2,3]
restult.reduce((a,b)=> a+b,0) // 返回 6
7.includes
includes遍历交集
arr = arr1.filter(v => arr2.includes(v))
[1, 2, 3].includes(2); // true
8、ES6中对象
对象赋值
ES6允许把声明的变量直接赋值给对象,我们看下面的例子。
let name="jspang";
let skill= 'web';
var obj= {name,skill};
console.log(obj); //Object {name: "jspang", 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:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true
那ES6为我们提供了is方法进行对比。
var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
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:'jspang'};
var b={b:'技术胖'};
var c={c:'web'};
let d=Object.assign(a,b,c)
console.log(d);
9、promise对象的使用
ES6中的promise的出现给我们很好的解决了回调地狱的问题,在使用ES5的时候,在多层嵌套回调时,写完的代码层次过多,很难进行维护和二次开发,ES6认识到了这点问题,现在promise的使用,完美解决了这个问题。那我们如何理解promise这个单词在ES5中的作用那,你可以想象他是一种承诺,当它成功时执行一些代码,当它失败时执行一些代码。它更符合人类的行为思考习惯,而不在是晦涩难懂的冰冷语言。
promise的基本用法
promise执行多步操作非常好用,那我们就来模仿一个多步操作的过程,那就以吃饭为例吧。要想在家吃顿饭,是要经过三个步骤的。
洗菜做饭。
坐下来吃饭。
收拾桌子洗碗。
这个过程是有一定的顺序的,你必须保证上一步完成,才能顺利进行下一步。我们可以在脑海里先想想这样一个简单的过程在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;
});
Promis在现在的开发中使用率算是最高的,而且你面试前端都会考这个对象,大家一定要掌握好。
10、模块化操作
在ES5中我们要进行模块华操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块话操作。模块化操作主要包括两个方面。
export :负责进行模块化,也是模块的输出。
import : 负责把模块引,也是模块的引入操作。
export的用法:
export可以让我们把变量,函数,对象进行模块话,提供外部调用接口,让外部进行引用。先来看个最简单的例子,把一个变量模块化。我们新建一个temp.js文件,然后在文件中输出一个模块变量。
export var a = 'jspang';
然后可以在index.js中以import的形式引入。
import {a} from './temp.js';
console.log(a);
这就是一个最简单的模块的输出和引入。
多变量的输出
这里声明了3个变量,需要把这3个变量都进行模块化输出,这时候我们给他们包装成对象就可以了。
var a ='jspang';
var b ='技术胖';
var c = 'web';
export {a,b,c}
函数的模块化输出
export function add(a,b){
return a+b;
}
export function add(a,b){
return a+b;
}
as的用法
有些时候我们并不想暴露模块里边的变量名称,而给模块起一个更语义话的名称,这时候我们就可以使用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和export default的区别
1.export
export var a ='jspang';
export function add(a,b){
return a+b;
}
对应的导入方式
import {a,add} form './temp';//也可以分开写
2.export defalut
export default var a='jspang';
对应的引入方式
import str from './temp';