JavaScript - 对象:初学者的指南

你好,有抱负的程序员们!我很高兴能成为你在这个激动人心的JavaScript对象世界中的向导。作为一个教编程多年的过来人,我可以告诉你,理解对象就像是解锁了JavaScript中的秘密超级能力。那么,让我们开始吧!

JavaScript - Objects

JavaScript对象是什么?

想象你在描述你的宠物狗。你可能会说它有一个名字、年龄、品种和最喜欢的玩具。在JavaScript中,我们可以将这只狗表示为一个对象,所有这些特征作为它的属性。让我们创建我们的第一个对象:

let myDog = {
name: "Buddy",
age: 3,
breed: "金毛",
favoriteToy: "吱吱球"
};

这就是我们所说的对象字面量。它就像是一个持有相关信息的容器。每一条信息都是一个属性,有一个名字(如"name"或"age")和一个值(如"Buddy"或3)。

对象属性

现在我们有了myDog对象,我们如何访问它的属性呢?有两种方式:

  1. 点语法:

    console.log(myDog.name); // 输出:Buddy
  2. 括号语法:

    console.log(myDog["age"]); // 输出:3

两者做同样的事情,但括号语法在你需要将属性名存储在变量中或属性名含有空格时很方便。

我们还可以向我们的对象添加新属性:

myDog.isGoodBoy = true;
console.log(myDog.isGoodBoy); // 输出:true

或者修改现有的属性:

myDog.age = 4;
console.log(myDog.age); // 输出:4

对象方法

方法是属于对象的函数。它们就像是我们对象可以执行的动作。让我们向我们的myDog对象添加一个方法:

myDog.bark = function() {
console.log("汪汪汪!");
};

myDog.bark(); // 输出:汪汪汪!

现在我们的狗可以叫了!这难道不酷吗?

创建新对象

我们已经看到了如何使用对象字面量创建对象,但还有一种使用Object()构造函数的方法:

let myCat = new Object();
myCat.name = "Whiskers";
myCat.age = 5;
myCat.meow = function() {
console.log("喵喵!");
};

myCat.meow(); // 输出:喵喵!

这种方法不太常见,但知道它存在是有用的。

为对象定义方法

我们可以在创建对象时定义方法,就像我们处理属性一样:

let myParrot = {
name: "Polly",
age: 2,
speak: function() {
console.log("Polly想要饼干!");
}
};

myParrot.speak(); // 输出:Polly想要饼干!

还有一种简写方式来定义方法:

let myHamster = {
name: "Fuzzy",
age: 1,
run() {
console.log("在轮子上跑步!");
}
};

myHamster.run(); // 输出:在轮子上跑步!

'with'关键字

当你在同一对象上多次使用属性时,with关键字可以使你的代码更短:

with(myDog) {
console.log(name);
console.log(age);
bark();
}

然而,要小心使用with,因为它会使你的代码变得不那么清晰,并且在严格模式下不推荐使用。

JavaScript内置对象

JavaScript带有几个内置对象,它们提供了有用的功能。以下是一些最常见的内容:

对象 描述
String 表示和操作文本
Number 表示数值
Boolean 表示true/false值
Array 表示一系列值
Math 提供数学运算
Date 表示日期和时间

让我们看一些例子:

let greeting = "Hello, World!";
console.log(greeting.length); // 输出:13

let pi = Math.PI;
console.log(pi); // 输出:3.141592653589793

let today = new Date();
console.log(today); // 输出:当前日期和时间

JavaScript对象方法

JavaScript中的对象带有一些内置方法。以下是一些重要的方法:

方法 描述
Object.keys() 返回一个包含对象所有属性名的数组
Object.values() 返回一个包含对象所有属性值的数组
Object.entries() 返回一个包含对象所有[key, value]对的数组
Object.assign() 将一个对象的属性复制到另一个对象

让我们看看这些方法的使用:

let keys = Object.keys(myDog);
console.log(keys); // 输出:["name", "age", "breed", "favoriteToy", "isGoodBoy", "bark"]

let values = Object.values(myDog);
console.log(values); // 输出:["Buddy", 4, "Golden Retriever", "squeaky ball", true, ƒ]

let entries = Object.entries(myDog);
console.log(entries); // 输出: [["name", "Buddy"], ["age", 4], ...]

let newDog = Object.assign({}, myDog);
console.log(newDog); // 输出:myDog的副本

就是这样!你已经迈出了进入JavaScript对象世界的第一步。记住,熟能生巧,所以不要害怕实验创建你自己的对象和方法。在你意识到之前,你将像专业程序员一样轻松处理对象!

快乐编码,愿你的对象永远无bug!

Credits: Image by storyset