互动挑战
首先，我们为您准备了一个由我们的 学习合作伙伴 Scrimba 创建的有趣的交互式数组挑战。
观看嵌入的 scrim，并按照说明编辑代码，在时间轴上（小幽灵图标）完成任务。完成后，您可以继续观看 scrim，检查老师的解决方案与您的解决方案有何不同。
注意： 这项任务算是一个“拓展目标”，因为它依赖于您尚未在课程中明确学习过的 JavaScript 功能。尽力而为，并搜索您不确定的信息。
任务 1
此任务为您提供了一些基础的数组练习。
- 创建一个包含三个元素的数组，并将其存储在一个名为
myArray的变量中。这些元素可以是任何您想要的——例如您的喜爱的食物或乐队？ - 接下来，使用方括号表示法和赋值来修改数组中的前两个元素。
- 最后，在新数组的开头添加一个新元素。
js
// Add your code here
// Don't edit the code below here!
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = `Array: ${myArray}`;
section.appendChild(para1);
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
const myArray = ["cats", "dogs", "chickens"];
myArray[0] = "horses";
myArray[1] = "pigs";
myArray.unshift("crocodiles");
// Don't edit the code below here!
// ...
任务 2
现在让我们进行另一项任务。在这里，我们为您提供了一个字符串来操作。
完成任务
- 将字符串转换为数组，并在转换过程中移除
+字符。将结果存储在一个名为myArray的变量中。 - 将数组的长度存储在一个名为
arrayLength的变量中。 - 将数组的最后一个元素存储在一个名为
lastItem的变量中。
js
const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";
// Add your code here
// Don't edit the code below here!
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = `Array: ${myArray}`;
const para2 = document.createElement("p");
para2.textContent = `The length of the array is ${arrayLength}.`;
const para3 = document.createElement("p");
para3.textContent = `The last item in the array is "${lastItem}".`;
section.appendChild(para1);
section.appendChild(para2);
section.appendChild(para3);
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";
let myArray = myString.split("+");
let arrayLength = myArray.length;
let lastItem = myArray[arrayLength - 1];
// Don't edit the code below here!
// ...
任务 3
对于这个数组任务，我们为您提供了一个起始数组，您将进行一些反向操作。您需要：
- 移除数组的最后一个元素。
- 在数组的末尾添加两个新名称。
- 遍历数组中的每个元素，并在名称后面加上其索引号（例如
Ryu (0)）。请注意，我们并未在数组文章中教授如何实现这一点，因此您需要做一些研究。 - 最后，将数组元素连接成一个单一的字符串，名为
myString，使用"-"作为分隔符。
js
const myArray = [
"Ryu",
"Ken",
"Chun-Li",
"Cammy",
"Guile",
"Sakura",
"Sagat",
"Juri",
];
// Add your code here
// Don't edit the code below here!
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = myString;
section.appendChild(para1);
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
const myArray = [
"Ryu",
"Ken",
"Chun-Li",
"Cammy",
"Guile",
"Sakura",
"Sagat",
"Juri",
];
myArray.pop();
myArray.push("Zangief");
myArray.push("Ibuki");
myArray.forEach((element, index) => {
const newElement = `${element} (${index})`;
myArray[index] = newElement;
});
const myString = myArray.join(" - ");
// Don't edit the code below here!
// ...
任务 4
对于这个数组任务，我们为您提供了一个包含一些鸟类名称的起始数组。
完成任务
- 找到
"Eagles"元素的索引，并使用该索引移除"Eagles"元素。 - 从原数组创建一个新数组，名为
eBirds，其中只包含原数组中名称以字母“E”开头的鸟类。请注意，startsWith()是检查字符串是否以给定字符开头的好方法。
如果操作成功，您应该会在页面上看到 "Emus,Egrets"。
js
const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];
// Add your code here
// Don't edit the code below here!
const section = document.querySelector("section");
const para1 = document.createElement("p");
para1.textContent = eBirds;
section.appendChild(para1);
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];
const eaglesIndex = birds.indexOf("Eagles");
birds.splice(eaglesIndex, 1);
function startsWithE(bird) {
return bird.startsWith("E");
}
const eBirds = birds.filter(startsWithE);
// Don't edit the code below here!
// ...