对象基础 1
在此任务中，您将获得一个对象字面量，并需要对其进行一些操作。
完成任务
- 使用方括号表示法将
name属性的值存储在catName变量中。 - 使用点表示法运行
greeting()方法（它会将问候语记录到控制台）。 - 将
color属性值更新为black。
js
const cat = {
name: "Bertie",
breed: "Cymric",
color: "white",
greeting: function () {
console.log("Meow!");
},
};
// Don't edit the code above here!
// Add your code here
// Don't edit the code below here!
const section = document.querySelector("section");
let para1 = document.createElement("p");
let para2 = document.createElement("p");
para1.textContent = `The cat's name is ${catName}.`;
para2.textContent = `The cat's color is ${cat.color}.`;
section.appendChild(para1);
section.appendChild(para2);
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
// ...
// Don't edit the code above here!
const catName = cat["name"];
cat.greeting();
cat.color = "black";
// Don't edit the code below here!
// ...
对象基础 2
在我们的下一个任务中，我们将让您尝试创建一个对象字面量来代表您最喜欢的乐队之一。
完成任务
- 创建一个名为
band的对象字面量，其中包含以下属性：name：一个字符串，表示乐队名称。nationality：一个字符串，表示乐队来自的国家。genre：乐队演奏的音乐类型。members：一个数字，表示乐队成员的数量。formed：一个数字，表示乐队成立的年份。split：一个数字，表示乐队解散的年份，如果乐队仍然在一起，则为false。albums：一个数组，表示乐队发行的专辑。每个数组项都应该是一个对象，包含以下成员：name：一个字符串，表示专辑名称。released：一个数字，表示专辑发行的年份。注意：在
albums数组中至少包含两张专辑。
- 将一个字符串写入
bandInfo变量，其中包含一个简短的传记，详细介绍乐队的名称、国籍、活跃年份和风格，以及他们第一张专辑的标题和发行日期。
js
let bandInfo;
// Don't edit the code above here!
// Add your code here
// Don't edit the code below here!
const section = document.querySelector("section");
let para1 = document.createElement("p");
para1.textContent = bandInfo;
section.appendChild(para1);
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
// ...
// Don't edit the code above here!
const band = {
name: "Black Sabbath",
nationality: "British",
genre: "heavy metal",
members: 4,
formed: 1968,
split: 2025,
albums: [
{
name: "Black Sabbath",
released: 1970,
},
{
name: "Paranoid",
released: 1970,
},
{
name: "Master of Reality",
released: 1971,
},
{
name: "Vol. 4",
released: 1972,
},
],
};
bandInfo = `The ${band.nationality} ${band.genre} band ${band.name} were active between ${band.formed} and ${band.split}. Their first album, ${band.albums[0].name}, was released in ${band.albums[0].released}.`;
// Don't edit the code below here!
// ...
对象基础 3
在此任务中，我们将让您回到“对象基础 1”中的 cat 对象字面量。
完成任务
- 重写
greeting()方法，使其将"Hello, said Bertie the Cymric."记录到浏览器的控制台，但要以一种适用于任何具有相同结构、无论其名称或品种如何的猫对象的方式。 - 写一个名为
cat2的您自己的对象，它具有相同的结构和greeting()方法，但具有不同的name、breed和color。 - 调用两个
greeting()方法，以检查它们是否在控制台记录了适当的问候语。
js
const cat = {
name: "Bertie",
breed: "Cymric",
color: "white",
greeting: function () {
console.log("Meow!");
},
};
// Don't edit the code above here!
// Add your code here
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
// ...
// Don't edit the code above here!
const cat2 = {
name: "Elfie",
breed: "Aphrodite Giant",
color: "ginger",
greeting: function () {
console.log(`Hello, said ${this.name} the ${this.breed}.`);
},
};
cat.greeting();
cat2.greeting();
对象基础 4
在您为任务 3 编写的代码中，greeting() 方法和属性被定义了两次，每个猫一次。这并不理想：特别是，它违反了一个称为 DRY（不要重复自己）的编程原则。在此任务中，我们将改进代码，使对象成员只定义一次。
完成任务
- 创建一个 JavaScript 类来定义猫实例。
- 使用您的类和
new关键字创建cat和cat2实例。
js
const cat = {
name: "Bertie",
breed: "Cymric",
color: "white",
greeting: function () {
console.log(`Hello, said ${this.name} the ${this.breed}.`);
},
};
const cat2 = {
name: "Elfie",
breed: "Aphrodite Giant",
color: "ginger",
greeting: function () {
console.log(`Hello, said ${this.name} the ${this.breed}.`);
},
};
// Don't edit the code below here!
cat.greeting();
cat2.greeting();
点击此处显示解决方案
你完成的 JavaScript 应该看起来像这样
js
class Cat {
constructor(name, breed, color) {
this.name = name;
this.breed = breed;
this.color = color;
}
greeting() {
console.log(`Hello, said ${this.name} the ${this.breed}.`);
}
}
const cat = new Cat("Bertie", "Cymric", "white");
const cat2 = new Cat("Elfie", "Aphrodite Giant", "ginger");
// Don't edit the code below here!
// ...