编程最重要的两种变量 -对象和数组

12002

1. 本课介绍

在这一课，你将学习编程中两种最关键的变量类型：对象和数组。我们将深入探讨它们的概念、属性和方法，并了解对象中一种常用的对象，字符串。

本课将通过阅读菜鸟教程上相关的文档以及动手尝试，帮助你理解对象和数组的属性和方法，提升你的学习能力。

2. 认识Javascript对象

在 JavaScript 中，几乎所有的事物都可以看作是对象。对象就像一个容器，可以存放各种信息。比如，我们可以用一个对象来表示一个学生，里面包含了学生的姓名、性别、年龄等信息。

举个例子，我们可以这样表示一个学生对象：

  var student= {
      name : "小红",
      gender : "女生",
      age :"8岁"
      };

对象的属性

在上面的例子中，我们定义了一个名为 student 的对象，其中包含了学生的姓名、性别和年龄。如果你想为 student 再添加一个“年级”的信息，可以这样写：

  var student= {
      name : "小红",
      gender : "女生",
      age :"8岁",
      grade : "二年级 "
      };

在这段代码中，对象的属性就是学生的各种信息。student对象中，name、gender、age和grade都是属性，并且每个属性后面都对应一个值：

• name 属性对应的值是 "小红"；

• gender 属性对应的值是 "女生"；

• age 属性对应的值是 "8岁"；

• grade 属性对应的值是 "二年级 "；

通过对象的属性和相应的值，我们可以访问和操作对象中存储的数据，就像查看一个学生的姓名、年龄或年级信息一样。

访问对象的属性

当我们创建一个对象时，里面会包含很多属性，每个属性对应着不同的值，但有时候我们只想看到其中一种。访问对象的属性就像查看学生的各种信息一样，我们可以通过对象名和属性名来获取特定属性的值。

继续以前面的student对象为例，如果我们想获取学生的姓名，可以这样表示：

student.name;

在这里，student.name 表示访问学生对象 student 的 name 属性，得到的结果就是属性对应的值，也就是学生的姓名。

现在来尝试一下：

1. 先创建一个HTML文件student属性.html，然后把以下这段代码，复制粘贴进这个文件里：

<p>访问对象属性</p>
<p id="demo"></p>
<script>
    var student = {
        name: "小红",
        gender: "女生",
        age: "8岁",
        grade: "二年级 "
    };
    document.getElementById("demo").innerHTML = "学生姓名：" + student.name;
</script>

2. 保存文件后，用浏览器打开，你会看到页面显示以下的内容：

3. 继续尝试，将student属性.html中代码删除，把以下这段代码，复制粘贴进这个文件里：

<p>访问对象属性</p>
<p id="demo"></p>
<script>
    var student = {
        name: "小花",
        gender: "女生",
        age: "12岁",
        grade: "六年级 "
    };
    document.getElementById("demo").innerHTML ="学生姓名：" + student.name;
</script>

4. 保存文件后，用浏览器打开，你会看到页面显示以下的内容：

访问对象的属性是一种重要的操作，它就像查找学生信息一样简单。只需使用对象名和属性名，我们就可以轻松地访问对象的各个属性，以获取对象中存储的信息。

更多尝试：

1. 通过访问student对象属性，运行结果得到"学生年龄：8岁"。
2. 读菜鸟教程文档，使用另一种访问对象属性的方法，得到学生姓名和学生年龄。

对象的方法

除了属性外，对象还可以包含方法。方法就是对象可以执行的操作，也就是一个函数。

对象的方法既可以访问对象的属性，也可以让对象完成各种操作，实现我们想要的功能。

举个例子，前面我们通过访问student对象的属性，获取了学生的姓名、年龄等数据；现在，我们要为student对象添加一个方法，通过调用它来获取学生的姓名，可以这样表示：

name = student.studentName();

这行代码中，我们给student对象添加了一个studentName()方法，从而获取学生的姓名。

调用对象的方法

在调用对象的方法之前，我们先学习如何创建对象方法。我们需要先创建函数studentName()，语法如下：

studentName : function(){
 // 代码，即你要执行的操作
}

我们要使studentName()被调用后，能够获取学生的姓名。现在来尝试一下：

1. 先创建一个HTML文件student方法.html，然后把以下这段代码，复制粘贴进这个文件里。注意：" return "学生姓名：" + this.name ; " 就是我们要执行的操作。

<p>创建和使用对象方法</p>
<p id="demo"></p>
<script>
var student = {
    name: "小红",
    gender : "女生",
    age : "8岁",
    studentName : function()
    {
       return "学生姓名：" + this.name ;
    }
};
document.getElementById("demo").innerHTML = student.studentName();
</script>

2. 保存文件后，用浏览器打开，你会看到页面显示以下的内容：

3. 继续尝试，将代码中的学生名字改成"小明"：

<p>创建和使用对象方法</p>
<p id="demo"></p>
<script>
var student = {
    name: "小明",
    gender : "女生",
    age : "8岁",
    studentName : function()
    {
       return "学生姓名：" + this.name ;
    }
};
document.getElementById("demo").innerHTML = student.studentName();
</script>

4. 保存文件后，用浏览器打开，你会看到页面显示以下的内容：

调用对象的方法，就是执行在对象中添加的一个函数。在这个例子里，我们通过调用studentName()方法来获取学生的姓名，同样的，也可以添加其他的方法来操作对象中的数据，实现各种功能。

更多尝试：

1. 在student对象中添加一个studentAge()方法来获取学生的年龄，运行结果得到"学生年龄：8岁"。
2. 读菜鸟教程文档，尝试把studentName()的括号去掉，写成studentName，输出的结果是什么。

3. 读文档，学习JavaScript字符串

