JavaScript常用对象Array

Posted 2020-07-02 Easy-Sir

Array类型几乎是javascript中最常用的类型了。JavaScript中数组的概念与Java，C中类似，但有两点需要强调：

1、Array中每一项保存的数据类型可以不同。例如第一项保存一个字符串数据，第二项保存一个数值等。

2、Array数组的长度是可以动态调整的。也就是可以随时对一个数组增添新的内容。

• Array对象的创建
• Array对象的访问、添加元素
• Array对象转换为字符串
• Array对象的栈方法及队列方法
• Array对象的排序方法

Array对象的创建

使用Array构造函数

var colors = new Array()  //创建一个空数组
var colors = new Array(20)  //创建一个长度为20的数组
var colors = new Array("red", "blue", "black")  //创建一个长度为3的数组，元素分别为red，blue，black

使用数组字面量

var colors = []  //创建一个空数组
var colors = ["red", "blue", "black"]  //创建一个长度为3的数组，元素分别为red，blue，black

Array对象的访问、添加元素

Array通过下标来访问，修改，添加。需要注意的是，下标从0开始。

例如：

var colors = ["red", "blue", "black"];
var col1 = colors[0];

colors[2] = "gray";
var col2 = colors[2];

colors[5] = "white";
var col3 = colors[4];
var col4 = colors[5];

以上代码，首先定义一个长度为3的数组，元素分别为red，blue，black。

通过下标访问，cor1值为”red”。

第三行，通过下标访问修改color[2]，将”black”修改为”gray”。col2为”gray”。

5行，直接将colors[5]赋值为”white”，则此时数组长度colors.length 值为 6

colors[5]值为”white”，中间未被赋值的colors[3]、colors[4]值为undefined。colors[5]为”white”。

另外需要说明的是，数组对象的length属性并非为一个只读属性，而是一个可以动态修改的属性，例如我们将以上colors的length值改为6：

colors.length = 6;

则此时，数组长度变为6，colors[3]~colors[5]均为undefined。

我们还可以利用数组length属性以及数组访问从0下标开始这一特性，方便地添加数组元素：

var colors = [];
colors[length] = "red";
colors[length] = "blue";

Array对象转换为字符串

每个对象都有toString()，toLocaleString()以及valueOf()方法。

数组对象的toString()方法会返回数组每个元素字符串形式加逗号分隔开的字符串。

例如：

  var colors = ["red", "blue", "black"];
  alert(colors.toString());

会输出：

red,blue,black

实际上，在调用数组的toString()方法时，在获取每个元素的字符串形式时，会自动调用该元素的toString()方法。

我们来看一段具有启发性意义的代码：

var obj1 = {
    name : "hello world!",
    toString : function() {
      return "MyToString";
    }
};

var obj2 = {
    name : "hello world!"
};

var obj = [obj1, obj2];

alert(obj.toString());

得到以下输出：

我们看到，为了得到数组对象的toString字符串，自动调用了每个元素的toString()方法。最后拼接成一个以逗号分隔的字符串。对于obj1元素，调用了我们重写的toString()方法，obj2则是默认toString()方法。

数组对象的toLocaleString()方法一样，也会将每个数组元素转换为字符串形式，然后以逗号分隔，拼接成一个总的字符串。与toString()方法不同的是，为了得到每个元素的字符串，会去调用元素的toLocaleString()方法，我们将以上代码稍作修改：

var obj1 = {
    name : "hello world!",
    toString : function() {
      return "MyToString";
    },
    toLocaleString : function() {
      return "MyToLocaleString";
    }
};

var obj2 = {
    name : "hello world!"
};

var obj = [obj1, obj2];

alert(obj.toLocaleString());

得到以下输出：

Array对象的栈方法及队列方法

我们知道栈是一种“后进先出”的数据结构，队列是一种“先进先出”的数据结构。JS为了使我们能够像栈和队列一样使用数组对象，提供了以下方法：

push()
pop()
shift()
unshift()

push()和pop()方法

push(obj)方法实际上就是在数组的末尾加上参数obj指定的元素，同时返回push后数组的length。

pop()方法实质上是在数组末尾取出“栈上层”元素，然后将数组长度减1，同时返回取出的最上层元素。

这两个操作的封装，就可以让我们像使用栈一样去使用数组。例如：

  var colors = [];  //创建一个空栈
  var i = colors.push("red", "blue");  //将"red"，"blue"入栈，i为入栈后栈长，值为2

  var col1 = colors.pop();  //出栈，返回栈顶元素"blue"

shift()和push()方法

push()方法可以在数组的末尾添加元素，而这里shift()方法则在数组头部取出元素，同时将数组长度减1，返回数组头部的元素。

配合push()以及shift()使用，可以使我们像操作队列一样操作数组对象：

  var colors = [];  //创建一个空队列
  var i = colors.push("red", "blue");  //将"red"，"blue"加入队列，i为新队列长，值为2

  var col1 = colors.shift();  //取出数组头部元素，此时col1值为"red"。colors.length值为1

unshift()和pop()方法

unshift(obj)的作用为在数组头部添加元素obj，并返回新数组的长度。用法和push()类似，配合pop()使用，可以将数组对象作为一个反向队列来使用。

Array对象的排序方法

Array常用的排序方法有reverse()以及sort()方法。

reverse()方法就是单纯地将数组元素反序，适用范围比较受限。

sort()方法使用较广，默认的sort()方法，会调用数组每个元素的toString()方法，然后比较得到的每个字符串，小的在前，大的在后。然而这种方法会有比较强的局限性，例如：

  var nums = [1, 2, 12, 4, 21];
  nums.sort();

将nums每个元素转换为字符串，分别得到1,2,12,4,21的字符串形式，对其字符串形式进行比较会得到以下的排序结果：

将数值作为字符串来比较往往得不到我们希望的结果，由此sort()方法可以接受一个比较函数作为参数，然后根据比较函数来对数组进行排序。比较函数的规则：

比较函数应该接受两个参数，如果希望第一个参数排在第二个参数之前，返回一个负数。如果希望第一个参数排在第二个参数之后，返回一个正数，如果认为两个参数相等，返回0.

例如我们希望按照数值升序进行排序时，可以构造如下比较函数：

  function numcomp(num1, num2) {
    //当num1较小时，我们希望num1排在前面
    if(num1 < num2) return -1;
    //当num1较大时，我们希望num1排在后面
    if(num1 > num2) return 1;

    if(num1 == num2) return 0;
  }

或者简单地写为：

  function numcomp(num1, num2) {
    return num1 - num2;
  }

使用上面的比较函数作为参数即可实现数值的升序排列：

  var nums = [1, 2, 12, 4, 21];
  nums.sort(numcomp);
  alert(nums);