JavaScript 中 module.exports 、 export 和 => ，箭头函数的用法

module.exports 的用法

module.exports 对象是由模块系统创建的。在我们自己写模块的时候，需要在模块最后写好模块接口，声明这个模块对外暴露什么内容，module.exports 提供了暴露接口的方法。

示例

1、返回一个 JSON Object

var app = {
        name: 'app',
        version: '1.0.0',
        sayName: function(name){
                console.log(this.name);
        }
}
module.exports = app;

let proxyObj = {};
proxyObj["/"] = {
    ws:false, // 关闭 webSocket
    target: "http://localhost:8081", // 目标地址
    changeOrigin: true,
    pathRewrite: {
        '^/':''
    }
}

module.exports = {
    devServer:{
        host: "localhost",
        port: 8080,
        proxy: proxyObj
    }
}

export 的用法

在 JavaScript ES6 中，export 与 export default 均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块) 名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import 可以有多个，export default 仅有一个。

示例

1、export

// api.js
export const postRequest = (url, params) => {
    return axios({
        method: "post",
        url: `${base}${url}`,
        data: params,
    })
}

export const putRequest = (url, params) => {
    return axios({
        method: "put",
        url: `${base}${url}`,
        data: params,
    })
}

export const getRequest = (url, params) => {
    return axios({
        method: "get",
        url: `${base}${url}`,
        data: params,
    })
}

export const deleteRequest = (url, params) => {
    return axios({
        method: "delete",
        url: `${base}${url}`,
        data: params,
    })
}

对应的导入方式，有花括号

// main.js
import {postRequest} from "./utils/api"
import {putRequest} from "./utils/api"
import {getRequest} from "./utils/api"
import {deleteRequest} from "./utils/api"

2、export default

//demo1.js
export default str = 'hello world'

对应的导入方式，没有花括号

//demo2.js
import str from 'demo1' //导入的时候没有花括号

箭头函数的用法

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

基础语法

通常函数的定义方法

var fn1 = function(a, b) {
    return a + b
}
 
function fn2(a, b) {
    return a + b
}

使用 ES6 箭头函数语法定义函数，将原函数的 “function” 关键字和函数名都删掉，并使用 “=>” 连接参数列表和函数体。

var fn1 = (a, b) => {
    return a + b
}
 
(a, b) => {
    return a + b
}

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

// 无参
var fn1 = function() {}
var fn1 = () => {}
 
// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}
 
// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}
 
// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

箭头函数有两种格式，一种只包含一个表达式，省略掉了 { ... } 和 return。还有一种可以包含多条语句，这时候就不能省略 { ... } 和 return

() => return 'hello'
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

如果返回一个对象，需要特别注意，如果是单表达式要返回自定义对象，不写括号会报错，因为和函数体的 { ... } 有语法冲突。

注意，用小括号包含大括号则是对象的定义，而非函数主体

x => {key: x} // 报错
x => ({key: x}) // 正确

参考文章

https://blog.csdn.net/zhanghow/article/details/86616378

https://blog.csdn.net/zhou_xiao_cheng/article/details/52759632

https://blog.csdn.net/qq_32614411/article/details/80897256

每天学习一点点，每天进步一点点。