📜  JavaScript 中的导出默认值是什么?

📅  最后修改于: 2022-05-13 01:56:55.676000             🧑  作者: Mango

JavaScript 中的导出默认值是什么?

export 语句用于创建 JavaScript 模块以从模块中导出对象、函数、变量,以便其他程序可以在 import 语句的帮助下使用它们。
有两种类型的出口。一种是命名导出,另一种是默认导出。命名导出:命名导出对于导出多个值很有用。在导入过程中,必须使用对应对象的相同名称。

// Exporting individual features
export var name1 = …, name2 = …, …, nameN; // also let, const
  
// Export list
export { name1, name2, …, nameN };
  
//Exporting everything at once
export { object, number, x, y, boolean, string }
  
// Renaming exports
export { variable1 as name1, variable2 as name2, …, nameN };
  
// export features declared earlier
export { myFunction, myVariable }; 

例子:

//file math.js
function square(x) {
  return x * x;
}
function cube(x) {
  return x * x;
}
export { square, cube };
  
   
//while importing square function in test.js
import { square, cube } from './math;
console.log(square(8)) //64
console.log(cube(8)) //512

输出:

64
512

默认导出:默认导出对于仅导出单个对象、函数、变量很有用。在导入过程中,我们可以使用任何名称进行导入。

// file module.js
var x=4; 
export default x;
  
// test.js
// while importing x in test.js
import y from './module'; 
// note that y is used import x instead of 
// import x, because x was default export
console.log(y);        
// output will be 4

输出

4

具有函数的默认导出的另一个示例

// file math.js
export default function square(x) {
  return x * x;
}
  
//while importing square function in test.js
import square from './math;
console.log(square(8)) //64

输出:

64

同时使用命名和默认导出:可以在同一个文件中使用命名和默认导出。这意味着两者都将导入同一个文件中。

例子:

//module.js
var x=2;
const y=4;
function fun() {
   return "This a default export."
}
function square(x) {
  return x * x;
}
export { fun as default, x, y, square };

在导入这个 module.js 时,我们可以使用任何名称来获得乐趣,因为它是默认导出,而花括号用于其他命名导出。

//test.js file
import anyname, { x, y, square} from './module.js';
console.log(anyname()); //This is a default export.
console.log(x); //2

输出

This is a default export.
2