javascript Array object_javascript 스킬 사용 요약

Javascript的数组实质是对象，它把数组的下标转换成字符串，用其作为属性，因此它明显比真正的数组慢，但它可以更方便地使用。

改变自身pop,push,reverse,shift,sort,splice,unshift, 不改变自身concat,join,slice,indexOf,lastIndexOf(后两个为1.6),1.6新增的迭代器：map,filter,forEach,every,some,1.8新增reduce,reduceRight
Array 对象的方法

FF: Firefox, N: Netscape, IE: Internet Explorer

方法	描述	FF	N	IE
concat()	向数组的副本添加新的元素，返回新的数组，原数组不受影响	1	4	4
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。	1	3	4
pop()	删除并返回数组的最后一个元素	1	4	5.5
push()	向数组的末尾添加一个或更多元素，并返回新的长度。	1	4	5.5
reverse()	颠倒数组中元素的顺序。	1	3	4
shift()	删除并返回数组的第一个元素	1	4	5.5
slice()	从某个已有的数组返回选定的元素	1	4	4
sort()	对数组的元素进行排序，有一个可选参数，为比较函数。	1	3	4
splice()	删除元素，并向数组添加新元素。	1	4	5.5
toSource()	代表对象的源代码	1	4	-
toString()	把数组转换为字符串，并返回结果。	1	3	4
toLocaleString()	把数组转换为本地数组，并返回结果。	1	3	4
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。	1	4	6
valueOf()	返回数组对象的原始值	1	2	4

Array 对象的属性

>

方法	描述	FF	N	IE
index		1	3	4
input	在普通的Array中是不具备input属性的，只有在调用String对象的match()方法后返回的数组才具有input属性。它是用来存放匹配前的原字符串的内容。	1	3	4
length	设置或返回数组中元素的数目。	1	2	4

먼저 배열 복제를 살펴보겠습니다. 이제 concat()이 배열을 복제하는 가장 빠른 방법이라는 것이 인식되었습니다. 직접 순회 및 복사, array.slice(0) 및 array.concat()

을 포함한 몇 가지 테스트를 수행해 보겠습니다.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

[Ctrl A 모두 선택 참고:
외부 J를 도입해야 하는 경우 새로고침하여 실행해야 합니다.
]

판사 변수가 참조하는 객체가 배열인지 여부. 코드 복사

코드는 다음과 같습니다.


var isArray = function(a){
&&
typeof a === 'object' &&
typeof a.length === 'number' &&
typeof a.splice === 'function' &&

!( a.propertyIsEnumerable ('length'));
}

배열에 계산 기능이 있도록 하세요. 이 역시 매우 일반적으로 사용되며 특수 재무제표에서는 사용하면 안 됩니다. 코드 복사

코드는 다음과 같습니다.


Function.prototype.method = function(name ,func) {
this.prototype[name] = func;
return this
}
Array.method('reduce',function(fn,value){
for(var; i=0 ,l=this.length;ivalue = fn(this[i],value)
}

반환 값
}); >

사용 방법은 숫자 배열과 관련된 4가지 연산 함수를 만들어서 축소 함수에 대입하면 됩니다. 코드 복사

코드는 다음과 같습니다.


var data = [4,8,10,12,16]
var add = function(a,b){
return a b;
}
var mult = function(a,b){
return a*b;
}
//
var sum = data.reduce 사용 (add,0)

var product = data.reduce(mult,1);

각 메소드에서 요소가 전달된 메소드를 하나씩 실행하도록 합니다. 해당 forEach 메소드는 JavaScript 1.6에서 구현되었지만 IE는 이를 지원하지 않습니다. 사람들은 주요 라이브러리에 해당 구현이 있는 유사한 Each 메소드를 만들었습니다. 아름다운 구현을 살펴보겠습니다(저자는 51JS 고객 서비스 Guoguo입니다): 코드 복사

코드는 다음과 같습니다.


Array.prototype.each = function(fn){
for (var i=0;i this[i].constructor==Array?
this[i].each(fn):
fn.call(this[i],i)
}
[1,[2,[3,[4,[5) ,[6] ,[7,[8,[9,[0]]]]]]]]]].each(
function(){
return Alert(this);

}) ;

위의 방법은 배열의 심층 탐색 외에도 배열과 유사한 객체(예: 인수, NodeList)를 탐색할 수도 있습니다. fn 방법. 하지만 디자인 패턴 관점에서 보면 책임이 너무 많습니다. 각 메서드는 배열 지향이어야 합니다. 객체이거나 배열과 유사한 객체인 경우 JQuery의 makeArray, mootools 및 Prototype의 $와 같은 배열로 변환해야 합니다. 에이. 코드 복사

