"JavaScript 고급 프로그래밍" 연구 노트 객체 및 배열 참조 유형_javascript 기술

이 기사에서는 JavaScript 참조 유형에 대한 지식이 포함된 객체 및 배열 참조 유형에 대한 JavaScript 고급 프로그래밍 연구 노트를 공유합니다.

1. 객체 종류

대부분의 참조 유형 값은 Object 유형의 인스턴스이며 Object는 ECMAScript에서 가장 일반적으로 사용되는 유형이기도 합니다.

객체 인스턴스를 생성하는 방법에는 두 가지가 있습니다.

새 연산자 다음에 객체 생성자:

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

객체 리터럴 표기법:

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

2. 배열형

Object 외에도 Array 유형은 아마도 ECMAScript에서 가장 일반적으로 사용되는 유형일 것입니다.
ECMAScript 배열의 각 항목은 모든 유형의 데이터를 보유할 수 있습니다(예를 들어 문자열은 첫 번째 위치에 저장되고 값은 두 번째 위치에 저장되고 객체는 세 번째 위치에 저장될 수 있습니다). 더욱이 ECMAScript 배열의 크기는 동적으로 조정될 수 있습니다. 즉, 새 데이터를 수용하기 위해 데이터가 추가됨에 따라 자동으로 커질 수 있습니다.

배열을 만드는 기본 방법에는 두 가지가 있습니다.

배열 생성자 사용:

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";   //新增第四项

참고: 배열의 길이 속성은 매우 특별합니다. 읽기 전용이 아닙니다. 따라서 이 속성을 설정하면 배열 끝에서 항목을 제거하거나 추가할 수 있습니다. 예를 들어

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

 2.1 감지 어레이

웹 페이지 또는 전역 범위의 경우, 인스턴스 오브 연산자를 사용하여 객체가 배열인지 확인할 수 있습니다.

   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() 메서드가 호출되면 배열 값의 쉼표로 구분된 문자열도 생성됩니다. 처음 두 메서드와의 유일한 차이점은 이번에는 각 항목의 값을 얻기 위해 toString() 메서드 대신 각 항목의 toLocaleString() 메서드를 호출한다는 것입니다.

  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