ホームページ  >  記事  >  ウェブフロントエンド  >  Javascriptの配列メソッドまとめ(推奨)_JavaScriptスキル

Javascriptの配列メソッドまとめ(推奨)_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 16:06:151133ブラウズ

Array.prototype は、配列を操作するための多くのメソッドを定義します。ECMAScript3

のいくつかのメソッドを次に示します。

1.Array.join() メソッド

このメソッドは、配列内の要素を文字列に変換し、指定された記号に従ってそれらを結合し、最後に生成された文字列を返します。これには、配列要素を接続するための記号であるパラメーターを含めることができます。デフォルトはカンマです。 。

var ay = [1,2,3];
ay.join();       // =>"1,2,3" 
ay.join("+");     // => "1+2+3" 
ay.join(" ");     // =>"1 2 3"
ay.join("");      // =>"123"

var by = new Array(10) //新建一个长度为10的空数组
by.join("-");      //=> "---------" 连接10个空元素

2.Array.reverse() メソッド

このメソッドは、配列内の要素の順序を逆にし、逆の順序で配列を返します。このメソッドは現在の配列を変更しますが、新しい配列は作成しません。

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

var a = [1,2,3];
a.reverse().join(); //=>"3,2,1" 、この時点では a=[3,2,1]

3.Array.sort() メソッド

このメソッドは配列内の要素をソートし、ソートされた配列を返します。 sort() メソッドがパラメーターを受け取らない場合、配列はアルファベット順にソートされます。配列に未定義の要素が含まれている場合は、配列の末尾に向かってソートされます。

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

var as = ["バナナ","チェリー","リンゴ"];
as.sort();
as.join(" "); //=>「アップルバナナチェリー」

比較関数をパラメータとして sort() メソッドに渡し、指定された比較関数を使用して配列を並べ替えることもできます。比較関数の戻り値が 0 より小さい場合は、最初のパラメーターが最初に来ます。逆に、戻り値が 0 より大きい場合は 2 番目のパラメーターが最初に来ます。2 つのパラメーターの値が等しい場合は、0 が返されます。

コードをコピー コードは次のとおりです:
var sy = [1111,222,4,33];
sy.sort(); sy.sort(function(a,b){
return a-b;
});

注: ここでは匿名関数を使用することが最も適切です。匿名関数は一度だけ呼び出され、関数名
を指定する必要がないからです。

4.Array.concat() メソッド

このメソッドは、新しい配列を作成して返し、元の配列要素とメソッド内の各要素を接続して新しい配列を形成します。このメソッドは、メソッド内のパラメーターを再帰的に呼び出しません。

コードをコピーします コードは次のとおりです: var a = [1,2,3];
a.concat(4,5); //=>"1,2,3,4,5"
a.concat([4,5]); //=>"1,2,3,4,5"
a.concat([4,5],[6,7]); //=>"1,2,3,4,5,6,7"
a.concat(4,[5,[6,7]]); //=>"1,2,3,4,5,[6,7]"



5.Array.slice() メソッド

このメソッドは、指定された配列のフラグメントまたはサブ配列を返します。このメソッドには、フラグメントの開始位置と終了位置をそれぞれ指定する 2 つのパラメーターを指定できます。返される配列には、最初のパラメーターで指定された要素とそれまでのすべての要素が含まれます。ただし、2 つのパラメータで指定された位置にある最初の配列要素は含まれません。パラメータが 1 つしかない場合、パラメータには配列の最後の要素に対する相対的な位置を示す負の値を指定できます。このメソッドは、呼び出される配列を変更しません。

コードをコピーします コードは次のとおりです: var d =[1,2,3,4,5];
d.slice(1,2); //=>"2"
d.slice(1,-1); //=>"2,3,4"
d.slice(3); //=>"4,5"
d.slice(-3,-1); //=>"3,4"

6.Array.splice()方法

该方法是在数组中插入或删除元素的通用方法,该方法会修改原始数组。该方法可以包含多个参数,第一个参数指定要在数组中插入或删除的起始位置,第二个参数制定了删除元素的个数,若不指定则将起始位置以及后面元素全部删除,两个参数之后的参数指定了插入数组的元素,该方法返回由删除元素组成的数组。

var e = [1,2,3,4,5,6];
e.splice(4);          //=> 返回[5,6] ; e是[1,2,3,4]
e.splice(1,2);         //=> 返回[2,3] ; e是[1,4]
      
