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('HelloWorld')
return a+b;
};
console.log(add(1));

箭头函数中不可加new,也就是说箭头函数不能当构造函数进行使用。

最后我还是要重复强调的是,你一定要动手敲一下代码,要不你是学不会的,在工作中的改变就是学习了ES6得语法,在写新项目的时候尽量使用ES6带来的便利和特点,这样才能快速成长。

ES6中的函数和数组补漏

对象的函数解构

我们在前后端分离时,后端经常返回来JSON格式的数据,前端的美好愿望是直接把这个JSON格式数据当作参数,传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。

let json = {
a:'hello',
b:'world'
}

var fun = ({a,b='hello'}) => console.log(a,b)

fun(json);

print ------> helloworld

是不是感觉方便了很多,我们再也不用一个个传递参数了。

数组的函数解构

函数能解构JSON,那解构我们的数组就更不在话下了,我们看下边的代码。我们声明一个数组,然后写一个方法,最后用…进行解构赋值。

<script>
let arr = ['Hello','World','Friend'];
function fun(a,b,c){
console.log(a,b,c);
}
fun(...arr);
</script>
//输出 Hello World Friend

这种方法其实在前面的课程中已经学过了,这里我们就当复习了。

in的用法

in是用来判断对象或者数组中是否存在某个值的。我们先来看一下用in如何判断对象里是否有某个值。

对象判断
<script>
let obj={
a:'Hello',
b:'World'
}
console.log('a' in obj); //true
</script>
数组判断

先来看一下ES5判断的弊端,以前会使用length属性进行判断,为0表示没有数组元素。但是这并不准确,或者说真实开发中有弊端。

let arr=[,,,,,];
console.log(arr.length); //5

上边的代码输出了5,但是数组中其实全是空值,这就是一个坑啊。那用ES6的in就可以解决这个问题。

let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=['Hello','World'];
console.log(0 in arr1); // true

注意:这里的0指的是数组下标位置是否为空。

数组的遍历方法

1.forEach
let arr=['Hello','World','Friend'];

arr.forEach((val,index)=>console.log(index,val));

forEach循环的特点是会自动省略为空的数组元素,相当于直接给我们筛空了。当是有时候也会给我们帮倒忙。

2.filter
let arr=['Hello','World','Friends'];

arr.filter(x=>console.log(x));

这种方法在Vue实战里我讲过,他其实也有循环的功能,这里我们在复习一遍。

3.some
let arr=['Hello','World','Friends'];

arr.some(x=>console.log(x));
4.map
let arr=['Hello','World','Friends'];

console.log(arr.map(x=>'web'));

map在这里起到一个替换的作用,这个我们后续课程会详细讲解。

数组转换字符串

在开发中我们经常会碰到把数组输出成字符串的形式,我们今天学两种方法,你要注意两种方法的区别。

join()方法
let arr=['Hello','World','Friends']

console.log(arr.join('|'));

join()方法就是在数组元素中间,加了一些间隔,开发中很有用处。

toString()方法
let arr=['Hello','World','Friends']

console.log(arr.toString());

转换时只是是用逗号隔开了。

(完)

分享到