接下来，我们通过阅读菜鸟教程文档来学习JavaScript 字符串，这将帮助你更加深入的理解对象的概念和用法。

首先理解一下字符串的概念：在JavaScript中，字符串是一种常用的对象，它由字符组成的序列，用于存储和操作文本数据。你可以将字符串看作是一个由字符构成的单词、句子或段落。

创建一个字符串

在JavaScript中，可以使用单引号（'）或双引号（"）来定义字符串，它们通常是等效的。我们可以创建一个字符串 string 如下：

  var string = 'Hello World';

这里的string是一个字符串，包含了文本数据"Hello World"。字符串可以包含字母、数字和特殊字符，用于表示各种文本信息。

字符串索引访问

在字符串中，索引访问是一个重要的概念。通过索引，你可以访问字符串中的每个字符，其中索引从0开始，即第一个字符的索引为[0]，第二个字符的索引为[1]，以此类推。例如，要访问字符串对象string中的第一个字符：

var string = "Hello World";
let letter = string[0];
document.getElementById("demo").innerHTML = letter;

复制上面的代码，打开菜鸟教程的代码编辑页面 - JavaScript 字符串索引。尝试一下，看看输出的字符是什么；再修改索引值，看看输出的字符有什么变化。

字符串常用属性length

在字符串中，常用到属性 length 来计算字符串的长度。它可以快速获取字符串中字符的个数，这对于处理字符串、循环遍历字符串中的字符等操作非常有用。

复制上面的代码，使用菜鸟教程的代码编辑页面 - JavaScript字符串 length。修改里面的示例代码，增加或者删除一些字符，看看输出的结果有什么变化。

字符串的属性和方法

除了属性length之外，字符串还有很多是属性和方法。学习字符串的属性和方法是掌握JavaScript编程中重要的一部分。接下来，你可以通过阅读菜鸟教程文档或者其他学习资料，尝试一下字符串其他属性及字符串常用方法的用法。

参考资料：

• JavaScript 字符串
• JavaScript String 对象

阅读菜鸟教程文档并实践代码是学习JavaScript对象的良好方法。通过阅读文档，初步理解概念，掌握基本操作，然后在实际操作中深入了解对象的属性和方法。这种系统的学习方法不仅有助于建立对JavaScript对象的理解，也可以应用到学习接下来的课程中。

4. 认识数组：一种Javascript对象

我们已经理解了对象的概念，接下来我们继续认识一种特殊的对象：数组。

如果将对象比作一个容器，可以存放各种信息，那么数组则是一种特殊的容器，它存储的数据是相同类型的，并且是有序排列的。

举个例子，我们可以这样创建一个数组students:

  var students= ["小红","小花","小明"];

发现数组students和对象student有什么不同了吗？在数组 students 中，我们存储的都是学生的名字，而在对象 student 中，我们存储了学生的更多信息，包括名字、性别、年龄等。

5. 读文档，了解数组的元素、属性和方法

接下来我们继续通过阅读菜鸟课程文档，更多的了解数组的元素、属性和方法。

数组的元素

前面的例子中，数组students存储了学生的名字："小红","小花","小明"，它们都被称为数组的元素。跟字符串类似，每个元素都在数组中占据一个位置。当使用数组时，有一些基本的操作是常见的，比如访问、修改、添加和删除元素。

• 访问数组的元素

要访问数组中的特定元素，可以使用索引。数组的索引从 0 开始，所以第一个元素的索引是[0]，第二个元素的索引是 [1]，以此类推。现在来尝试一下：

1. 先创建一个HTML文件访问students元素.html，然后把以下这段代码，复制粘贴进这个文件里：

<p>访问数组的元素</p>
<script>
var students= ["小红","小花","小明"];
document.write(students[1]);
</script>

2. 保存文件后，用浏览器打开，你会看到页面显示以下的内容：

• 修改数组的元素

要修改数组中的特定元素，可以直接通过索引来赋新值。比如，我们要把数组students中的第一个元素 "小红"，修改成 "小白"，可以这样操作：

1. 先创建一个HTML文件修改students元素.html，然后把以下这段代码，复制粘贴进这个文件里：

<p>修改数组的元素</p>
<script>
var students= ["小红","小花","小明"];
students[0] = "小白";
document.write("修改后为：" + students);
</script>

2. 保存文件后，用浏览器打开，你会看到页面显示以下的内容：

• 添加和删除数组的元素

在数组中，你可以在任意位置添加和删除元素。我们先以最简单的方法，即在数组的末尾添加 push() 和删除元素 pop() 为例，帮助你更好的理解元素的操作。

先自己尝试运行菜鸟教程中的两个示例：

1. 数组的末尾添加新的元素 - push()
2. 删除数组的最后一个元素 - pop()

修改菜鸟教程的示例：

1. 将示例代码中的数组 fruits 改为 students。

   var students= ["小红","小花","小明"];

2. 使用students.push()方法，在数组 students 末尾添加元素 "小刚"。

3. 使用students.pop()方法，删除数组 students 末尾的元素，只留下"小红"。

数组的属性和方法

当我们学习JavaScript对象时，已经知道了对象拥有属性和方法。类似地，数组是一种特殊的对象，它也具有自己的属性和方法。

比如，与字符串对象类似，数组常用的属性length，也可以查询出数组中有多少元素。

再比如，我们在数组 students 中添加和删除元素，使用到的push()和pop()，就是数组的方法。

想要深入了解数组的属性和方法，最佳方式是去阅读菜鸟教程文档或者其他学习资料。你可以通过更多的操作示例代码，深入了解数组的各种操作。

参考资料：

• JavaScript Array（数组） 对象

• JavaScript Array 对象参考手册