코드는 다음과 같습니다.


var arrayize = function(iterable){
try {
return Array.prototype.slice.call(iterable);
}catch(e){
var l = iterable.length || 0, array = new Array(l); 🎜>while (l--) array[l] = iterable[l];
return array
}
}

<script> var aArr = new Array(100001).join('a').split(''); var d = new Date(); var bArr = []; for(var i = 0; i < aArr.length; i++){ bArr[i] = aArr[i]; } alert(new Date() - d); </script>
다음으로 순수 배열의 각 기능을 구현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var Each = function(func, array) {
for (var i=0,l = array.length; ifunc(array[i])
}
}

그런 다음 다시 프로토타입 방식으로 변경합니다.

코드 복사 코드는 다음과 같습니다.

Array.prototype.each = function (func) { Each(func,this) };

단, 브라우저가 javascript1.6의 forEach 메소드를 지원하는 경우에는 forEach

코드 복사 코드는 다음과 같습니다.

Array.prototype.each = function(func) {
if(Array.prototype.forEach){
this.forEach(func);
}else{
each(func,this)
}

사용법:

코드 복사 코드는 다음과 같습니다.

[4, 5, 6].each(function(index) { Alert( index " 2 = " (index 2)); })

Firefox 공식 웹사이트에도 구현이 있습니다:

코드 복사 코드는 다음과 같습니다.

if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length >>>
if (typeof fun != "function) ")
throw new TypeError();
var thisp = 인수[ 1];
for (var i = 0; i < len; i )
{
if (i in this)
fun.call(thisp, this[i], i, this )
}
}
}

구체적인 구현을 살펴보겠습니다. jQuery에서 제공하는 각 메서드
jQuery.each(obj,fn,arg)
이 메서드에는 연산할 객체 obj, 연산할 함수 fn, 함수 매개변수 args의 세 가지 매개변수가 있습니다.
ojb 객체를 기준으로 살펴보겠습니다.
1. obj 객체는 배열입니다.
각 메소드는 결과가 반환될 때까지 배열의 하위 요소에 대해 fn 함수를 하나씩 호출합니다. 특정 하위 요소를 호출하는 것은 false입니다. 즉, 제공된 fn 함수를 사용하여 이를 처리하고 특정 조건을 충족한 후 각 메서드 호출을 종료할 수 있습니다. 각 메소드가 arg 매개변수를 제공하는 경우 fn 함수 호출에 의해 전달된 매개변수는 arg입니다. 그렇지 않으면 하위 요소 인덱스, 하위 요소 자체입니다.
2.obj 객체는 배열이 아닙니다
이 메서드와 1의 가장 큰 차이점은 fn 메서드가 반환 값을 고려하지 않고 하나씩 실행된다는 점입니다. 즉, fn 함수가 false를 반환하더라도 obj 객체의 모든 속성은 fn 메서드에 의해 호출됩니다. 호출에 전달된 매개변수는 1과 유사합니다.

코드 복사 코드는 다음과 같습니다.

jQuery.each=function( obj, fn , args ) {
if ( args ) {
if ( obj.length == 정의되지 않음 ){
for ( var i in obj )
fn.apply( obj, args )
}else{
for ( var i = 0, ol = obj.length; i < ol; i ) {
if ( fn.apply( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == undefine ) {
for ( var i in obj )
fn.call( obj, i, obj ) ;
}else{
for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj [ i] ){}
}
}
return obj;
}

각 메서드에서 fn의 특정 호출 메서드에 유의해야 합니다. fn(i,val) 또는 fn(args)는 간단하지 않지만 fn.call(val,i,val) 또는 fn.apply(obj.args) 형식을 취합니다. 이는 fn의 자체 구현에서 이를 의미합니다. , 이 포인터를 직접 사용하여 배열이나 개체의 하위 요소를 참조할 수 있습니다. 이 방법은 대부분의 jQuery에서 사용되는 구현 방법입니다.

코드 복사 코드는 다음과 같습니다.

Array.prototype.contains = function (obj) {
return this.indexOf(obj) != -1;
};
Array.prototype.copy = function (obj) {
return this.concat();
};
Array.prototype.insertAt = function(obj, i) {
this.splice(i, 0, obj);
};
Array.prototype.insertBefore = function(obj, obj2) {
var i = this.indexOf(obj2);
if (i == -1)
this.push(obj);
else
this.splice(i, 0, obj);
};
Array.prototype.removeAt = function (i) {
this.splice(i, 1);
};
Array.prototype.remove = function(obj) {
var i = this.indexOf(obj);
if (i != -1)
this.splice(i, 1);
};