ES6～ES14 之 函数篇

从 ES5 到 ES2024 函数新增特性总结

从 ES5 到 ES2024，JavaScript 在函数方面新增了许多特性，改善了函数的灵活性、简洁性和性能。以下是一些重要的新增特性：

1. 严格模式 (ES5)

• 严格模式引入了更严格的语法和行为，减少了潜在的错误。它可以通过在函数或脚本顶部添加 "use strict" 来启用，限制了一些危险或不推荐的行为，比如禁止使用未声明的变量，禁用删除变量等。

2. bind 方法 (ES5)

• bind 方法允许你创建一个新的函数，指定其 this 值和初始参数。可以用来确保函数在特定的上下文中执行，尤其是在处理回调函数时非常有用。

function greet(name) {
  console.log(`Hello, ${name}`);
}

const greetJohn = greet.bind(null, 'John');
greetJohn();  // "Hello, John"

3. 箭头函数 (ES6)

• 箭头函数引入了更简洁的语法 () => {}，并且其最大的特点是不会绑定自己的 this，而是继承外部的 this。这在回调函数、事件处理和异步编程中非常有用。

const add = (a, b) => a + b;

• this 绑定: 箭头函数不绑定自己的 this，使得它们在回调或匿名函数中表现得更加直观。

4. 默认参数 (ES6)

• ES6 引入了函数的默认参数值，当没有传入参数时，使用预设的默认值。这可以避免手动检查每个参数是否为 undefined。

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}
greet();  // "Hello, Guest"
greet('Alice');  // "Hello, Alice"

5. 剩余参数 (ES6)

• 剩余参数（Rest Parameters） 语法 ...args 允许函数接受不定数量的参数，并将它们存储在一个数组中。这取代了 arguments 对象，使得代码更加简洁和易读。

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4));  // 10

6. 扩展运算符 (ES6)

• 扩展运算符 ... 可以将一个数组或对象展开。它与剩余参数语法相似，但用于调用时传递参数，或者将元素扩展到另一个数组或对象中。

const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];  // [1, 2, 3, 4, 5]

7. name 属性 (ES6)

• 函数对象现在拥有 name 属性，可以获取函数的名称。这在调试和日志记录中非常有用。

function foo() {}
console.log(foo.name);  // "foo"

8. 生成器函数与 yield (ES6)

• 生成器函数使用 function* 语法，并可以通过 yield 暂停函数的执行，返回一个值，等待下一次调用时继续执行。这为异步编程提供了一种更加直观的方式，尤其是与 async/await 结合使用时。

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();
console.log(gen.next().value);  // 1
console.log(gen.next().value);  // 2
console.log(gen.next().value);  // 3

9. async 和 await (ES8/ES2017)

• async/await 让异步代码更接近同步代码的结构，极大地提高了代码的可读性。async 用来声明一个函数是异步的，await 用来等待一个 Promise 的结果。

async function fetchData() {
  let response = await fetch('https://api.example.com');
  let data = await response.json();
  console.log(data);
}

10. Function.prototype.toString() 改进 (ES6)

• 在 ES6 中，toString() 方法的输出有了改善，现在可以更准确地返回函数体的内容，特别是在匿名函数和箭头函数的情况下。

11. class 和类方法 (ES6)

• ES6 引入了 class 语法，使得面向对象编程在 JavaScript 中更加规范。class 中定义的方法本质上是普通的函数，但通过 class 语法，能够使代码更具可读性和结构性。

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}

12. Object.entries() 和 Object.values() (ES8/ES2017)

• 虽然这些方法主要用于对象遍历，但它们也可以在函数式编程中提供帮助，尤其是在处理对象参数时，简化了代码逻辑。

const obj = { a: 1, b: 2 };
console.log(Object.entries(obj));  // [['a', 1], ['b', 2]]
console.log(Object.values(obj));   // [1, 2]

13. arguments 变得不可扩展 (ES6)

• 在 ES6 中，arguments 变得更加严格，不能像数组一样被修改，尽管它仍然是一个类数组对象。

14. 函数式编程相关特性 (ES6)

• ES6 引入了 map(), filter(), reduce() 等数组方法，使得函数式编程更加便利，尤其是在处理大量数据时非常高效。

15. setTimeout 和 setInterval 返回的 ID 类型改为 clearTimeout 与 clearInterval 可用的值类型（ES6/ES2015）

• 这种变化有助于提高代码的可维护性，因为我们现在可以更清晰地处理这些定时器。

总结

从 ES5 到 ES2024，JavaScript 在函数相关的特性上持续进化，尤其是对函数式编程的支持、异步操作的简化以及对函数调用的更多灵活性。每个新增的特性都在一定程度上优化了 JavaScript 的可读性、简洁性和开发效率。