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 すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

Judge変数によって参照されるオブジェクト 配列であるかどうか。 コードをコピー

コードは次のとおりです。


var isArray = function(a){
return 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;
これを返す;
}
Array.method('reduce',function(fn,value){
for(var) i=0 ,l=this.length;ivalue = fn(this[i],value)
}

戻り値; >

使用方法は、数値配列と関連する 4 つの算術関数を作成し、reduce 関数に代入するだけです。

コードをコピー

コードは次のとおりです:

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);

各メソッドは、渡されたメソッドを 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 warning(this);
}) ;

上記は、配列の詳細なトラバースに加えて、オブジェクトのすべてのプロパティ (引数、NodeList など) もトラバースできます。 fnメソッド。しかし、デザインパターンの観点から見ると、各メソッドは配列指向である必要があり、それがオブジェクトまたは配列のようなオブジェクトである場合は、JQuery の makeArray、mootools、Prototype の $ などの配列に変換する必要があります。 A.

コードをコピー コードは次のとおりです。

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


次に、純粋な配列の each 関数を実装できます。

コードをコピー コードは次のとおりです。

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 公式 Web サイトにも実装があります:

コードをコピーします コードは次のとおりです:

if (!Array.prototype.forEach)
{
Array.prototype.forEach = function(fun /*, thisp*/)
{
var len = this.length >>>
if (typeof fun != "関数")
throw new TypeError();
var thisp = argument[ 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 の 3 つのパラメーターがあります。
ojb オブジェクトに基づいて説明します。
1. obj オブジェクトは配列です。
各メソッドは、結果が返されるまで、配列内のサブ要素に対して fn 関数を 1 つずつ呼び出します。特定のサブ要素の呼び出しは false です。つまり、提供された fn 関数で処理し、特定の条件を満たした後で各メソッド呼び出しを終了できます。 each メソッドが arg パラメーターを提供する場合、fn 関数呼び出しによって渡されるパラメーターは arg です。それ以外の場合は、サブ要素のインデックス、サブ要素自体です。
2.obj オブジェクトは配列ではありません
このメソッドと 1 の最大の違いは、fn メソッドが戻り値を考慮せずに 1 つずつ実行されることです。つまり、fn 関数が false を返した場合でも、obj オブジェクトのすべてのプロパティが fn メソッドによって呼び出されます。呼び出しで渡されるパラメータは 1 に似ています。

コードをコピー コードは次のとおりです。

jQuery.each=function( obj, fn , args ) {

if ( args ) {
if ( obj.length == unknown ){
for ( var i in obj )
fn.apply( obj, args ); }else{
for ( var i = 0, ol = obj.length; i
if ( fn.apply( obj, args ) === false )
break;
}
}
} else {
if ( obj.length == unknown ) {
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);
};

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。