var f = [1,2,3,4,5];
f.splice(2,0,"a","b");   //=>返回[]; f是[1,2,a,b,3,4,5]
f.splice(2,2,[6,7],3);   //=>返回[a,b]; f是[1,2,[6,7],3,4,5]

7.push()和pop()方法

这两个方法将数组当做栈使用,push()方法是在数组尾部添加一个或多个元素,并返回数组的长度。pop()方法是删除数组的最后一个元素,减少数组长度并返回删除的值。

8.unshift()方法和shift()方法

这两个方法是在数组头部进行添加删除操作,unshift()方法是在数组头部添加一个或多个元素,返回数组长度。shift()方法是删除数组第一个元素并返回。

var a=[];     //[]
a.push(1,2);  //[1,2]
a.pop();      //[1]

a.unshift(2,3); //[2,3,1]
a.shift();      //[3,1]

9.toString()和toLocaleString()方法

这两个方法是将数组每个元素转化为字符串,toString()是将每个元素转化为字符串并且输出用逗号隔开。toLocaleString()方法是数组每个元素调用toLocaleString()转化为字符串,并使用本地化分隔符连接。

下面在介绍几个ECMAScript5中特有的数组方法,在介绍方法之前首先做一个大致了解。大多数方法的第一个参数接受一个函数,并且对数组每个元素调用一次这个函数,如果说稀疏数组,不存在的元素不调用函数。大多数情况下,调用的函数使用三个参数:数组元素,元素的索引以及数组本身。

1.forEach()方法

该方法从头到尾遍历数组,数组每个元素都调用指定的函数。该方法在遍历完所有数组元素之前不会终止。若想提前终止,必须将forEach()放到try块中,并可以抛出异常。

var data=[1,2,3,4,5]
var sum = 0;
data.forEach(function(value){   //=>value为数组元素
  sum+=value;
})                        //=>15

data.forEach(function(value,i,a){ //=>三个参数分别指代数组元素,元素索引和数组
  a[i] = v+1;
})                        //=>data=[2,3,4,5,6]

2.map()方法

该方法将数组的每个元素传递给指定的函数,并返回一个新数组,该数组包含了数组元素调用函数对应的返回值。如果是稀疏数组,返回的新数组也是同样结构的系数数组。

var a=[1,2,3];
var b=a.map(function(v){
  return v*v;
})  //=> b=[1,4,9]

3.filter()方法--类似于条件筛选

该方法返回的是原始数组的一个子集,传递的函数用来做逻辑判定,返回true或false,如果返回的值为true或可以转化为true,则当前数组元素就是子集的成员,添加到返回的数组中。该方法会跳过稀疏数组的空元素。

var a=[5,4,3,2,1]
var smalla=a.filter(function(v){
  return v<3; 
})                         //=>返回[2,1]
var everya=a.filter(function(v,i){ //=>i表示元素索引
  return i%2==0; 
})                         //=>返回[5,3,1]


4.every()和some()方法

这两个方法是对数组进行逻辑判定,对数组每个元素运用指定函数进行判定返回true或false。
every()方法是当且仅当数组中所有元素调用判定函数都返回true,才返回true,否则返回false。
some()方法是当数组中至少有一个元素调用判定函数返回true,就返回true,否则返回false。

这两个方法都是一旦确认返回值后就不在遍历数组元素了。

5.reduce()和reduceRight()方法

这两个方法使用指定的函数将数组元素进行组合,生成单个值。
reduce()需要两个参数,第一个是执行化简组合的操作函数,第二个是组合的初始值。和前面几个方法不同的是,常见的三个参数(数组元素、元素索引和数组本身)会作为操作函数的2~4个参数传递给函数,第一个参数是到目前为止进行计算组合的结果。
如果是针对空数组,并不指定初始值时调用reduce()方法会导致类型错误异常。
reduceRight()方法和reduce()方法的工作原理相同,不同的是其按数组索引从高到低进行处理(即从右到左进行合并处理)

6.indexOf()和lastIndexOf()方法

这两个方法都是用于在整个数组中搜索具体给定的值,并返回第一个匹配元素的索引值,若没有则返回-1.indexOf()方法是从头到尾进行搜索,而lastIndexOf()是从尾到头进行搜索。

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