ECMAScript6基础学习教程（四）函数

2022-05-13 14:30:43 浏览数 (1)

ES6在函数方面有很多扩展，其中最为大众所知的就是箭头函数。除此之外，还有很多其他新特性，比如，参数默认值，Rest参数和扩展运算符......下面将一一介绍。

1. 箭头函数

ES6运行用=>定义函数，格式如下：

代码语言：javascript复制
//ES5
var foo = function (x) {
  return x*x;
}
//ES6
var foo = (x) =>{
  return x*x;
}
//可以简写为
var foo = (x)=>x*x;

箭头函数用=>代替关键字function。如果函数代码块只有一条语句，那么，可以省略函数大括号{}和关键字return。

箭头函数最大特点，就是函数没有**this**对象，因此，箭头函数有如下特点：

  1. 箭头函数不能用作构造函数
  2. 箭头函数不能使用call(), apply(), bind()方法
  3. 不可以使用arguments对象
  4. 箭头函数中如果调用this，那么this指向函数定义时所在对象的this变量。
代码语言：javascript复制
var test = function(){
  setTimeout(()=>{
    console.log(this.id);
  }, 100)
}
// 箭头函数定义在test方法中，而调用test的对象为{id:1}，因此test函数的this对象指向{id:1}
// 那么，箭头函数中的this，也同样指向{id:1}
test.call({id: 1}); // 1
2.函数参数默认值

类似解构赋值，函数参数也可以定义默认值，同样，用?===undefined来判断是否参数值为空。

代码语言：javascript复制
function log(x="hello", y="world") {
  console.log(x  " "   y);
}
log(); // "hello world"
log("Hi"); // "Hi world"
// null不会被判断为空值
log(null, "javascript"); //"null javascript"

在ECMAScript6基础学习教程（三）变量的解构赋值文章中，曾经提到在函数中应用解构赋值，这里再次温习一遍。

代码语言：javascript复制
function test({a=1, b=2, c=3}) {
  console.log(a b c);
}
test({c:4}); // 7
test({a:5, b:5}); //13
3. 函数的rest参数

函数的rest参数格式为function(...args)或，function(x, y, ...args)，args为数组，保存的是函数剩余变量（注意：rest参数必须是函数最后一个参数，这点和数组解构赋值里面的...用法类似）。

代码语言：javascript复制
function add(factor, ...args) {
  let total = 0;
  args.forEach((item)=>{
    total  = item;
  });
  return total * factor;
}
add(2, 1, 2, 3, 4, 5); // 30
4. 扩展运算符

扩展运算符，格式也是...，它将一个数组转为用逗号分隔的参数序列。

最常见的使用场景，就是调用函数。

比如上面的add函数，我们可以如下调用：

代码语言：javascript复制
var args = [2, 1, 2, 3, 4, 5];
add(...args); // 30

与rest参数不同，扩展运算符可以不是最后一个参数。比如，还可以如下调用add函数：

代码语言：javascript复制
var args = [1, 2, 3, 4];
add(1, ...args, 5); // 30

还可以利用扩展运算符合并数组或者对象（是一种复制操作，为浅拷贝）：

代码语言：javascript复制
// 合并数组
var array1= [1,2];
var array2= [3,4];
var array = [...array1, ...array2]; // [1,2,3,4]

// 合并对象
var obj1 ={a: 1, d: 5, f: {g: 6}};
var obj2 ={a:2, b:3, c:4};
// 后面参数对象的属性，可能会覆盖前面对象的属性，如下，属性a被覆盖
var obj = {...obj1, ...obj2}; // obj === { a: 2, d: 5, f: { g: 6 }, b: 3, c: 4 }
// 改变源对象的值
obj1.f.g = 10;
// 查看obj，发现值同步改变
console.log(obj); // { a: 2, d: 5, f: { g: 10 }, b: 3, c: 4 }
小结

最容易混淆的就是函数"rest参数"和"扩展运算符"，两者功能正好相反：

  • 前者将参数序列转为数组，后者将数组转为参数序列
代码语言：javascript复制
function test(...args) {
  return [1, 2, 3, ...args];
}
test(4, 5, 6, 7); // [1, 2, 3, 4, 5, 6, 7]

下一节：ECMAScript6基础学习教程（五）对象

ecmascript 编程算法

0 人点赞