在 ES6 中使用默认导入和导出
在现代的前端开发中，ES6 成为了一种非常流行和实用的语言。在 ES6 中，有许多新特性和改进，其中之一就是默认导入和导出。这个特性能够提高我们在编写和管理代码时的效率，使我们的代码更加清晰简洁。本文将详细介绍默认导入和导出的用法，并提供一些示例代码帮助读者进行学习。
一、默认导出
在 ES6 中，我们可以使用默认导出来导出一个模块的默认值，也就是一个模块中的主要内容。默认导出只能导出一个值，因此它非常适合导出一个对象、一个函数或者一个类。
1.导出一个对象
在导出一个对象时，我们需要先创建一个新的对象并给它添加一些属性和方法，最后将这个对象设置为模块的默认值。
示例代码：
// person.js
const person = {
name: 'Tom',
age: 18
}
export default person在另一个文件中，我们可以使用以下语法来导入这个模块的默认值：
// main.js import person from './person.js' console.log(person.name) // Tom
2.导出一个函数
在导出一个函数时，我们只需要在函数前面使用 export default 关键字就可以了。
示例代码：
// greet.js
export default function greet(name) {
console.log(`Hello, ${name}!`)
}在另一个文件中，我们可以使用以下语法来导入这个模块的默认值：
// main.js
import greet from './greet.js'
greet('Tom') // Hello, Tom!3.导出一个类
在导出一个类时，我们只需要在类的声明前使用 export default 关键字就可以了。需要注意的是，类的名称需要遵循大写字母开头的命名规范。
示例代码：
-- -------------------- ---- -------
-- ---------
------ ------- ----- ------ -
----------------- ---- -
--------- - -----
-------- - ---
-
------- -
------------------- -- ---- -- ------------- --- ----------- ----- ------
-
-在另一个文件中，我们可以使用以下语法来导入这个模块的默认值：
// main.js
import Person from './person.js'
const tom = new Person('Tom', 18)
tom.sayHi() // Hello, my name is Tom, I'm 18 years old.二、默认导入
在 ES6 中，我们可以使用默认导入来导入一个模块的默认值。默认导入使用 import 关键字，后面跟着模块的路径和模块的名称。当没有指定名称时，我们可以使用 as 关键字来为模块起一个别名。
1.导入一个对象
示例代码：
// person.js
const person = {
name: 'Tom',
age: 18
}
export default person在另一个文件中，我们可以使用以下语法来导入这个模块的默认值：
// main.js import person from './person.js' console.log(person.name) // Tom
2.导入一个函数
示例代码：
// greet.js
export default function greet(name) {
console.log(`Hello, ${name}!`)
}在另一个文件中，我们可以使用以下语法来导入这个模块的默认值：
// main.js
import greet from './greet.js'
greet('Tom') // Hello, Tom!3.导入一个类
示例代码：
-- -------------------- ---- -------
-- ---------
------ ------- ----- ------ -
----------------- ---- -
--------- - -----
-------- - ---
-
------- -
------------------- -- ---- -- ------------- --- ----------- ----- ------
-
-在另一个文件中，我们可以使用以下语法来导入这个模块的默认值：
// main.js
import Person from './person.js'
const tom = new Person('Tom', 18)
tom.sayHi() // Hello, my name is Tom, I'm 18 years old.总结
在 ES6 中，使用默认导入和导出能够方便我们在模块之间进行数据和功能的共享和调用。本文介绍了默认导入和导出的具体用法和示例代码，希望能够帮助读者更好地掌握这个技术，并在实际项目中应用得当。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654d05d57d4982a6eb6607b9