이 기사에서는 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); //22.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,152.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,yellowsplice( )：这个方法恐怕是最强大的数组方法了，主要用途是向数组的中部插入项，但使用这种方法的方式则有如下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
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
