互動挑戰
首先，我們為您準備了一個由我們的 學習合作伙伴 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!
// ...