ES6

ES6学习笔记10:函数的新面貌和"..."操作符

Posted by mieruko on 2016-12-19

前言

“…”是ES6中新添加的一种操作符。
函数在ES6中有了更强的特性。
放在一起梳理一下～～

…操作符

主要有两个作用”spread”和”rest”。

spread： 

1
2
3
4
5
6
7
8
'use strcit'

let fruits = ["🍎", "🍌"],
    foods = ["🍰", ...fruits];

console.log(fruits);
console.log(...fruits);
console.log(foods);

第一行就是单纯地输出数组，然后第二行会看到数组里面的内容被展开了，分别输出。
然后第三行我们可以看到fruits是先被拆开然后放进数组foods里面去的。

rest(用在函数参数里): 

1
2
3
4
5
6
7
'use strict'

function breakfast(dessert, drink, ...foods) {
  console.log(dessert, drink, foods);
}

breakfast("🍰", "🍎", "🍹", "🍐");

表示传进来的参数里剩下的所有值。
输出后”🍹”，”🍐”被合并成一个数组，被当作剩余的参数集体被foods接受了～～～

函数的新面貌

ES6为函数新添加了name属性

看一段代码： 

1
2
3
4
5
6
7
8
9
'use strict'

function breakfast(argument) {
  // body...
}

console.log(
    breakfast.name;
);

如此我们便能输出函数的名字。

换一种定义方式: 

1
2
3
4
5
6
7
8
9
'use strict'

let breakfast = function(argument) {
  // body
} 

console.log(
  breakfast.name;
)

函数定义表达式中，输出的就是函数定义表达式左侧的名字。

如果我在函数定义表达式的右侧传递一个非匿名的函数声明： 

1
2
3
4
5
6
7
8
9
'use strict'

let breakfast = function super(argument) {
  // body
};

console.log(
  breakfast.name;
);

输出的就是super这个名字。

所以函数的name属性，当函数表达式和函数声明同时存在的时候，在函数声明非匿名的时候就会认准函数声明中的名字，在函数声明匿名的情况下会认准函数表达式里面的名字。

函数的简化写法————箭头函数

ES6介绍了一种新的定义函数的方法叫做箭头函数: 

1
2
3
'use strict'

let breakfast = dessert => dessert;

箭头的左边是参数，右边是return的值。
它等价于： 

1
2
3
4
5
'use strict'

var breakfast = function breakfast(dessert) {
  return dessert;
}

如果参数和返回值稍微多点就这样写: 

1
2
3
'use strict'

var breakfast = (dessert, drink) => dessert + drink;

如果函数不是简单地返回点东西的话： 

1
2
3
4
5
6
'use strict'

let breakfast = (dessert, drink) => {
  console.log("我要输出啦！");
  return dessert + drink;
}

小结

…的用法和箭头函数比较重要，因为在实际的开发中它们真的很有用，嘻嘻。

FEATURED TAGS
ES6