--引用类型》之Object对象和array对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了--引用类型》之Object对象和array对象相关的知识，希望对你有一定的参考价值。
这一章主要就是介绍各种内置对象的用法，认识其经常用到的属性和方法。
5.1Object类型
创建objec的方式，一种是new Object(),一种是对象字面量（简化创建包含大量属性的对象的过程）
var person = { name = "Nicholas"; age = 27 };//最后一个属性不必添加逗号，ie7等会导致错误 //在使用对象字面量语法时，属性名也可以使用字符串。这里的数值属性会自动转字符串。 var person = { "name" : "Nicholas"; "age" : 27; 5 : true }
//var person ={} <=> new Object()
一般来说访问对象的属性有点表示法和方括号表示法（将访问的属性以字符串的形式,优点是可以通过变量来访问属性）
1 alert(person["name"]); 2 alert(person.name); 3 4 var propertyName = ”name"; 5 alert(person[propertyName]); 6 7 /*如果属性名中包含会导致语法错误的字符，或者使用属性名为关键字保留字（不过谁会如此做呢！），也可以使用方括号表示法。通常我们使用点表示法，除非必须使用[]*/ 8 person["first name"]= "Nicholas";
5.2Array类型
ECMAScript数组的每一项可以保存任何类型的数据。大小是可以动态调整的，可以随着数据的添加自动增长以容纳新数据，会自动更新length属性。
/*第一种创建数组的方式*/ var colors = new Array(3);//参数是数值，创建一个包含3项的数组； var names = new Araay("Greg");//参数是其他类型，创建一个包含1项的数组，这里是一个字符串参数 //使用Array构造函数也可以省略new操作符。 /*第二种创建数组的方式字面量*/ var colors = ["red", "blue", "green"]; //creates an array with three strings var names = []; //creates an empty array var values = [1,2,]; //AVOID! Creates an array with 2 or 3 items, var options = [,,,,,]; //AVOID! creates an array with 5 or 6 items alert(colors.length); //3 alert(names.length); //0 alert(values.length); //2 (FF, Safari, Opera) or 3 (IE)在ie8之前版本中包含3个项，数值分别1、2、undefined， alert(options.length); //5 (FF, Safari, Opera) or 6 (IE)同上。所以最好别这么做；
（注：与对象一样，使用数组字面量表示法时，也不会调用Array构造函数，Firefox 3及更早版本除外估计现在都没这版本了吧）
数组的length属性很有特点--它不是只读的。因此，这个属性可以设置。可以从数组的末尾移除项或向数组中添加新项。
1 var colors = ["red", "blue", "green"]; //creates an array with three strings 2 colors.length = 2; 3 alert(colors[2]); //undefine移除
1 var colors = ["red", "blue", "green"]; //creates an array with three strings 2 colors.length = 4; 3 alert(colors[3]); //undefined添加
在数组末尾添加新项
1 var colors = ["red", "blue", "green"]; //creates an array with three strings 2 colors[colors.length] = "black"; //add a color 3 colors[colors.length] = "brown"; //add another color 4 alert(colors.length); //5 5 alert(colors[3]); //black 6 alert(colors[4]); //brown
数组位置3-98实际上不存在，访问他们返回undefined，数组最多可以包含42亿多个，超过这个上限就会异常
1 var colors = ["red", "blue", "green"]; //creates an array with three strings 2 colors[99] = "black"; //add a color (position 99) 3 alert(colors.length); //10
5.2.1 检测数组
虽然可以用instanceof 操作符来检测，但前提假定只有一个全局执行环境。如果，网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array构造函数。（怎么解决？）
ES5新增了Array.isArray()方法，最终确定某个值到底是不是数组，而不管是来自哪个全局执行环境中创建的。（支持的浏览器有ie9+,Firefox4+,Safari5+,Opera 10.5和Chrome），没有实现的其他浏览器版本，可自行谷歌解决办法或参考《javascript高级程序设计22.1.1节》
5.2.2 转换方法
1)所有对象都有toLocaleString()、toString()和valueof()方法。其中调用数组的toString()方法会返回有数组中每一个值的字符串形式拼接而成的一个以都号分割的字符串。
1 var colors = ["red", "blue", "green"]; //creates an array with three strings 2 console.log(colors.toString()); //控制台输出red,blue,green 3 alert(colors.valueOf()); //red,blue,green 4 alert(colors); //red,blue,green由于alert()要接收字符串参数，所以它会在后台调用toString()方法，跟直接调用toString方法相同的结果 5 onsole.log(colors); //控制台输出["red", "blue", "green"]
谈一谈toLocaleString()的不同之处，上面的例子console.log(colors.toLocaleString())输出red，blue，green字符串，但它是为了取得每一项的值，调用的是每一项的toLocaleString()方法
var person1 = { toLocaleString : function () { return "Nikolaos"; }, toString : function() { return "Nicholas"; } }; var person2 = { toLocaleString : function () { return "Grigorios"; }, toString : function() { return "Greg"; } }; var people = [person1, person2]; alert(people); //Nicholas,Greg alert(people.toString()); //Nicholas,Greg alert(people.toLocaleString()); //Nikolaos,Grigorios
join()方法 ,把数组用特定的分隔符分割开输出字符串；例如
1 var colors = ["red","green","blue"]; 2 alert(color.join("||"));//输出[red||green||blue];如果不传入任何值，或者闯入undefined，则默认使用逗号分割；
（注意：如果数组中的某一项的值是null或者undefined）,那么该值在join(),toLocaleString(),toString()和valueOf()方法返回的结果中以空字符串表示。）
5.2.3 栈方法
LIFO(后进先出)
push()：可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。pop():从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。
1 var colors = new Array(); //create an array 2 var count = colors.push("red", "green"); //push two items 3 alert(count); //2 4 5 count = colors.push("black"); //push another item on 6 alert(count); //3 7 8 var item = colors.pop(); //get the last item 9 alert(item); //"black" 10 alert(colors.length); //2
5.2.4 队列方法
FIFO（先进先出）
shift()：它能够移除数组中的第一个项并返回该项，同时数组长度减1。unshift():它能在数组前端添加任意个项并返回新数组的长度。
5.2.5 重排序方法
下面的两函数返回值是经过排序后的数组。
reverse():反转数组项的顺序。sort():默认按升序排列数组，会调用每个数组项的toString()转型方法，然后比较得到的字符串，确定如何排序。但是有缺陷比如字符串"5"大于"15",实际数值不是这样比。因此sort()方法可以接收一个比较函数作为参数。
比较函数接收两个参数，arguments[0]>arguments[1]返回正数，相等返回0，arguments[0]<arguments[1]返回负数；如下代码运用，如需降序更改返回值就行，或者再利用reverse()。
1 function compare(value1, value2) { 2 if (value1 < value2) { 3 return -1; 4 } else if (value1 > value2) { 5 return 1; 6 } else { 7 return 0; 8 } 9 } 10 var values = [0, 1, 5, 10, 15]; 11 values.sort(compare); 12 alert(values); //0,1,5,10,15
13 //可以更简单 function compare(value1,value2){ return value2-value1; }
（如需补充：使用什么方式排序的，请添加至这里：有冒泡排序...）
5.2.6 数组各种操作方法
- concat()
1 var colors = ["red", "green", "blue"]; 2 var colors2 = colors.concat("yellow", ["black", "brown"]); 3 4 alert(colors); //red,green,blue 5 alert(colors2); //red,green,blue,yellow,black,brown
- slice()
var colors = ["red", "green", "blue", "yellow", "purple"]; var colors2 = colors.slice(1); var colors3 = colors.slice(1,4); alert(colors2); //green,blue,yellow,purple alert(colors3); //green,blue,yellow //可以1个或两个参数（起始{包含}和结束位置{不包含}），如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。如果结束位置小于起始位置，则返回空数组；
- splice()可以对数组元素进行删除、插入、替换操作，该方法始终返回一个数组，包含从原始数组中删除的项（如果没有删除任何项，则返回空数组。）而原数组也添加了一些项或删除了一些。
删除：提供两个参数，splice(要删除的第一项的位置,要删除的项数)。
插入.替换：提供三个参数，splice（起始位置，要删除的项数，要插入的项），如果要插入多个项可以再传入任意多个项。splice(2,0，"red","green")。插入的项不必等于删除的项。
var colors = ["red","green","blue"]; var removed = colors.splice(0,1); alert(colors); //green,blue,原数组去掉了删除的项 alert(removed); //red removed = colors.splice(1,0,"yellow","orange"); //从位置1开始插入两项 alert（colors）; //green,yellow,orange,blue alert(removed); //返回的是一个空数组 removed = colors.splice(1,1,"red","pushs"); alert(colors); //green,red,purple,orange,blue alert(removed); //yellow
5.2.7 位置方法
ES5为数组实例添加了两个方法 indexOf()、lastIndexOf()都接收两个参数（要查找的项，【可选】查找起始点），返回要查找项在数组中的位置。没找到返回-1.（注意：在比较第一个参数与数组中的每一项时，会使用全等操作符===，同时支持这方法的浏览器不包含ie8和以前的）。
5.2.8 迭代方法
ES5为数组定义了5个迭代方法。每个方法都接收两个参数：（要在每一项上运动的函数，【可选】运行该函数的作用域对象--->影响this的值），传入这些方法中的函数会接收三个参数（数组项的值，该项在数组中的位置，数组对象本身），根据方法的不同，这个函数的返回值也不尽相同；（）
- every()：对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true。
- filter()：对数组中的每一项运行给定的函数，返回该函数会返回true的项组成的数组。
- foreEach ：对数组中的每一项运行给定的函数。这个方法没有返回值。
- map()：对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组。
- some()：对数组中的每一项运行给定的函数，如果该函数对只要某一项返回true,就返回true.
以上方法都不会修改数组中的包含的值。问题是它们主要用来干嘛！比如every()和some()可以用于查询数组中的项是否满足某个条件。every()每一项满足，some()某一项满足即可；
var numbers = [1,2,3,4,5,4,3,2,1]; var everyResult = numbers.every(function(item, index, array){ return (item > 2); }); alert(everyResult); //false var someResult = numbers.some(function(item, index, array){ return (item > 2); }); alert(someResult); //true
下面是filter()示例代码
var numbers = [1,2,3,4,5,4,3,2,1]; var filterResult = numbers.filter(function(item, index, array){ return (item > 2); }); alert(filterResult); //[3,4,5,4,3]
下面是map()示例代码:也返回一个数组，这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。
var numbers = [1,2,3,4,5,4,3,2,1]; var mapResult = numbers.map(function(item, index, array){ return item * 2; }); alert(mapResult); //[2,4,6,8,10,8,6,4,2]
（注意：支持这些迭代方法的浏览器有IE9+、ie8版本和之前的不支持）
5.2.9 归并方法
ES5还新增了连个归并数组的方法：reduce()和reduceRight()。这两个方法都会迭代数组的所有项，然后构建一个最终返回值。遍历方向不同。接收两个参数（一个在每一项上调用的函数，【可选】作为归并基础的初值），这个传入的函数接收4个参数：（前一个值，当前值，项的索引，数组对象）。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
var values = [1,2,3,4,5]; var sum = values.reduce(function(prev, cur, index, array){ return prev + cur; }); alert(sum); //15 //第一次执行回调函数，prev是1，cur是2,。第二次prev是3（1+2的结果），cur 是3（数组的第三项） /*---------------------*/ var values = [1,2,3,4,5]; var sum = values.reduceRight(function(prev, cur, index, array){ return prev + cur; }); alert(sum); //15 //第一次执行回调函数，prev是5，cur是4,。第二次prev是9（5+4的结果），cur 是3（数组的倒第三项）
（注意：支持这些归并方法的浏览器有IE9+、ie8版本和之前的不支持）