ES6箭头函数与function区别详解，模块导入导出实战

"这是关于ES6（ECMAScript 2015）常用方法的一些介绍，适合初学者了解和学习。内容涵盖了箭头函数与传统`function`的区别、`reduce()`方法的说明及其应用，以及`export`和`import`这两个在ES6中引入的模块系统的关键命令，并简单提及了`Number`相关的ES6基础特性。" 在ES6中，箭头函数（Arrow Function）是一种更简洁的定义函数的方式。相比于传统的`function`关键字，箭头函数有以下特点： 1. 箭头函数使用`=>`符号分隔参数列表和函数体。 2. 如果函数体只有一条语句，可以省略大括号`{}`。 3. 当只有一个参数时，可以省略括号`()`。 4. 箭头函数没有自己的`this`值，它会捕获其所在（即定义时）上下文的`this`值，这与`function`关键字定义的函数不同，后者在执行时确定`this`。 例如： ```javascript // 传统function方式 var fn1 = function() { return '123'; }; // 箭头函数方式 var fn1 = () => '123'; // 空括号表示无参数 var fn2 = v => v * 2; // 单个参数 var fn3 = (v1, v2) => v1 + v2; // 多个参数 var fn4 = (v1, v2) => { // 使用大括号表示多行代码 console.log(v1); console.log(v2); return {a: v1, b: v2}; }; ``` 由于箭头函数的`this`行为，它们不适合作为构造函数，如下例所示： ```javascript // 传统构造函数 function Person(name, age) { this.name = name; this.age = age; } var lenhart = new Person('lenhart', 25); console.log(lenhart); // {name: 'lenhart', age: 25} // 使用箭头函数的构造函数 var Person = (name, age) => { this.name = name; this.age = age; }; var lenhart = new Person('lenhart', 25); // Uncaught TypeError: Person is not a constructor ``` ES6中的`export`和`import`命令用于实现模块化。`export`用来导出模块中的变量、函数或类，而`import`则用于导入其他模块的导出内容。例如： ```javascript // 导出模块（module.js） export const pi = 3.14159; export function calculateArea(radius) { return pi * radius * radius; } // 导入模块 import { pi, calculateArea } from './module.js'; console.log(pi); // 3.14159 console.log(calculateArea(5)); // 78.53975 ``` `reduce()`方法是数组的一个高阶函数，它可以对数组中的每个元素执行一个由用户提供的函数，将其结果累积起来。`reduce()`接收两个参数：一个回调函数和一个可选的初始值。回调函数接收四个参数：累积值、当前元素、当前索引和数组本身。例如： ```javascript const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0); console.log(sum); // 10 ``` 这个例子中，`reduce()`将数组所有数字加起来，初始值为0。 此外，文件还提到了`Number`对象在ES6中的基础特性，但未给出具体细节。在ES6中，`Number`对象有一些新的方法，如`isNaN()`, `Number.isNaN()`, `Number.isFinite()`, `Number.isInteger()`等，它们提供了更精确的数值检查功能。 这个资源提供了关于ES6基础知识的简介，包括箭头函数的使用、`reduce()`方法的理解、模块系统的概念，以及对`Number`对象的一些基础认识，是学习ES6的不错起点。