函数转换为箭头函数 - 函数未定义答案

【问题标题】：Function converted to arrow function - function not defined函数转换为箭头函数 - 函数未定义
【发布时间】：2019-01-07 13:17:00
【问题描述】：

我刚刚学习 ES6 并了解了箭头函数。我正在浏览现有文件并一一转换功能。我已经转换了许多函数，除了 1 之外，所有函数都像以前一样工作。

这样做，我可以调用page 来获取当前文件名

let textArr = getPage.textArr;
let headingArr = getPage.headingArr;
const page = getPage.filename;

function getPage() {
  const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

保持原样，转换为箭头函数，然后在控制台中调用page，我得到：

getPage 没有在第 1 行定义

const getPage = () => {
        const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

【问题讨论】：

你需要有平衡支架。您在发布的问题中缺少一个右括号。
getPage 是一个函数，而不是一个属性。调用函数。 getPage.filename 未定义（根据您的第一个代码块），而 getPage().filename（可能）未定义。
在处理arrow functions时，你必须先定义getPage然后调用它。否则会报错

标签： javascript ecmascript-6 arrow-functions

【解决方案1】：

这是一个吊装问题。默认情况下会提升函数。分配给变量的箭头函数不会发生这种情况。如果你想让它工作，你需要在调用它之前移动 const 定义。像这样：

const getPage = () => {
        const url = window.location.pathname,
    fileWithExtension = url.substring(url.lastIndexOf('/')+1),
    filename = fileWithExtension.split('.').slice(0, -1).join('.')    
  ;    
  if (filename == "foo") {
    textArr = [ 
      `Text`,
      `Text`
    ];
    headingArr = null;
    return {filename, textArr, headingArr}
  }
}

let textArr = getPage().textArr;
let headingArr = getPage().headingArr;
const page = getPage().filename;

【讨论】：

谢谢，有人告诉我除了语法之外它们在本质上是相同的。
我可以在没有构造函数的情况下调用该函数（即getPage.filename）并且它可以工作。我没有注意到我忽略了在我的代码中包含 ()。你知道为什么会这样吗？
@froggomad 谁告诉你的？箭头函数和函数有不同的作用域。这是一个主要区别。
我明白了为什么在没有构造函数的情况下调用它是有效的——它实际上不起作用......该函数正在覆盖变量。范围，范围，范围...
@froggomad：您遇到的问题并非特定于箭头函数。函数表达式 (const getPage = function() {}) 也会发生这种情况。变量只有在执行了赋值的行后才会得到它们的值。

【解决方案2】：

你实际上并没有调用你的函数，即const page = getPage.filename;应该被const page = getPage().filename;替换

对于所有三个变量，您可以执行以下操作：

let {textArr, headingArr, textArr} = getPage();

【讨论】：

【解决方案3】：

再添加1个大括号就可以了。

const getPage = () => {
    const url = window.location.pathname,
fileWithExtension = url.substring(url.lastIndexOf('/')+1),
filename = fileWithExtension.split('.').slice(0, -1).join('.');    
if (filename == "foo") {
   textArr = [ 
    `Text`,
    `Text`
   ];
   headingArr = null;
   return {filename, textArr, headingArr}
  }
}

【讨论】：

谢谢，这是问题中的错字