ES6:使用模板文字创建字符串- Freecodecamp

Question

链接：
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

问题:< br >使用带反斜杠的模板文字语法创建列表元素(li)字符串数组。每个列表元素的文本应该是result对象的failure属性中的数组元素之一，并且有一个值为text-warning的class属性。makeList函数应该返回列表项字符串的数组。

使用迭代器方法（任何类型的循环）来获取所需的输出

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

>

未传递：failuresList应该是包含结果失败消息的数组。

通过:failuresList应等于指定的输出。

通过：应使用模板字符串和表达式插值。

已通过：应使用迭代器。

以下是我到目前为止的代码：

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};

function makeList(arr) {
  "use strict";
 
 
  // Only change code below this line
  const resultDisplayArray = (arr) =>{
    let failure = [];
   for (let element of arr) {
      failure.push(`<li class="text-warning">${element}</li>`);
    }
  
    return failure;
    
  };
  // Only change code above this line

  return resultDisplayArray(arr);
}

const resultDisplayArray = makeList(result.failure);
console.log(resultDisplayArray);

Answer 1

因此，我将以两种方式参考这些问题：如何修复您的代码，并提出一种干净的方法来解决问题。

1. 问题与代码的正确性无关，但事实上，您更改了正在检查的变量的名称。您应该将变量“failuresList”保留在全局范围内，以保存结果数组。但相反，您将其更改为“resultDisplayArray”。复制粘贴代码并仅更改名称，结果所有测试都通过”（我指的是代码最后一行之前的行）
2. 您不应该用内部函数“resultDisplayArray”包装数组创建。这就是“makeList”的用途，内部函数是多余的，因此不应该存在
3. 我就是这样做的：

js lang-js prettyprint-override">const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};

function makeList(arr) {
  // Only change code below this line
  const failureItems = arr.map(curr => `<li class="text-warning">${curr}</li>`);
  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);
console.log(failuresList);

Answer 2

这里最好使用map方法。

js prettyprint-override">const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = result.failure.map(element => `<li class="text-warning">${element}</li>`);
  // Only change code above this line
  return failureItems;
}

const failuresList = makeList(result.failure);

Answer 3

您不需要 makeList 函数中额外的 resultDisplayArray 函数。只需遍历数组！

function makeList(arr) {
  // Only change code below this line
  const failureItems = [];
  for (let element of arr) {
      failureItems.push(`<li class="text-warning">${element}</li>`);
  }
  // Only change code above this line
  return failureItems;
}