ECMAScript对象和数组

什么是对象,其实就是一种类型,即引用类型。而对象的值就是引用类型的实例。在ECMAScript中引用类型是一种数据结构,用于将数据和功能组织在一起。它也常被称做为类,但ECMAScript中却没有这种东西。虽然ECMAScript是一门面向对象的语言,却不具备传统面向对象语言所支持的类和接口等基本结构。
一.Object类型(对象类型)
到目前为止,我们使用的引用类型最多的可能就是Object类型了。虽然Object的实例不具备多少功能,但对于在应用程序中的存储和传输数据而言,它确实是非常理想的选择。创建Object类型有两种。一种是使用new运算符,一种是字面量表示法。
对象包含哪些元素
(1)属性(字段)
(2)方法(函数)
1.使用new运算符创建Object

var box = new Object();                  //new创建一个对象
box.name = '西西';                       //创建一个属性字段(给这个对象创建一个名称西西)
box.age = 18;                           //创建另一个属性字段(给这个对象创建一个名称18)
alert(box.age);                         //打印age(怎么赋值怎么输出)

2.new关键字可以省略

var box = Object();                                //new关键字省略了
alert(box);

3.使用字面量方式创建Object
(1)字面量创建对象

var box = {};                                    //字面量方式创建的对象
alert(box);

(2)字面量方法创建属性

var box = {                                        //用字面量对象封装数据
    name : '西西',                              //属性可以用引号来括起来
    age : 18
};
alert(box.name);

4.属使用字面量及传统复制方式

var box = {};                                //字面量方式
box.name = '西西';                            //传统赋值方式
alert(box.name);

5.用数组的方式输出

var box = {                                            
    name : '西西',                            
    age : 18
};
alert(box.name);
alert(box['name']);                        //用数组的方法输出

6.给对象创建方法

function objrun() {
    return '123';                              //对象中的方法
}

var box = new Object();                       //创建一个对象
box.name = '西西';
box.age = 18;
box.run = objrun;                                
alert(box.run());                             //调用对象中的方法

7.使用delete删除对象属性

var box = {                                            
name:'西西'
};

alert(box.name);            //打印出西西
delete box.name;            //删除属性
alert(box.name);            //删除后打印出undefined

在实际开发过程中,一般我们更加喜欢字面量的声明方式。因为它清晰,语法代码少,而且还给人一种封装的感觉。字面量也是向函数传递大量可选参数的首选方式。

function box(obj) {
    if (obj.name != undefined) alert(obj.name);     //if判断属性是否存在
    if (obj.love != undefined) alert(obj.love);
    if (obj.age != undefined) alert(obj.age);
}

box({                                                //匿名对象,调用函数传递一个对象
    name : '西西',
    age : 18,
    height : 171,
    address : '北京'
});

二.Array类型(数组类型)
除了Object类型之外,Array类型 ECMAScript最常用的类型。而且ECMAScript中的Array类型和其他语言中的数组有着很大的区别。虽然数组都是有序排列,但ECMAScript中的数组每个元素可以保存任何类型。ECMAScript中数组的大小也是可以调整的。创建Array类型有两种方式:第一种是new运算符,第二种是字面量。
1.使用new关键字创建数组

var box = new Array();                       //声明一个数组,空数组
alert(typeof box);                           //数组属于object类型,弹出:object
var box = new Array('西西', 18, '北京');     //创建一个数组,并分配了三个元素
alert(box);                                 //以,分割把三个元素打印出来:西西,18,北京
alert(box[2]);                              //弹出:北京
var box = new Array(10);                       //创建数组,包含10个元素,必须是数字,必须是1位
box[3] = '西西';                                //赋值第四个数据西西
box[5] = '北京';                                //赋值第六个数据北京
alert(box);                                    //弹出:,,,西西,,北京,,,,,

2.以上三种方法,可以省略new关键字

var box = Array();
alert(typeof box);

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

var box = [];                                    //字面量的方式创建数组
alert(typeof box);
var box = ['西西', 18, '北京'];    //字面量的方式创建数组,并且分配了元素
alert(box);

4.使用索引下标来读取数组的值

var box = ['西西', 28, '北京'];    
box[1] = 100;                         //修改第二个元素
box[4] = '计算机编程';                 //增加第四个元素
alert(box); 

5.使用length属性获取数组元素量

var box = ['西西',3,''北京];    
box.length = 10;                   //强制了元素量是10
alert(box.length);                 //打印有多少量:10
alert(box);                        //打印:西西,3,北京,,,,,,,(多加的以逗号扩展补充)
var box  = ['北京', 18, '北京'];    
box[box.length] = '西城';            //使用.length获得最后一个下标值西城
alert(box);                         //打印:西西,18,北京,西城

6.创建一个稍微复杂一点的数组

var box = [
                    {                              //第一个元素是一个对象
                        name : '西西',
                        age : 18
                    },
                    [3,4,6,'北京',new Object()],   //第二个元素是数组
                    '计算机编程',                   //第三个元素是字符串
                    25+25,                        //第四个元素是数值
                    new Array(1,2,3)              //第五个元素是数组
];
alert(box);              //打印结果:[object Object],3,4,6,北京,[object Object],计算机编程,50,1,2,3
alert(box[0]['name']);   //打印结果:西西

三.对象中的方法
1.转换方法
对象或数组都具有toLocaleString()、toString()和valueOf()方法。其中toString()和valueOf()无论重写了谁,都会返回相同的值。数组会讲每个值进行字符串形式的拼接,以逗号隔开。

