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

需积分: 50 1 下载量 76 浏览量 更新于2024-09-04 收藏 8KB TXT 举报
"这是关于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的不错起点。