《JavaScript高级程序设计第五章--引用类型》之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

every 和 some示例代码

  下面是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]

filter示例代码

  下面是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]

map()示例代码

(注意:支持这些迭代方法的浏览器有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版本和之前的不支持)

  

时间: 2024-10-23 00:33:39

《JavaScript高级程序设计第五章--引用类型》之Object对象和array对象的相关文章

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

javascript高级程序设计 第十一章--DOM扩展

javascript高级程序设计 第十一章--DOM扩展DOM最主要的扩展就是选择符API.HTML5和Element Traversal Selectors API:定义了两个方法 querySelector() 和 querySelectorAll(),能够基于CSS选择符从DOM中取得元素.querySelector()方法接收一个CSS选择符,返回该模式匹配的第一个元素,querySelectorAll()接收的参数一样,但是返回NodeList实例: matchesSelector()

Javascript高级程序设计——第三章:基本概念

javascript高级程序设计——第三章:基本概念 一.语法 EMCA-262通过叫做ECMAScript的“伪语言”为我们描述了javascript实现的基本概念 javascript借鉴了C的语法,区分大小写,标示符以字母.下划线.或美元符号($)开头,注释可以用 // 或者/* */ 严格模式: ECMAScript 5引入了严格模式,在严格模式下不确定的行为将得到处理,通过在顶部添加 “use strict”来启用严格模式: function fuc(){ "use strict&qu

JavaScript高级程序设计(十五)

表单脚本 通过点击提交按钮提交表单时,浏览器会在将请求发送给服务器之前触发submit事件.这样,我们就有机会验证表单数据,并据以决定是否允许表单提交.阻止这个事件的默认行为就可以取消表单提交. 在JavaScript中,以编程方式调用submit()方法也可以提交表单,以编程方式提交表单时,不会触发submit事件,因此要记得在调用此方法之前先验证表单数据. 提交表单时可能出现的最大问题,就是重复提交表单.解决这一问题的办法有两个:在第一次提交表单后就禁用提交按钮,或者利用onsubmit事件

JavaScript高级程序设计学习(四)之引用类型

在javascript中也是有引用类型的,java同样如此. javascript常见也比较常用的引用类型就熟Object和Array. 一个对象和一个数组,这个在前后端分离开发中也用的最多.比如ajax传参,有时我不仅仅只是需要一个参数,例如添加方法,传的是一个对象,对象存在属性.在java中对象也可以说类.因为类存在属性,例如人类,他的属性有身高,体重,姓名,年龄,性别等.而js对象,也可以这样,比如车,它可以有品牌,颜色,造型等等. js对象可以做什么呢?同java对象有什么区别呢? 第一

JavaScript中变量、作用域和内存问题(JavaScript高级程序设计第4章)

一.变量 (1)ECMAScript变量肯能包含两种不同的数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,引用类型值指那些可能由多个值构成的对象. (2)基本数据类型是按值访问,可以操作保存在变量中的实际的值:引用类型的值是保存在内存中对象,操作对象时,实际上是在操作对象的引用而不是实际的对象,引用类型的值是按引用访问的. (3)传递参数.ECMScript中所有的函数的参数都是按值传递的. function setName(obj){ obj.name = "Nichola

《JavaScript高级程序设计第六章--面向对象》section_03

这一部分主要讲讲有关继承的问题. 6.3  继承 许多面向对象语言比如java都支持两种继承方式:接口继承(只继承方法签名)和实现继承(继承实际的方法):由于函数没有签名,在ECMAScript中只能支持实现继承.实现继承主要依靠原型链. 6.3.1 原型链 基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法. 回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针. 所以,试想一下,我们让原型对

JavaScript高级程序设计-第四章-变量、作用域和内存问题

ECMAScript变量 基本类型:5 引用类型 存于内存栈 实际对象位于内存堆 按值访问,可操作保存在变量中实际的值 js不能直接操作对象的内存空间,而是操作它的引用 不可添加属性和方法 可添加属性和方法 变量复制是一个实际的值,互不干扰 变量复制是一个指针,指向相同的对象,改变其中一个变量会影响另一个 Undefined   Null   Boolean   Number   String           variable typeof v v instanceof constructo

JavaScript高级程序设计(5) 引用类型 (上)

本章内容:使用对象.创建并操作数组.理解基本的JavaScript类型.使用基本类型和基本包装类型. 引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起.它也长被称为类,但这种称呼并不妥当.尽管ECMAScript从技术讲是一门面向对象的语言,但他不具备传统的面向对象语言所支持的类和接口等基本结构.引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法. 对象是某个特定引用类型的实例.新对象是使用new操作符