var box = ['西西',18,'北京',new Date()];         //字面量数组,new Date()创建日期对象
alert(box);                                     //隐式调用了toString()打印:西西,18,北京,TUE Nov 22 2017 20:20:20 GMT+0800
alert(box.valueOf());                           //内置方法
alert(box.toString());                          //内置方法和valueOf()返回一致                    
alert(box.toLocaleString());                    //返回值和上面两种一致,本地格式区域字符串打印:西西,18,北京,2017-11-22 20:20:20

默认情况下,数组字符串都会以逗号隔开。如果使用join()方法,则可以使用不同的分隔符来构建这个字符串。

var box = ['西西',18,'北京'];
alert(typeof box.join('|'));                    //方法运行过后返回按|分割的字符串返回值:西西|18|北京
alert(typeof box);                              //原数组没有任何变化,类型还是object

2.栈方法(后进先出)
ECMAScript数组提供了一种让数组的行为类似于其他数据结构的方法。也就是说,可以让数组像栈一样,可以限制插入和删除项的数据结构。栈是一种数据结构(后进先出),也就是说最新添加的元素最早被移除。而栈中元素的插入(或叫推入)和移除(或叫弹出),只发生在一个位置——栈的顶部。ECMAScript为数组专门提供了push()和pop()方法。
push()方法可以接收任意数量的参数,把它们逐个添加到数组的末尾,并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一个元素,减少数组的length值,然后返回移除的元素。

<script>
var box = ['西西',18,'北京']; //字面量声明
alert(box.push('计算机编程','西城')); //给数组末尾添加了N个元素,并返回数组最新长度。最新长度:5
alert(box); //当前数组里的所有数据:西西,18,北京,计算机编程,西城
alert(box.pop()); //移除数组最后的元素,并且返回移除的元素。移除的元素:西城
alert(box); //当前数组里的所有数据:西西,18,北京,计算机编程
</script>

3.队列方法(先进先出)
栈方法是后进先出,而列队方法就是先进先出。列队在数组的末端添加元素,从数组的前端移除元素。通过push()向数组末端添加一个元素,然后通过shift()方法从数组前端移除一个元素。

var box = ['西西',18,'北京'];
alert(box.push('计算机编程'));                //给数组末尾添加了N个元素,并返回数组最新长度。最新长度:4
alert(box);                                 //查看数组:西西,18,北京,计算机编程
alert(box.shift());                         //移除数组开头的一个元素,并且返回这个元素:西西
alert(box);                                 //查看数组:18,北京,计算机编程

ECMAScript还为数组提供了一个unshift()方法,它和shift()方法的功能完全相反。unshift()方法为数组的前端添加一个元素。

var box = ['西西',18,'北京'];
alert(box.unshift('西城'));                 //给数组前端添加一个元素,并且返回最新的长度。最新长度:4
alert(box);                                //查看数组:西城,西西,18,北京

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

var box = [1,2,3,4,5];                 //数组
alert(typeof box.reverse());           //方法执行后返回一个逆序后的数组:5,4,3,2,1
alert(typeof box);                     //原数组也被逆序了,说明是引用

sort()从小到大排序

var box = [4,1,6,2,7,3,9];             //数组
alert(box.sort());                       //从小到大排序,返回排序后的数组:1,2,3,4,6,7,9
alert(box);                            //原数组也被从小到大排序了

sort方法的默认排序在数字排序上有些问题,因为数字排序和数字字符串排序的算法是一样的。我们必须修改这一特征,修改的方式,就是给sort(参数)方法传递一个函数参数。

function compare(value1,value2) {      //数字排序的函数参数
    if (value1 < value2) {             //小于,返回负数
        return -1;
    } else if (value1 > value2) {      //大于,返回正数
        return 1;
    } else {                           //其他,返回0
        return 0;
    }
}
var box = [0,1,5,10,15];               //验证数字字符串,和数字的区别
alert(box.sort(compare));              //传参结果:0,1,5,10,15
alert(box.reverse());                  //逆序结果:15,10,5,1,0

如果要反向操作,即从大到小排序,正负颠倒即可。当然,如果要逆序用reverse()更加方便。

5.操作方法
ECMAScript为操作已经包含在数组中的元素提供了很多方法。concat()方法可以基于当前数组创建一个新数组。slice()方法可以基于当前数组获取指定区域元素并创建一个新数组。splice()主要用途是向数组的中部插入元素。
concat()方法:基于当前数组创建一个新数组

var box = ['西西',28,'北京'];                   //当前数组
var box2 = box.concat('计算机编程');            //创建新数组,并添加新元素
alert(box2);                                   //输出新数组:西西,28,北京,计算机编程
alert(box);                                    //当前数组没有任何变化:西西,28,北京

slice()方法:

var box = ['西西',18,'北京','计算机编程','西城'];       //当前数组
var box2 = box.slice(1,3);                           //这里不是从第1个位置取3个
alert(box2);                                         //从第1个位置取到第3个位置:18,北京

splice中的删除功能:

var box = ['西西',18,'北京'];
var box2 = box.splice(0,2);         //这里表示从第0个位置取2个,
alert(box2);                        //而不是从第0个位置取到第2个位置,输出结果:西西,18
alert(box);                         //当前数组被截取的元素被删除,输出结果:北京

splice中的插入功能:

var box = ['西西',18,'北京'];                       //当前数组
var box2 = box.splice(1,0,'西城','计算机编程');      //从第1个插入点插入元素,0表示不删除
alert(box2);                                       //在第2个位置插入两条
alert(box);                                        //输出:西西,西城,计算机编程,18,北京

splice中的替换功能:

var box = ['西西',18,'北京'];            //替换
var box2 = box.splice(1,1,100);         //截取了第2条,替换成100
alert(box2);                            //输出截取的18
alert(box);                             //输出数组:西西,100,北京
posted on 2018-03-18 17:19  我不是西西  阅读(271)  评论(0)    收藏  举报