引用类型——Obiect类型、Array类型

2018-08-02  本文已影响0人  lassiey

引用类型

引用类型的值(对象)是引用类型的一个实例。
新对象是使用new操作符后跟一个构造函数来创建的。

一、创建Object类型

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

var person = new Object ();
person.name = "Nicholas";
person.age = 29;

2.使用对象字面量表示法

var person = {
    name : "Nicholas",
    age : 29
};
/*使用对象字面量语法时,如果留空其花括号,则可以定义只包含默认属性和方法的对象*/
var person = {};          //与new Object相同
person.name = "Nicholas";
person.age = 29;

在通过对象字面量定义对象时,实际上不会调用Object构造函数。

二、Array类型

ECMAScript数组的每一项可以保存任何类型的数据,且其大小可以随着数据的添加自动增长以容纳新数据。

1.创建数组

(1)使用Array构造数组

var colors = new Array();

<1> 如果预先知道数组要保存的项目数量,可以给构造函数传递该变量,而该数量会自动变成length属性的值。

var colors = new Array(20);

<2> 也可以向Array构造函数传递数组中应该包含的项。

var colors = new Array("red","blue","green");

注意:如果传一个数值,则会按照该数值创建包含给定项数的数组
使用Array构造函数时也可以省略new操作符。

(2)使用数组字面量表示法

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
var name = [];                        //创建一个空数组
var values = [1,2,];                  //不要这样!这样会创建一个包含2或3项的数组
var options = [,,,,,];                //不要这样!这样会创建一个包含5或6项的数组

在使用数组字面量定义对象时,也不会调用Array构造函数。

2.读取和设置数组的值

在读取和设置数组的值时,要使用方括号并提供相应值的基于数字0的索引。

var colors = ["red","blue","green"];  //定义一个字符串数组
alert(colors[0]);                     //显示第一项
colors[2] = "black";                  //修改第二项
colors[3] = "brown";                  //新增第三项

数组的项保存在其length属性中,这个属性始终会返回0或更大的值。

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
var name = [];                        //创建一个空数组
alert(colors.length);                 //3
alert(name.length);                   //0

注意
数组的length属性不是只读的

因此,通过设置这个属性,
1.可以从数组的末尾移除项

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
colors.length = 2;
alert(colors[2]);                     //undefined

2.添加新项(如果将其length属性设置为大于数组项数的值,则新增的每一项都会取得undefined值)

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
colors.length = 4;
alert(colors[3]);                     //undefined

3.利用length属性也可以方便的在数组末尾添加新项

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
colors[colors.length] = "black";      //(在位置3)添加一种颜色
colors[colors.length] = "brown";      //(在位置4)添加一种颜色

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
colors[99] = "black";                 //(在位置99)添加一种颜色
alert(colors.length);                 //100

3.检测数组——确定某个对象是不是数组

ECMAScript3:对于一个网页或者一个全局作用域而言,使用instanceof操作符。

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

ECMAScript5:新增Array.isArray()方法,这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。

if  (Array.isArray(value)){
    //对数组执行某些操作
}

4.转换方法

1.valueOf()方法:返回的还是数组本身。
2.toString()方法:返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var colors = ["red","blue","green"];  //创建一个包含3个字符串的数组
alert(colors.toString());             //red,blue,green
alert(colors.valueOf());              //red,blue,green
alert(colors);                        //red,blue,green

由于alert()要接收字符串参数,所以它会在后台调用toString()方法,由此会得到与直接调用toString()方法相同的结果。
3.toLocalString()方法:也会创建一个数组值的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于,这一次为了取得每一项的值,调用的是每一项的toLocalString()方法,而不是toString()方法。

var person1 = {
    toLocaleString : function () {
        return "Nikoloas";
    },

    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());   //Nikoloas,Grigorios

3.join()方法:可以使用不同的分隔符来构建这个字符串

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

5.栈方法

