数组与对象

有时我们需要在一个变量中存储多个值,类似于列表那样,于是就有了数组类型;有时我们需要在一个变量中存储类似键值对的数据,于是就有了对象这个数据类型。

我们对存储数据的需求在各个开发语言里都是一样的,所以各类开发语言就有了非常近似的数据结构来存储这些数据。JavaScript的对象类似于Python的字典,PHP的关联数组,名称不一样,但是用法、目的都比较近似。

数组入门

要了解数组,首先我们来创建数组,可以在main.js里输入以下代码,然后使用浏览器打开index.html,查看控制台的log来进行实战。

创建数组

创建数组有两种方法,一种是比较传统的方法使用new关键词 +Array()函数来构造一个数组:

还有一种是数组字面量(array literal)法,这种方法更简洁,后面我们也以此为例:

 

输出数组的数据

数组有点类似于列表,我们可以通过索引来给数组赋值,也可以通过索引来输出数组的数据,数组都带有length的属性,也就是数组中元素的个数。

操作数组

数组自带了很多方法,我们可以打开技术文档,在技术文档左侧可以看到对应的方法,而操作数组的实战也和上面一致都是在main.js里输入代码,在控制台的log查看效果。

技术文档:JavaScript 数组对象

删除元素:pop()和shift()

pop()方法会删除并返回数组的最后一个元素,而且也改变的原来数组的length,我们可以再输出数组发现少了最后一个元素。

shift()方法和pop()方法很像,它是删除并返回数组的第一个元素

 

添加元素:push()和unshift()

push()方法是向数组的末尾添加一个或更多元素,并返回新的长度。而unshift()方法向数组的开头添加一个或更多元素,并返回新的长度。

 

元素排序:sort()和reverse()

sort()让数组元素进行正序排序,reverse()颠倒元素排序。

splice方法

splice() 方法可以从指定的索引开始删除元素并返回删除的元素,然后再从该位置添加元素。

我们可以通过不断的console.log()来输出数组执行了splice()方法之后的值。

数组遍历

数组遍历的三种方法

对象入门

对象(object)是 JavaScript 语言的核心概念,也是最重要的数据类型。对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性方法)。

创建对象

我们同样可以在main.js里输入代码,然后在index.html的控制台查看代码效果来进行实战。

创建对象主要有三种方法,一是通过new关键词+Object()函数来构造对象;二是使用Object.create()函数,三是使用对象字面量(object literal)法,推荐使用第三种方法。

第三种方法和我们之前在小程序开发里接触的JSON语法是一致的。JSON语法简要回顾:

  • 字段key(或者叫name)与值value之间用冒号:隔开;一组字段key和值value就是对象的属性property
  • 大括号{}保存对象、中括号[]保存的是数组;
  • 各个数据之间用逗号,隔开,最后一条数据最好不要有逗号;

一个对象可以包含多条属性和方法,属性我们可以理解为是名词,上面的对象就有4条属性,name、age、gender、interests;而方法我们之后会在JavaScript函数里面介绍,方法可以理解为是动词,是函数。

访问对象的属性

点表示法与括号表示法

我们可以使用点表示法来访问对象的属性和方法。也可以使用括号表示法中括号[]来访问对象的属性,查看下面案例:

 

子命名空间

对象是可以嵌套的,也就是一个对象可以作为另外一个对象的值。下面的family对象就是user对象的子命名空间,那我们应该如何访问子命名空间的值呢?

操作对象

添加和修改对象的属性

我们只需要用点表示法或括号表示法,访问对象的属性,并赋值就能够添加和修改对象的属性。

 

删除对象的属性

使用delete即可删除对象的属性

对象的遍历

前面我们已经了解如何遍历一个数组,我们再来看如何遍历一个对象。

数组里面包含对象

数组里的每个元素可以是不同的数据类型,也可以是一个对象,这个在后面的章节里会经常看到一个数组里的元素都是对象的情况,数组里包含对象,我们该如何获取里面的值呢?我们来看一下实际的案例:

其实数组的数据类型也是Object对象类型,所以我们也常常把数组叫做数组对象,在JavaScript里函数也是对象,所以也常常把函数叫做函数对象。

本节任务

  1. 掌握如何创建数组和创建对象;
  2. 掌握如何操作数组的一些常用的方法
  3. 掌握如何访问对象的属性,给属性赋值,删除属性,以及遍历对象
  4. 掌握如何获取包含对象的数组里面的值