JS引用类型之Object和Array

发表于 | 分类于 | 浏览 次

本篇介绍了关于JavaScript中的引用类型——Object和Array

引用类型的值是引用类型的一个实例。引用类型是一种数据结构，用于将数据和功能组织在一起。尽管ECMAScript从技术上讲是一门面向对象语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构。

Object类型

创建Object实例的方式

1.使用new操作符后跟Object构造函数

1
2
3
var person = new Object();
person.name = "John";
person.age = 29;

2.对象字面量方式

1
2
3
4
var person = {
  name:"John",
  age :29
}

在使用对象字面量方式定义对象时，实际上不会调用Object构造函数。

访问对象属性

1.点表示法

1
2
3
4
5
var person = {
  name:"John";
}
alert(person.name); //John

2.方括号表示法

1
2
3
4
5
var person = {
  name:"John";
}
alert(person["name"]); //John

使用方括号语法时，应该要将要访问的属性以字符串的形式放在方括号中。
从功能上看，这两种访问对象属性的方法没有任何区别。但方括号语法的主要优点时可以通过变量来访问属性，例如：

1
2
3
4
5
var person = {
  name:"John";
}
var properName = "name";
alert(person[properName]); //John

如果属性名中包含会导致语法错误的字符，或者属性名使用关键字或保留字，也可以使用方括号表示法。例如：

1
person["first name"] = "John";

Array类型

ECMAScript数组的每一项可以保存任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二个位置来保存数值，用第三个位置来保存对象。

创建数组的基本方式

1.使用Array构造函数

1
var colors = new Array();

在使用Array构造函数时也可以省略new操作符：

1
var colors = Array();

2.使用数组字面量方法

1
var colors = ["red","blue","green"];

在使用数组字面量方式表示时，也不会调用Array构造函数。

数组length属性的特点

数组length属性的特点——不是只读的，因此通过设置这个属性，可以从数组的末尾移除或者向数组中添加新项。

移除：

1
2
3
var colors = ["red","blue","green"];
colors.length = 2;
alert(colors[2]);     //undifined

添加：

1
2
3
var colors = ["red","blue","green"];
colors[colors.length] = "black";
colors[colors.length] = "brown";

检测数组

1. instanceof

对于一个全局作用域而言，使用instanceof操作符就能得到满意的结果：

1
2
3
if(value instanceof Array){
  //对数组执行某些操作
}

instanceof操作符的问题在于，它假定只有一个全局执行环境。

2. Array.isArray()方法

ECMAScript5新增了Array.isArray()方法

转换方法

所有对象都具有toLocaleString()、toString()和valueOf()方法，其中调用toString方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分割的字符串。而调用valueOf方法返回的还是数组。

1
2
3
4
var colors = ["red","blue","green"];
alert(colors.toString());  //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors);  //red,blue,green

由于alert要接收字符串参数，所以它会在后台调用toString()方法，由此会得到于直接调用toString()方法相同的结果。

重排序方法

  • reverse()：反转数组项的顺序

    1
    2
    3
    var values = [1,2,3,4,5];
    values.reverse();
    alert(values); //5,4,3,2,1

  • sort()
    默认升序排序数组，它会调用每个数组的toString方法，然后比较得到的字符串，但它存在一个问题，如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序，所以，经常在sort方法内接收比较函数来进行比较：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function compare(value1,value2){
      if(value1 < value2){
        return -1;
      }else  if(value1 > value2){
        return 1;
      }else{
        return 0;
      }
    }

通常更常用的是通过返回值进行排序：

1
2
3
4
5
return a - b;
//a<b返回负数，b在a的后面；a>b返回正数，a在b的后面。=>比较大在后面
(2)return b - a;
//b<a返回负数，a在b的后面；b>a返回正数，b在a的后面。=>比较小在后面

操作方法

  • concat()方法：先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组
  • slice()方法：基于当前数组中的一项或多项创建一个新数组。
    如果slice方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。例如，在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)结果相同。如果结束位置小于起始位置，则返回空数组。
  • splice()方法：向数组的中部插入项。

使用方式有如下三种：
1.删除：需指定两个参数例如：splice(0,2)是删除数组中的前两项
2.插入：需提供三个参数：起始位置、要删除的项数和要插入的项。
例如：splice(2,0,”red”,”green”);会从当前数组的位置2的项开始插入“red”和“green”
3.替换：splice(2,1,”red”,”green”)会删除从2位置开始的一项并从2位置开始插入“red”和“green”。

位置方法

  1. indexOf()
    两个参数：要查找的项，（可选）表示查找起点位置的索引。从数组的开头开始向后查找
  2. lastIndexOf()
    两个参数：要查找的项，（可选）表示查找起点位置的索引。从数组的末尾开始向前查找

迭代方法

  • every()：对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true。
  • filter()：对数组中的每一项运行给定的函数，返回该函数会返回true的项组成的数组。
  • forEach()：对数组中的每一项运行给定的函数，没有返回值。
  • map()：对数组中的每一项运行给定的函数，返回每次函数调用的结果组成新的数组。
  • some()：对数组中的每一项运行给定的函数，如果该函数对任一项返回true，则返回true

    归并方法

    reduce()和reduceRight()方法，这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。其中reduce()方法从数组的第一项开始，而reduceRight()方法则从数组的最后一项开始。

接收四个参数：前一个值、当前值、项的索引和数组对象。

1
2
3
4
5
6
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev,cur,index,array){
  return prev+cur;
})
alert(sum);  //15