Javascript 引用类型（Object Array）

ECMAScript中，引用类型是一种数据结构，用来描述对象的属性和方法。对象则是某个引用类型的实例，可用new操作符跟一个构造函数创建新对象。

Object 类型

创建Object实例：

构造函数
var cat = new Object();
cat.name = "cat";
var cat = Object();
cat.name = "cat";
对象字面量
var cat = {
  name: "cat"，
  "age": 18
}

使用这种方式创建不会调用Object()构造函数
属性名之间用逗号相隔，最后一个属性后面不应该有逗号，属性名可以是字符串。
书中还提到了当需要向一个函数中传入大量可选参数时（可选参数可以是函数更加灵活），使用对象字面量是一个很好的选择，因为它不仅代码简单，也可以显示封装性，例如:

function displayInfo(args) {
  var output = "";
  if (typeof args.name == "string"){
    output += "Name: " + args.name + "\n";
  }
  if (typeof args.age == "number") {
    output += "Age: " + args.age + "\n";
  }
  alert(output);
}
displayInfo({
  name: "Nicholas",
  age: 29
});
displayInfo({
  name: "Greg"
});

访问对象属性

使用两种方式可以访问对象属性：

  • 点表示法
  • 方括号
    比如：
cat.name;
cat["name"];

当对象名是变量，或包含会引起语法错误的字符（比如空格），或者包含非字母非数值时，只能使用方括号（书中还提到了关键字和保留字，笔者记得它们只是不能用作标识符，而且试了好多，发现都可以作为属性名），比如：

var key = "name";
cat[key]; // cat
cat["&key"] = "key"];
cat["&key"]; / /key
cat["first name"] = "cat";
cat["first name"]; // cat

Array 类型

ECMAScript数组每一项可以保存任何类型的数据，大小可以动态调整，之后会举相应的例子。

创建数组

构造函数
var array1 = new Array();
var array2 = new Array(10);
var array3 = Array();
var array4 = new Array("sue", 18, {"birth": "1993-10-24"});

由上述例子可以看出，使用构造函数创建数组时，可以不传参，即创建一个空数组（长度为0），可以传入不小于0的整数作为长度，可以不使用new操作符，每一项都可以使用任何数据类型。

数组字面量
var array1 = []; //empty array, length 0
var array2 = ["first", "second", "third"];

使用这种方式创建不会调用Array()构造函数
由于IE8及之前版本与其他浏览器表现不一致，不建议使用以下方式创建：

var array3 = [1, 2,];//IE 8 length is 3; other, length is 2
var array4 = [,,,,]; //IE 8 length is 5; other, length is 4

访问数组

var array = [1, 2, 3];
array[0]; //1
array[2] = 4; // 4
array[2]; // 4
array[5] = 10; // 10
array[5]; //10
array.length; //6
array.length = 10; // 10
array[9]; // undefined
array.length = 1;
array[1]; // undefined
array[12]; //undefined

由上述例子可以看出，数组的索引是从0开始的，最后一个值的索引为length-1，如果给索引超出length-1的数组项赋值，那么数组长度会延长至index+1，如果直接更改数组长度，可以在末尾移除项或添加项，可以通过给指定项赋值来改变指定项的值，如果读取索引超出length-1的数组项，将返回undefined，可以使用以下方式在数组的末尾添加一项：

var array = [1,2,3];
array[array.length] = 4;
array[3]; //4

数组中最多可以包含4 294 967 295项。

检测数组

instanceof

如果要判断的数组与Array构造函数拥有同一个全局作用域，我们可以使用

var array = [1, 2, 3];
array instanceof Array; // true

我们知道，instanceof其实是做了如下判断：

array.constructor==Array

举个例子：
index.html（部分）

<iframe name="childframe" src="Child.html"></iframe>
<script type="text/javascript">
   window.onload = function () {
    array= [1, 2, 3];
    var result = window.frames[0].search(array);
    console.log(window.frames[0].window === window); //false
};
</script>

child.html（部分）

