ES6基础知识

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指的是数组下标位置是否为空。

数组的遍历方法

JavaScript Array 对象

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';

本文内容参考技术胖(http://jspang.com/2017/06/03/es6/)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • ES6 箭头函数、函数扩展 ES5: function add(a,b){return a+b;}console....
    紫由袅阅读 354评论 0 1
  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,118评论 0 13
  • ES6语法跟babel: 一、首先我们来解释一下什么是ES? ES的全称是ECMAScript。1996 11 ,...
    Mooya_阅读 980评论 0 0
  • 什么是ECMAScript?ECMAScript就是JavaScript中的语法规范! 关键字 let 的用法le...
    豆奶不小心阅读 339评论 0 0
  • 5月6日考完雅思,感觉一阵轻松。 回顾一下5月3日头马会议中我做的第一次备稿演讲吧。 前一天还没准备好演讲稿 CC...
    然妈Miya阅读 1,685评论 1 4