小红书第五章——引用类型（一）

这一章解决了我好多以前看视频学习时的疑惑，也get了不少过往学习时遗漏的知识点，在这里系统的整理一下，为理清自己的思路，也是为了加深印象。内容比较多，大概会分成两章。

首先：

引用类型的值(对象)是引用类型的一个实例 ，即，对象是某个特定引用类型的实例，具有属性和方法。

ECMAscript从技术上讲是一门面向对象的语言，但它不具备面向对象语言所支持的类和借口等基本结构，只有属性和方法。

一、Object类型

1、创建方法，两种

1）、Object构造函数

2）、对象字面量表示法（不会调用Object构造函数）

注意：用对象字面量表示法时，花括号中的最后一个属性后面应添加逗号，会在IE7及IE7-、Opera中导致错误。

2、用对象字面量表示法要求 的代码少，而且给人一种封装数据的感觉，更受开发者青睐，且，对象字面量表示法是向函数传递大量参数的首选方法。

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

如上所示，函数有多个可选参数时用字面量表示法非常方便，最好的做法是对那些必需值使用命名参数，而使用对象字面量来封装多个可选参数。

3、访问对象属性

一般用点表示法，遇到变量时用方括号语法。

二、Array类型

1、创建方法：2种

1）、Array构造函数

2）、数组字面量表示法（不会调用Array构造函数）

2、length属性——不止可读，超级有个性的一个属性

可以通过length属性向数组末尾添加or移除项

var colors=[1,"red"];
colors.length=1;//移除末尾项
colors[length]="red";//在末尾添加第三项

注意：数组最多可以包含4294967295项，这已经几乎能够满足任何编程需求了，如果超出这个上限，就会发生异常，而创建一个初始大小与这个上限值接近的数组，则可能导致运行时间超长的脚本错误。

3、数组的检测

1）、instanceof

if(value instanceof Array){执行某些操作};

这种方式的不足点：如果网页包含了多个框架，那实际上就存在多个不同的全局执行环境，从而存在多个版本的Array构造函数，如果从一个框架向另一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有不同的构造函数。这时，instanceof失效。

2）、isArray()

ECscript5新增方法，可解决不同全局执行环境问题。

if(Array.isArray(value)){//该方法，IE9+、Firefox4+、Safari5+、Opera10.5+和Chrome支持}

4、转换方法

让我们先来复习一下对象Object的三个方法：

toLocaleString()//返回对象的字符串表示，该字符串与执行环境的地区对应
toString()//返回对象的字符串表示
valueOf()//返回对象的字符串、数值、boolean值表示，通常该值与toString（）方法的返回值相同

调用数组的toString()方法会返回由数组中每个值的字符串形式拼接成的一个以逗号分隔的字符串，而调用valueOf()时，会先调用数组中每一项的toString（）方法，故返回的还是一个由数组中每个值的字符串形式拼接成的一个以逗号分隔的字符串。

var colors=['red','green','blue'];
alert(colors.toString());//red,green,blue
alert(colors.valueOf());//red,green,blue
alert(colors);//red,green,blue      由于alert要接收字符串参数，所以它会在后台调用toString（）方法。

不同的是数组的toLocaleString()方法，虽然结果与前两种方法相同，但是为了取得每一项的值，调用的是每一项的toLocaleString()方法而不是toString（）方法。

下面这个例子可说明这一点：

var person1={
toLocaleString:function(){return "toLocaleString"},
toString:function(){return "toString"}
}
var person=[person1];
alert(person);//toString
alert(person.toString());//toString
alert(person.toLocaleString());//toLocaleString   此时，对person中的person1这一数组项调用toLocaleString（），而调用person1的toLocaleString属性

5、数组的一些方法

a、join（）   返回包含所有数组项的字符串

b、push（） 返回插入后数组的长度

c、pop（）   返回移除的数组项

d、shift（）  返回移除的数组项

e、unshift（）返回插入后数组的长度

其中，push（）和pop（）可以模拟栈（后进先出嘛），push（）和shift（）可以模拟队列（先进先出），unshift（）和pop（）可以模拟反向队列。

6、重排序方法

1）reverse()

反转数组项的顺序，这个好像没啥好说的。

2）sort（）

默认按升序排列数组项，但要注意的是：为排序，sort（）会调用每个数组项的toString（）转型方法，然后比较得到的字符串如何排序。这样也就导致排序中，10甚至会位于2前面的情况。

所幸，sort（）方法可以添加一个比较函数作为参数。

比较函数接收两个参数，如果第一个参数应该位于第二个参数之前，则返回负数，反之，返回正数，如果两个参数相等则返回0.

//升序
function compare(value1,value2){
  if(value1<value2){return -1}
  else if(value1>value2){return 1}
  else {return 0}
}
//降序

function compare(value1,value2){

  if(value1<value2){return 1}
  else if(value1>value2){return -1}
  else {return 0}
}

如果是数值类型或者其valueOf（）方法会返回数值类型的对象类型，可以使用一个更简单的比较函数。

function compare(value1,value2){
    return value1-value2;}//升序，雕花一下return后参数的顺序则降序

7、操作方法

1）、slice（）

2）、splice（）  超级厉害

8、位置方法（查索引值）

1）indexOf（）

2）lastIndexOf（）

注意：这两种方法在比较第一个参数与数组中的每一项时采用全等操作符（===）

9、迭代方法

ECMAscript为数组定义了5个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和运行该函数的作用域对象（可选）——影响this的值。传入这些方法中的函数有三个参数：数组项的值、该项在数组中的位置和数组对象本身。

1）、every（）        对数组中的每一项运行给定函数，如果函数对于每一项都返回true，则返回true

2）、filter（）          对数组中的每一项运行给定函数，结果返回运行该函数结果为true的项组成的数组

3）、forEach（）    对数组中的每一项运行给定函数，这个方法没有返回值（）

4）、map（）         对数组中的每一项运行函数，返回每一次函数调用返回的结果返回的数组。

5）、some（）       对数组中的每一项运行函数，如果该函数对任一调用项返回true，就返回true

以上方法都不会修改数组中包含的值

注意：支持这些数组方法的浏览器有：IE9+、Firefox2+、Safari3+、Opera9.5+和Chrome。

下面介绍这五种方法的实例：

//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(everyResult)//true

//filter()返回结果为true的项组成的数组
var  fliterResult=nnumbers.filter(function(item,index,array){
return (item>2);
})
alert(filterResult);//[3,4,5,4,3]

//map()返回对每一项进行相应操作后每一项组成的数组
var mapResult=numbers.map(function(item,index,array){
return (item*2);
})
alert(mapResult);//[2,4,6,8,10,8,6,4,2];

//forEach（） 无返回值，只是对数组中的每一项运行传入的参数，本质上与使用for循环迭代数组一样。
var forEachResult=numbers.forEach(function(){
//执行某些操作})

9、归并方法

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

使用方法：这两个函数都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。

而在每一项上调用的函数则包括四个参数：前一个值、当前值、项的索引和数组对象。

这个函数的具体用法用例子说明可能更易于理解：

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

第一次执行迭代函数时pre为1，cur为2，第二次，迭代函数的返回值3作为pre，cur变为3，以此类推。

注意：支持这些数组方法的浏览器有：IE9+、Firefox2+、Safari3+、Opera9.5+和Chrome。

三、Date类型和RegExp类型

这两部分内容，其实有很多以前没有接触过的知识点，但感觉太冷门，一般用不到，暂不做总结，改天把实际应用中侧重的部分总结一下发上来。