《JavaScript高级编程》学习笔记之object和array引用类型_javascript技巧

本文给大家分享我的javascript高级编程学习笔记之object和array引用类型,涉及到javascript引用类型相关知识,大家一起看看把。

1. Object类型

     大多数引用类型值都是Object类型的实例;而且Object也是ECMAScript中使用最多的一个类型。

     创建Object实例有如下两种方式:

new操作符后跟Object构造函数:

   var person=new Object( );
   person.name="webb";
   person.age=25;

对象字面量表示法:

  var person={
     name:"webb",
     age:25
   };

2. Array类型

     除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了。
     ECMAScript数组的每一项可以保存任何类型的数据(例如,第一个位置可存放字符串,第二个位置保存数值,第三个位置保存对象,以此类推)。而且ECMAScript数组的大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。

     创建数组的基本方式有两种,

使用Array构造函数:

var colors=new Array( );
     var colors=new Array(20);   //也可设置length属性
     var colors=new Array("red","blue","green");   //包含3个字符串的数组
     var colors=Array(3);   //可省略new操作符

数组字面量表示法

 var colors=["red","blue","green"];
     alert(colors[0]);   //显示第一项
     colors[2]="black";   //修改第三项
     colors[3]="brown";   //新增第四项

     注:数组的length属性很有特点——它不是只读的。因此通过设置这个属性,可以从数组的末尾移除或添加项。例如,

     var colors=["red","blue","green"];
     colors.length=2;
     alert(colors[2]);   //undefined
     colors[colors.length]="black";   //在末尾添加项

     2.1 检测数组

          对于一个网页,或者一个全局作用域而言,使用instanceof操作符就能判断某个对象是不是数组:

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

          instanceof操作符的问题在于,它假定只有一个全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

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

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

支持该方法的浏览器有IE9+、Firefox 4+、Safari 5+、Opera 10.5+和Chrome。

     2.2 转换方法

          调用数组的toString( )方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。而调用valueOf( )返回的还是数组。实际上,为了创建这个字符串会调用数组每一项的toString( )方法。例如,

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

          另外,toLocaleString( )方法经常也会返回与toString( )和valueOf( )方法相同的值,但也不总是如此。当调用数组的toLocaleString( )方法时,它也会创建一个数组值的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于,这一次为了取得每一项的值,调用的是每一项的toLocaleString( )方法,而不是toString( )方法。

  var person1={
        toLocaleString:function(){
          return "webbxx";
        },
        toString:function(){
          return "webb";
        }
     };
     var person2={
        toLocaleString:function(){
          return "susanxx";
        },
        toString:function(){
          return "susan";
        }
     };
     var people=[person1,person2];
     alert(people);   //webb,susan
     alert(people.toString());   //webb,susan
     alert(people.toLocaleString());   //webbxx,susanxx
     使用join( )方法也可输出数组,并可指定分隔符,默认为逗号:
          var colors=["red","blue","green"];
          alert(colors.join(","));   //red,blue,green
          alert(colors.join("||"));   //red||blue||green

     2.3 栈方法(LIFO)

          push( ):接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度;
          pop( ):从数组末尾移除最后一项

  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

     2.4 队列方法(FIFO)

          shift( ):移除数组的第一项并返回该项,同时数组长度减1;
          unshift( ):顾名思义,与shift( )用途相反,能在数组前端添加任意个项并返回数组的长度。

     2.5 重排序方法

          reverse( ):反转数组项的顺序;

          sort( ):默认按升序排列;为了实现排序,sort( )方法会调用每项的toString( )方法,然后比较得到的字符串,以确定如何排序。即使每一项都是数值,比较的也是字符串,如下所示。

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

          这种排序方式在很多情况下都不是最佳方案。因此sort( )方法可以接受一个比较函数作为参数,以便指定哪个值位于哪个值的前面。

 function compare(value1,value2){
        if(value1<value2){
          return -1;   //value1在value2之前
        }else if(value1>value2){
          return 1;
        }else{
          return 0;
        }
     }

          这个比较函数可以适用大多数据类型,只要将其作为参数传递给sort( )方法即可,如下,

             

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

     2.6 操作方法

          concat( ):基于当前数组中的所有项创建一个新数组。例如,

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

          slice( ):基于当前数组中的一个或多个项创建一个新数组。例如,

       var colors=["red","green","blue","yellow","purple"];
        var colors2=colors.slice(1);   //green,blue,yellow,purple
        var colors3=colors.slice(1,3);   //green,blue,yellow

          splice( ):这个方法恐怕是最强大的数组方法了,主要用途是向数组的中部插入项,但使用这种方法的方式则有如下2种。

删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。

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

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

     2.7 位置方法

          indexOf( )和lastIndexOf( ):这两个方法都接受两个参数:要查找的项和(可选的)表示查找起点位置的索引。前者从开头开始向后查找,后者从末尾向前查找

   2.8 迭代方法

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

