为什么带有功能箭头的map()不起作用?

时间:2017-12-18 19:55:17

标签: javascript arrays object mapping

在我以前的一篇关于使用map()的帖子中使用标准的if / else块解决了这个问题。但现在我有另一个问题。这是if / else:

的解决方案
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Transforming Data</title>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <h1>Transforming Data</h1>
  <p>Open the console</p>

  <script type="text/babel">

    // Editing one object in an array of objects

    let schools = [
      {name: 'Yorktown'},
      {name: 'Stratford'},
      {name: 'Washington & Lee'},
      {name: 'Wakefield'}
    ];

    const editName = (oldName, newName, arr) =>
      arr.map(item => {
        if (item.name === oldName) {
          return {
            ...item,
            name: newName
          }
        }
        else {
          return item
        }
      });

    let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

    console.log(updatedSchools[1]);  // {name: "HB Woodlawn"}
    console.log(schools[1]);  // {name: "Stratford"}

  </script>

</body>
</html>

但是,在使用功能箭头时,我不想为我工作。映射时不会进行替换。但是,我使用相同的解决方案 - 即:&#39; name:name&#39;。我做错了什么?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Transforming Data</title>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <h1>Transforming Data</h1>
  <p>Open the console</p>

  <script type="text/babel">

    let schools = [
      'Yorktown',
      'Stratford',
      'Washington & Lee',
      'Wakefield'
    ];

    const editName = (oldName, name, arr) =>
      arr.map(item => (item.name === oldName) ?
        ({...item, name: name}) :
        item
      );

    let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

    console.log(updatedSchools[1]);  // Stratford
    console.log(schools[1]);  // Stratford

  </script>

</body>
</html>

3 个答案:

答案 0 :(得分:2)

你的新数组是一个字符串数组,而不是一个对象数组,因此没有name属性,这意味着item.name将始终返回undefined。

如果您想继续使用字符串数组,则必须修改您的函数:

&#13;
&#13;
    let schools = [
      'Yorktown',
      'Stratford',
      'Washington & Lee',
      'Wakefield'
    ];

    const editName = (oldName, name, arr) =>
      arr.map(item => (item === oldName) ? name : item);

    let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

    console.log(updatedSchools[1]);  // Stratford
    console.log(schools[1]);  // Stratford
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您的原始数组只是一个字符串数组而不是一个对象数组,它没有Sub forexpros() Dim IE As New InternetExplorer, html As HTMLDocument Dim frm As Object, frmano As Object, post As Object With IE .Visible = True .navigate "http://tvc4.forexpros.com/init.php?family_prefix=tvc4&carrier=64694b96ed4909e815f1d10605ae4e83&time=1513525898&domain_ID=70&lang_ID=70&timezone_ID=31&pair_ID=171&interval=86400&refresh=4&session=session&client=1&user=200743128&width=650&height=750&init_page=instrument&m_pids=&watchlist=&site=https://au.investing.com&version=1.11.2" Do Until .readyState = READYSTATE_COMPLETE: Loop Application.Wait (Now + TimeValue("0:00:05")) Set frm = .document.getElementsByClassName("abs") ''this is the first iframe .navigate frm(0).src Do Until .readyState = READYSTATE_COMPLETE: Loop Application.Wait (Now + TimeValue("0:00:05")) Set html = .document End With Set frmano = html.getElementsByTagName("iframe")(0).contentWindow.document ''this is the second iframe For Each post In frmano.getElementsByClassName("pane-legend-item-value pane-legend-line main") Debug.Print post.innerText Next post IE.Quit End Sub 属性的对象,因此当您使用name访问每个数组元素时,您无法访问.map()属性,包含您当前的代码。如果你想用你的字符串数组实现相同的结果,那么你可以尝试使用下面的代码,它只迭代每个数组字符串元素并替换所需的元素。在原始代码name中返回undefined。

item.name

答案 2 :(得分:0)

抱歉,关于此问题的原始帖子包含一个错误的字符串数组,它应该是一个对象数组。我为浪费每个人的时间而道歉。以下代码确实可以正常工作:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Transforming Data</title>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <h1>Transforming Data</h1>
  <p>Open the console</p>

  <script type="text/babel">

    let schools = [
      {name: 'Yorktown'},
      {name: 'Stratford'},
      {name: 'Washington & Lee'},
      {name: 'Wakefield'}
    ];

    const editName = (oldName, name, arr) =>
      arr.map(item => (item.name === oldName) ?
        ({...item, name: name}) :
        item
      );

    let updatedSchools = editName('Stratford', 'HB Woodlawn', schools);

    console.log(updatedSchools[1]);  // {name: "HB Woodlawn"}
    console.log(schools[1]);  // {name: "Stratford"}

  </script>

</body>
</html>