<script type="text/javascript">
  search: function (array) {
    var result = array instanceof Array;
    console.log(result, array.constructor === Array); // false, false
  }  
</script>

可以看出index.html中的window与Child.html中的window并不相同，那么array也不是Child.html中Array的实例。

Array.isArray()

在IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome，这些浏览器中，为了解决上述问题，新增了Array.isArray()方法

var array = [1, 2, 3];
Array.isArray(array); // true
prototype.call()
Object.prototype.toString.call(array)=='[object Array]'

转换方法

toString

调用每一项的toString()方法，然后用逗号连接起来。

array.toString(); //"1,2,3"
valueOf

不进行转换，返回原数组

toLocaleString

调用每一项的toLocaleString()方法，然后用逗号连接起来。

join

调用每一项的toString()方法，然后使用给定字符连接起来。

array.join(); //"1,2,3"
array.join("||"); //"1||2||3"

undefined和null项在toString() toLocaleString() valueOf时，变成空值""。

栈方法

提供了模拟栈数据结构先入后出规则的两个方法。

pop

移除数组的最后一项，使数组的长度减1，并返回被移除的项。

push

向数组尾部添加任意数量的项，并返回数组长度。

var array = [1, 2, 3];
array.push(4, 5); //5
array.pop(); //5

队列方法

提供了模拟队列数据结构先入先出访问规则的两个方法。

正向队列 shift() + push()

shift()可以移除数组的第一项，并返回该项。

反向队列 unshift() + pop()

unshift()可以在数组前端插入任意个数的项并返回新数组的长度。

重排序

reserve()

将数组反转，比如：

var array = [1, 2, 3];
array.reverse(); // [3, 2, 1]
sort()

由于reverse只能单一地将数组反转，不够灵活，因此又有了sort()。默认情况下，sort()按从小到大的顺序给数组排序，排序时，首先对每一项执行toString()，然后比较字符串的大小，即sort()无论何时都是在比较字符串大小，即使数组项里全是数值。

var array = [1, 2, 10, 3, 23];
array.sort(); // [1, 10, 2, 23, 3]

sort()可以接收比较函数为参数来指定比较逻辑，比较函数接收两个参数，当第一个应该在第二个之后时，返回大于0的数值，两者相等时，返回0，第二个应该在第二个之前时，返回小于0的数值，比如我们声明一个可以按数值由大到小排序的比较函数：

function compare(num1, num2) {
  if(num1 > num2) {
    return 1;
  } else if(num1 === num2) {
    return 0;
  } else {
    return -1;
  }
}
array.sort(compare); // [1, 2, 3, 10, 23]

当数据项全部是数值或者对每一项调用其valueOf()方法都返回一个数值，那么我们可以简化以上逻辑：

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

操作方法

concat
  • 如果不带参数，返回当前数组的拷贝（新数组）
  • 如果参数为数组，首先拷贝当前数组，然后将参数与当前数组连接生成新数组
  • 如果参数不是数组，首先拷贝当前数组，然后将参数放到新数组的末端。
    concat()在拷贝出来的新数组进行操作，不会影响到原数组，举几个例子：
var array = [1, 2, 3];
array.concat(); // [1, 2, 3]
array.concat([2,3,4]); // [1, 2, 3, 2, 3, 4];
array.concat(5); // [1, 2, 3, 5]
array.concat(4, 5, [6, 7, 8]); //[1,2 ,3, 4, 5, 6, 7, 8]);
array; //[1, 2, 3]
slice

slice()基于给定数组的片段返回新数组，不会影响原来的数组。

  • 如果传入一个参数，则截取从给定位置开始，到数组末尾的所有项
  • 如果有两个参数，则它们分别作为起始位置，返回之间（包括起始项但不包括结尾项）的所有项。如果参数为负数，则使用数组长度加上这个负数来替代这个参数
