您现在的位置:首页 >> 前端 >> 内容

ES6--函数的扩展

时间:2017/10/8 10:14:00 点击:

  核心提示:1. 为函数参数指定默认值在ES5中有这种情况function fn(a, b){a = a || 10;b = b || 20;console.log(a + b);}fn();//30fn(0, ...

1. 为函数参数指定默认值

在ES5中有这种情况
function fn(a, b){
  a = a || 10;
  b = b || 20;
  console.log(a + b);
}
fn();//30
fn(0, 10);//20因为a=0,所以将10赋给它

在ES6中

function fn(a = 10, b = 20){
  console.log(a + b);
}
fn();//30
fn(0, 10);//10

2. 函数的 rest 参数

rest 参数形式为(“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
在ES5中

function sum(){
  var args = arguments;
  var res = 0;
  for(var i=0; i

ES6中,不提倡使用arguments对象

function sum(...arr){
  var res = 0;
  for(var i=0; i

3. 使用“箭头”(=>)定义函数。

1) 认识箭头函数

const fn = a => a;
//相当于
const fn2 = function (a){
  return a;
};

console.log(fn(1));//1
console.log(fn2(2));//2

2) 箭头函数的其他语法
一般情况

const fn = (a, b) => a + b;
console.log(fn(1, 2));//3

表达式

const fn = (a, b) => {
  a = a * 2;
  b = b * 2;
  return a + b;
};
console.log(fn(1, 2));//3

对象

const fn = (a, b) => ({a, b});
console.log(fn(1, 2));//{a:1,b:2}

数组

//在ES5中从小到大排序
var arr = [5, 2, 3, 4, 1];
arr.sort(function (a, b){
  return a - b;
});
console.log(arr);//[1,2,3,4,5]

arr.sort((a, b) => a - b);
console.log(arr);//[1,2,3,4,5]

3) 注意点
① 箭头函数体内没有自己的this对象,所以在使用的时候,其内部的this就是定义时所在环境的对象,而不是使用时所在环境的对象。

function fn(){
  setTimeout(function (){
    console.log(this);
  }, 1000);

  setTimeout(() => {
    console.log(this);
  },1000);
}
var obj = {a: 1};
fn.call(obj);//分别打印出window和object

以上说明不能给箭头函数使用 call apply bind 去改变其内部的this指向
② 箭头函数体内没有arguments对象,如果要用,可以用Rest参数代替。

function fn(){
  setTimeout(() => {
    console.log(arguments);
  }, 1000)
}
fn(1, 2, 3);//1,2,3

const fn = (...arr) => arr;
console.log(fn(1, 2, 3, 4));//[1,2,3,4]

③ 不可以当作构造函数,不可以使用new命令,否则会抛出一个错误。

const Fn = (a, b) => a + b;
const f = new Fn(1, 2);//报错

Tags:ES S6 6函 函数 
作者:网络 来源:jiaojsun的博