every( ):对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
filter( ):对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
forEach( ):对数组中的每一项运行给定函数,这个方法无返回值。
map( ):对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
some( ):对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

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

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.every(function(item,index,array){
          return item>2;
        });
        alert(someResult);   //true
        var filterResult=numbers.every(function(item,index,array){
          return item>2;
        });
        alert(filterResult);   //[3,4,5,4,3]
        var mapResult=numbers.every(function(item,index,array){
          return item*2;
        });
        alert(mapResult);   //[2,4,6,8,10,8,6,4,2]

     2.9 归并方法

          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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索引用类型
, js引用类型
javascript引用类型
,以便于您获取更多的相关知识。

时间: 2024-08-19 22:36:29

《JavaScript高级编程》学习笔记之object和array引用类型_javascript技巧的相关文章

JavaScript高级程序设计 读书笔记之八 Function类及闭包_javascript技巧

Function类 定义 Function类可以表示开发者定义的任何函数,用Function类直接创建函数的语法如下: var function_name=new Function(agrument1,agrument2,...,argumentN,function_body); 每个argument都是一个参数,最后一个参数是函数主体(要执行的代码). 示例: 复制代码 代码如下: function sayHi(sName,sMessage){ alert("Hello "+sNam

javascript高级编程之函数表达式 递归和闭包函数_javascript技巧

定义函数表达式有两种方式:函数声明和函数表达式. 函数声明如下: function functionName(arg0,arg1,arg2){ //函数体 } 首先是function关键字,然后是函数的名字. FF,Safrai,Chrome和Opera都给函数定义了一个非标准的name属性,通过这个属性可以访问到函数指定的名字.这个函数的值永远等于跟在function关键字后面的标识符. //只在FF,Safari,Chrome和Opera有效 alert(functionName.name)

JavaScript高级程序设计 阅读笔记(十七) js事件_javascript技巧

一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的

JavaScript继承学习笔记【新手必看】_javascript技巧

JavaScript作为一个面向对象语言(JS是基于对象的),可以实现继承是必不可少的,但是由于本身并没有类的概念,所以不会像真正的面向对象编程语言通过类实现继承,但可以通过其他方法实现继承.实现继承的方法很多,下面就只是其中的几种. 一. 原型链继承 function Person() { //被继承的函数叫做超类型(父类,基类) this.name='mumu'; this.age='18'; } Person.prototype.name='susu';//当属性名相同时需就近原则,先在实

JavaScript高级教程5.6之基本包装类型(详细)_javascript技巧

为了便于操作基本类型值,ECMAScript还提供了3个特殊的引用类型:Boolean,Number,String. 实际上,每当读取一个基本类型值的时候,后台应付创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据. var s1="some text"; var s2=s1.substring(2); console.log(s2);//me text 这个例子中s1包含了一个字符串,字符串是基本类型值.第二行调用了s1的subsstring()方法,并将返回

Oracle专家高级编程学习笔记( 二)

oracle|笔记|编程|高级 Oracle体系结构的3个主要组件:1.文件:组成数据库实例的5个文件(参数文件,控制文件,数据文件,临时数据文件,重做日志文件)2.系统全局区域SGA( System Global Area): Java池,共享池等3.物理进程与线程: 在数据库上运行3种不同类型的进程(服务器server进程,后台backgroud进程,从属slave进程) 术语解释:数据库: 物理操作系统文件的集合实例: 一组oracle进程和SGA二者关系:一个数据库可以被多个实例装载mo

JavaScript高级程序设计 读书笔记之十一 内置对象Global_javascript技巧

内置对象 定义:由ECMAScript实现提供的.独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现. 由定义可知开发者不必明确实例化内置对象,它已被实例化了.在ECMAScript-262只定义了两个内置对象,即Global和Math Global Global对象是ECMAScript中最特别的对象,因为实际上它根本不存在. 由于在ECMAScript中不存在独立的对象,所有函数都必须是某个对象的方法,如前面提到的isNaN().isFinite().parseInt()和p

JavaScript 函数式编程实践(来自IBM)第1/3页_javascript技巧

函数式编程简介 说到函数式编程,人们的第一印象往往是其学院派,晦涩难懂,大概只有那些蓬头散发,不修边幅,甚至有些神经质的大学教授们才会用的编程方式.这可能在历史上的某个阶段的确如此,但是近来函数式编程已经在实际应用中发挥着巨大作用了,而更有越来越多的语言不断的加入诸如 闭包,匿名函数等的支持,从某种程度上来讲,函数式编程正在逐步"同化"命令式编程. 函数式编程思想的源头可以追溯到 20 世纪 30 年代,数学家阿隆左 . 丘奇在进行一项关于问题的可计算性的研究,也就是后来的 lambd

javascript框架设计读书笔记之模块加载系统_javascript技巧

模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: 复制代码 代码如下: function loadJs(url , callback){ var node = document.createElement("script");       node[window.addEventListener ? "onload":"onre