css

对象的创建方式

为了使用Person对象来描述一个特定的人,我们需要创建一个Person对象的实例(instance)。实例是对象的具体表示；对象是统称，实例是个体。例如，你和我都是人，都可以用Person对象来描述；但你和我是两个不同的个体，很可能有着不同的属性（例如，你和我的年龄可能不一样）。因此，你和我对应着两个不同的Person对象——他们虽然都是Person对象,但它们是两个不同的实例

1. 创建Object实例的方式有两种。第一种是使用new操作符后跟Object构造函数，如下所示：

   //创建对象
   var person = new Object();
   //给对象添加name和age属性
   person.name = 'jack';
   person.age = 28;
   //给对象添加fav的方法
   person.fav = function(){
       console.log('泡妹子');
   }

 

1. 使用对象字面量表示法。对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。

   var person = {
       name : 'jack';
       age : 28,
       fav : function(){
           console.log('泡妹子');
       }
   }

    

在上个例子中，从{开始，表示对象字面量的开始，一直到最后的}结束。我们定义了name属性，之后是一个冒号，再后面是这个属性的值。在对象字面量中，使用逗号来分离不同的属性。

在使用对象字面量语法时，属性名也可以使用字符串，如下：

var person = {
    "name" : 'jack';
    "age" : 28,
    "fav" : function(){
        console.log('泡妹子');
    }
}

除此之外

var person = {};//与new Object()相同

点语法

person.name; //jack
person.fav();//泡妹子

括号表示法

person.name; //jack

使用如下所示的代码

person['name'];

内置对象

在电视上的烹饪节目中,只要镜头一转,厨师就可以端出一盘美味的菜肴并向大家介绍说:”这是我刚做好的”。Javascript与这种节目里的主持人颇有几分相似：它提供了一些列预先定义好的对象，而我们可以把这些对象直接用在自己的脚本里。我们称这种对象叫内置对象（navtive object）。

其实我们已经见过一些Javascript内置对象了。数组就是一种Javascript内置对象中的一种。本节我们主要介绍数组常用的属性和方法。

Array

数组创建方式

1. 跟object创建对象一样，使用Array构造函数方式创建，如下代码

   var colors = new Array();

2. 使用字面量方式创建数组

   var colors = [];

检测数组

确定某个值到底是否是数组

var colors = ['red','green','blue'];
if(Array.isArray(colors)){
    //对数组执行某些操作
}

转换方法

调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var colors = ['red','green','blue'];
alert(colors.toString());//red,green,blue

另外，toLocalString()方法经常也会返回与toString()方法相同的值，但也不总是如此.

分割字符串

toLocalString()方法和toString()方法，在默认情况下都会以逗号分割的字符串的形式返回。而如果使用join()方法，join()方法只接收一个参数。

var colors = ['red','blue','green'];
colors.join('||'); //red||blue||green

栈方法

数组也可以想栈一样，既可以插入和删除项的数据结构。栈是一种LIFO(Last-In-First-Out,后进先出)的数据结构，也就是最新添加的那项元素最早被删除。而栈中项的插入（叫做推入）和移除(叫做弹出)，只发生在一个位置——栈的顶部。数组专门提供了push()和pop()方法，以便实现类似栈的行为。

push()方法

可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

var colors = [];
var count = colors.push('red','blue','green');
alert(count); //3

pop()方法

从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项 。

var item = colors.pop(); //取最后一项
alert(item); //green
alert(colors.length); //2

队列方法

而队列数据结构的访问规则是 FIFO(First-In-First-Out， 先进先出)。队列在列表的末端添加项，从列表的前端移除项。由于push()是向数组末端添加项的方法， 因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是shift()，它能够移 除数组中的第一个项并返回该项，同时将数组长度减 1。结合使用 shift()和push()方法，可以像使 用队列一样使用数组。

shift()方法

var colors = ['red','blue','green'];
var item = colors.shift();//取得第一项
alert(item); //"red"
alert(colors.length); //2

unshift()方法

ECMAScript 还为数组提供了一个unshift()方法。顾名思义，unshift()与shift()的用途相反: 它能在数组前端添加任意个项并返回新数组的长度。因此，同时使用 unshift()和 pop()方法，可以 12 从相反的方向来模拟队列，即在数组的前端添加项，从数组末端移除项 。

var colors = [];
var count  = colors.unshift('red','green'); //推入两项
alert(count); //2
console.log(colors); // ["red", "green"]

数组中已经存在两个可以直接用来重排序的方法：reverse()和sort()。

reverse()方法

reverse翻转数组项的顺序

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

sort()方法

默认情况下，sort()方法按升序排列——即最小的值位于最前面，最大的值排在最后面。 为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串，以确定如何排序 。即使数组中的每一项都是数值，sort()方法比较的也是字符串。如下所示。

var values = [0,1,5,10,15];
values.sort();
alert(values); //0,1,10,15,5