var array = [1, 2, 3];
array.slice(2); // [3]
array.slice(3); // []
array.slice(0, 2); // [1, 2]
array.slice(3, 2); //[]
array.slice(-3, -2); //相当于array.slice(0, 1) 返回[1]
array; //[1, 2, 3]
splice
  1. 删除项。指定两个参数，即删除的起始位置(如果项数大于0，起始位置是被第一个删除的项）和删除的项数，返回被删除的项组成的数组。
  2. 插入项。指定多个参数，第一个是插入的开始位置（第一个插入项将获得的索引位置）、0（删除0项）、插入的项（可多个）。
  3. 替代项。指定多个参数，第二个是替代的开始位置、删除的项数、插入的项（可多个，插入项的数量不用跟删除项数保持一致）。
    以上方法返回的都是被删除的项组成的数组，举一些例子：
var array = [1, 2, 3, 4];
array.splice(0, 1); // [1]
array; //[2, 3, 4]
array.splice(1, 0, 4, 5); //[]
array; //[2, 4, 5, 3, 4]
array.splice(2, 2, 7, 8, 9); //[5, 3]
array; //[2, 4, 7, 8, 9]

位置方法

indexOf

从数组开头向后查找

lastIndexOf

从数组末尾向前查找
二者都接收2个参数，查找的项，和查找起点（可选），如果找不到，返回-1，只要找到与查找项全等的项，则返回其索引。

var array = [1, 2, 3, 4, 3];
array.indexOf(3); //2
array.lastIndexOf(3); //4
array.indexOf(3, 3); //4
array.indexOf(3, 2); //2
array.lastIndexOf(3, 1); // -1
array.lastIndexOf(3, 3); //2

支持这两个方法的浏览器包括：IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。

迭代方法

以下每个方法接收两个参数，第一个是对每一项执行的函数，第二个是该函数的this（作用域），该函数接收三个参数，第一个是当前项，第二个是当前项的索引，第三个是数组。

every()

对每一项运行给定函数，如果都返回true，则返回true。

some()

对每一项运行给定函数，如果存在返回true的项，则返回true。

filter()

对每一项运行给定函数，返回该函数会返回true 的项组成的数组。

forEach()

对每一项运行给定函数，无返回值。

map()

对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
支持这些迭代方法的浏览器有IE9+、Firefox 2+、Safari 3+、Opera 9.5+和Chrome。
举一些例子：

function function1(value, index, array) {
  return value > 2;
}
function function2(value, index, array) {
  return value * 2;
}
function function3(value, index, array) {
  array[index] = value * 2;
}
var array = [1, 2, 3, 4, 5];
array.every(function1, this); // false
array; // [1, 2, 3, 4, 5]
array.some(function1, this); // true
array; // [1, 2, 3, 4, 5]
array.filter(function1, this); // [3, 4, 5]
array; // [1, 2, 3, 4, 5]
array.forEach(function2, this); //undefined
array; //[1, 2, 3, 4, 5]
array.map(function2, this); //[2, 4, 6, 8, 10]
array; //[1, 2, 3, 4, 5]
array.forEach(function3, this); // undefined
array; [2, 4, 6, 8, 10]

这五个方法传入的函数都可以获取整个数组和相应的索引，都是可以更改数组的。

归并方法

以下两个方法都会遍历数组所有项，得出最后一个返回值

  • reduce()从第一个遍历到最后
  • reduceRight()从最后一个遍历到第一个
    两个方法都接收两个参数，对每一项执行的函数，归并初始值（可选），传入的函数接收四个参数，前一项的值，当前项的值，index，数组，函数每次执行的返回值都将作为下一次执行的第一个参数，第一次迭代发生在第二项，即第一个参数是第一项，第二个参数是第二项。
    举一个求和的例子：
function sum(preV, curV, index, array) {
  return preV + curV;
}
var array = [1, 2, 3, 4];
array.reduce(sum); //10

支持这两个归并函数的浏览器有IE9+、Firefox 3+、Safari 4+、Opera 10.5 和Chrome。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,723评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,003评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,512评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,825评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,874评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,841评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,812评论 3赞 416
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,582评论 0赞 271
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,033评论 1赞 308
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,309评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,450评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,158评论 5赞 341
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,789评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,409评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,609评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,440评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,357评论 2赞 352