栈是一种LIFO(Last-In-First-Out,先进后出)的数据结构,也就是最新添加的项最先被移除。而栈中项的插入(叫做推入)和移除(叫做弹出),只发生在一个位置——栈的顶部。
1.push()方法:可以接受任意的参数,把它们逐个添加到末尾,并返回修改后数组的长度。
2.pop()方法:从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

var colors = new Array();                      //创建一个数组
 var count = colors.push("red", "green");      //推入两项
alert(count);                                  //2
        
count = colors.push("black");                  //推入另一项
alert(count);                                  //3
        
var item = colors.pop();                       //取得最后一项
alert(item);                                   //"black"
alert(colors.length);                          //2

var colors = ["red", "blue"];
colors.push("brown");                          //添加另一项
colors[3] = "black";                           //添加一项
alert(colors.length);                          //4
        
var item = colors.pop();                       //取得最后一项
alert(item);                                   //"black"

6.队列方法

队列数据结构的访问规则是FIFO(First-In-First-Out,先进先出)。
1.shift()方法:能够移除数组中的第一个项并返回该项,同时将数组长度减一。

var colors = new Array();                      //创建一个数组
var count = colors.push("red", "green");       //推入两项
alert(count);                                  //2
        
count = colors.push("black");                  //推入另一项
alert(count);                                  //3
        
var item = colors.shift();                     //取得第一项
alert(item);                                   //"red"
alert(colors.length);                          //2

2.unshift()方法:它能在数组前添加任意个项并返回数组的长度。

var colors = new Array();                      //创建一个数组
var count = colors.unshift("red", "green");    //推入两项
alert(count);                                  //2
        
count = colors.unshift("black");               //推入另一项
alert(count);                                  //3
        
var item = colors.pop();                       //取得最后一项
alert(item);                                   //"green"
alert(colors.length);                          //2

7.重排序方法

1.reverse()方法:反转数组项的顺序

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

2.sort()方法:按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。(比较的是字符串)

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

用比较函数来实现正确的升序和降序。

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

还可以用第二个值减第一个值的方法

function compare(value1, value2) {
     return value2 - value1;
}

8.操作方法

1.concat()方法:基于当前数组中的所有项创建一个新数组。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
        
alert(colors);     //red,green,blue        
alert(colors2);    //red,green,blue,yellow,black,brown

2.slice()方法:能够基于当前数组中的一或多个项创建一个新数组。
slice()方法可以接受一个或两个参数,即要返回项的起始和结束位置。
在只有一个参数的情况下,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

2.splice()方法: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");  //从位置1开始插入两项
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,返回的数组中只包含一项

9.位置方法

indexOf()方法lastIndexOf()方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中:
1.indexOf()方法:从数组的开头(位置0)开始向后查找。
2.lastIndexOf()方法:从数组的末尾开始向前查找。

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: "Nicholas" };
var people = [{ name: "Nicholas" }];
var morePeople = [person];
        
alert(people.indexOf(person));     //-1
alert(morePeople.indexOf(person)); //0

10.迭代方法

1.every()方法:对数组中的每一项运行给定函数,如果该函数对每一项都返回ture,则返回ture。
2.some()方法:对数组中的每一项运行给定函数,如果该函数对任一项返回ture,则返回ture。

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

3.filter()方法:对数组中的每一项运行给定函数,返回该函数会返回ture的项组成的数组。

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]

4.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]

5.forEach()方法:对数组中的每一项运行给定函数,这个方法没有返回值。

var numbers = [1,2,3,4,5,4,3,2,1];

numbers.forEach(function(item, index, arrray){
      //执行某些操作
});

每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值。
传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。

11.归并方法

(迭代数组的所有项,然后构建一个最终返回的值。)
1.reduce()方法:从数组的第一项开始,逐个遍历到最后。

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

2.reduceright()方法:从数组的最后一项开始,向前遍历到第一项。

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

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。
传给reduce()和reduceright()的函数接收4个参数:前一个值、当前值、项的索引和数组对象。

上一篇下一篇

猜你喜欢

热点阅读