可见，即使例子中值的顺序没有问题，但 sort()方法也会根据测试字符串的结果改变原来的顺序。 因为数值 5 虽然小于 10，但在进行字符串比较时，”10”则位于”5”的前面，于是数组的顺序就被修改了。 不用说，这种排序方式在很多情况下都不是最佳方案。

因此 sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。 以完成数组中数值的升序和降序功能

比较函数接收两个参数，如果第一个参数位于第二个参数之前则返回一个负数，如果两个参数相等则返回0，如果第一个参数位于第二个参数之后则返回正数。举例：

function compare(v1,v2){
    if(v1 < v2){
        return -1;
    }else if (v1 > v2){
        return 1;
    }else{
        return 0;
    }
}

这个比较函数可以适用于大多数数据类型，只要将其作为参数传递给sort()方法即可，如下面例子所示。

var values = [0,1,5,10,15];
values.sort(compare);
alert(values); //0,1,5,10,15

在将比较函数传递到sort()方法之后，数值仍然保持了正确的升序。当然，也可以通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可。

function compare(v1,v2){
    if(v1 < v2){
        return 1;
    }else if (v1 > v2){
        return -1;
    }else{
        return 0;
    }
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values);    // 15,10,5,1,0

比较函数在第一个值应该位于第二个之后的情况下返回 1，而在第一个值 应该在第二个之前的情况下返回-1。交换返回值的意思是让更大的值排位更靠前，也就是对数组按照降 序排序。当然，如果只想反转数组原来的顺序，使用 reverse()方法要更快一些。

操作方法

ECMAScript为操作已经包含在数据中项提供了许多方法。其中包含了像concat()、slice()、splice()来对数组的项进行操作。

concat()方法

数组合并方法，一个数组调用concat()方法去合并另一个数组，返回一个新的数组。concat()接收的参数是可以是任意的。

• 参数为一个或多个数组，则该方法会将这些数组中每一项都添加到结果数组中。

• 参数不是数组，这些值就会被简单地添加到结果数组的末尾

var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'张三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]

slice()方法

slice()方法，它能够基于当前数组中一个或多个项创建一个新数组。slice()方法可以接受一或两个参数，既要返回项的起始和结束位置。

• 一个参数的情况下，slice()方法会返回从该参数指定位置开始到当前数组默认的所有项

• 两个参数的情况下，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

注意： slice()方法不会影响原始数组

var colors = ['red','blue','green','yellow','purple'];
colors.slice(1);//["blue", "green", "yellow", "purple"]
colors.slice(1,4);// ["blue", "green", "yellow"]

如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定响应的位置。例如，在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同。如果技术位置小于起始位置，则返回空数组

var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 
colors.slice(-1,-2);//[]

splice()方法

splice()方法这个恐怕要算是最强大的数组的方法了，它有很多种用法。

splice()的主要用途是向数组的中路插入想。使用这种方法的方式则有3中。

1. 删除：可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的个数。例如splice(0,2)会删除数组中的前两项

2. 插入：可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的个数）和要插入的项。如果要插入多个项，可以再传入第四、第五、以至任意多个项。例如，splice(2,0,'red','green')会从当前数组的位置2开始插入字符串'red'和'green'。

3. 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green")会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red"和"green"。

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项(如果没有删除任何 项，则返回一个空数组)。

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"); 
alert(colors); // green,yellow,orange,blue alert(removed); // 返回的是一个空数组
removed = colors.splice(1, 1, "red", "purple"); 
alert(colors); // green,red,purple,orange,blue alert(removed); // yellow，返回的数组中只包含一项

位置方法

ECMAScript 5 为数组实例添加了两个位置方法:indexOf()和 lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中，indexOf()方法从数组的开头(位置 0)开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。

这两个方法都返回要查找的那项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符；也就是说，要求查找的项必须严格相等(就像使用===一样)。举个栗子：

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4));// 5
alert(numbers.indexOf(4,4));// 5
alert(numbers.lastIndexOf(4,4));//3
var person = {name:"mjj"};
var people = [{name:'mjj'}];
var morePeople = [person];
alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person));// 0

迭代方法

ECMAScript 5 为数组定义了 5 个迭代方法。

• every()

• some()

• filter()

• map()

• forEach()

在这里常用的是后三个，我们只介绍后三个。

filter()方法

filter()函数，它利用指定的函数确定是否在返回的数组中包含某一项。例如要返回一个所有数值都大于2的数组，可以使用如下代码。

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()方法

map()方法也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行输入函数的结果。例如，可以给数组中的每一项乘以2，然后返回这些乘积组成的数组，如下所示

var numbers = [1,2,3,4,5,4,3,2,1];
var filterResult = numbers.map(function(item, index, array){
    return item * 2;
});
alert(filterResult); //[2,4,6,8,10,8,6,4,2]

forEach()方法

它只是对数组中的每一项运行传入的函数。这个方法没有返回值， 本质上与使用 for 循环迭代数组一样。来看一个例子 。

//执行某些操作 10
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
});