es6import用法
一、ES6简介
ES6是ECMAScript 2015的缩写,它是JavaScript的一种新版本。ES6引入了许多新特性和语法糖,使得JavaScript更加强大、灵活和易读。
二、import语句
在ES6中,我们可以使用import语句来引入其他模块中的内容。import语句有两种形式:默认导出和命名导出。
1. 默认导出
如果一个模块只导出一个值或对象,我们可以使用默认导出。默认导出使用default关键字进行标识。
例如:
```
// math.js
export default function add(a, b) {
return a + b;
}
// main.js
import add from ''./math'';
console.log(add(1, 2)); // 输出3
```
在上面的例子中,math.js文件中只有一个函数add被导出,并且使用default关键字进行标识。在main.js文件中,我们使用import语句来引入math.js模块,并且将add函数赋值给变量add。这样,在main.js文件中就可以直接调用add函数了。
2. 命名导出
如果一个模块导出多个值或对象,我们可以使用命名导出。命名导出使用大括号{}进行标识,并且每个被导出的值都需要在大括号内进行声明。
例如:
```
// math.js
export function add(a, b) {
return a + b;
}
export function substract(a, b) {
return a - b;
}
// main.js
import { add, substract } from ''./math'';
console.log(add(1, 2)); // 输出3
console.log(substract(2, 1)); // 输出1
```
在上面的例子中,math.js文件中导出了两个函数add和substract,并且使用大括号{}进行标识。在main.js文件中,我们使用import语句来引入math.js模块,并且将add和substract函数赋值给变量add和substract。这样,在main.js文件中就可以直接调用add和substract函数了。
三、import语句的高级用法
除了默认导出和命名导出之外,import语句还有一些高级用法。
1. 导入整个模块
如果一个模块导出的内容非常多,我们可以使用*号来导入整个模块。
例如:
```
// math.js
export function add(a, b) {
return a + b;
}
export function substract(a, b) {
return a - b;
}
export const PI = 3.1415926;
// main.js
import * as math from ''./math'';
console.log(math.add(1, 2)); // 输出3
console.log(math.substract(2, 1)); // 输出1
console.log(math.PI); // 输出3.1415926
es6新特性面试```
在上面的例子中,我们使用*号来导入整个math.js模块,并且将所有的内容赋值给变量math。这样,在main.js文件中就可以通过math对象来访问math.js模块中的所有内容了。
2. 动态导入
如果我们需要在程序运行时才能确定需要导入哪个模块,我们可以使用动态导入。
例如:
```
// main.js
async function loadModule() {
const math = await import(''./math'');
console.log(math.add(1, 2)); // 输出3
}
loadModule();
```
在上面的例子中,我们使用async和await关键字来定义一个异步函数loadModule。在loadModule函数中,我们使用import语句来动态导入math.js模块,并且将所有的内容赋值给
变量math。这样,在loadModule函数中就可以通过math对象来访问math.js模块中的所有内容了。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论