ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptの配列操作関数のメソッドを解説した詳細なサンプルコード

JavaScriptの配列操作関数のメソッドを解説した詳細なサンプルコード

黄舟
黄舟オリジナル
2017-03-16 14:49:181336ブラウズ

1. concat() は 2 つ以上の array を連結します

このメソッドは既存の配列を変更せず、接続された配列のコピーのみを返します。
例:

1 <script type="text/javascript">
2        var arr = [1, 2, 3];
3        var arr1 = [11, 22, 33];
4        document.write(arr.concat(4, 5, arr1));
5 </script>

出力結果:

1,2,3,4,5,11,22,33

2. join()

配列のすべての要素をstringに入れます。要素は指定された区切り文字で区切られます。

例:

1 <script type="text/javascript">
2       var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;];
3       var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;
4 </script>

list result:

'ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6item 3bed06894275b65c1ab86501b08a632eb2c7124109f4af677fe5803048cc15dc5'

これが断然最速の方法です!システムが内部で何を行うかに関係なく、ネイティブ コード (join() など) を使用すると、通常は非ネイティブ コードよりもはるかに高速になります。 ——James Padolsey、james.padolsey.com

3. Pop() 削除して配列の最後の要素を返します

Pop() メソッドは配列の最後の要素を削除し、配列の長さを減らします。 1を引いて、削除された要素の値を返します。

配列がすでに空の場合、pop() は配列を変更せず、未定義の値を返します

例:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.pop() + "<br/>");
5       document.write(arr);
6 </script>

出力結果:

George,John,Thomas
Thomas
George,John

4. Push() は 1 つ以上の要素を末尾に追加します。配列を返し、新しい長さを返します

例:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.push("James") + "<br/>");
5       document.write(arr);
6 </script>

出力結果:

George,John,Thomas
4
George,John,Thomas,James

5, unsh

ift() は、1 つ以上の要素を配列の先頭に追加し、新しい長さを返します

例:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.unshift("James") + "<br/>");
5       document.write(arr);
6 </script>

出力結果:

George,John,Thomas
4
James,George,John,Thomas

6. reverse() は配列内の要素の順序を反転します

例:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.reverse());
5 </script>

出力結果:

George,John,Thomas
Thomas,John,George

7.配列

例:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.shift() + "<br/>");
5       document.write(arr);
6 </script>

出力結果:

George,John,Thomas
George
John,Thomas

8、slice(start,

end) は、既存の配列から選択された要素を返します

このメソッドは配列を変更するのではなく、 subarray

例:

1 <script type="text/javascript">
2       var arr = ["George", "John", "Thomas"];
3       document.write(arr + "<br/>");
4       document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾
5       document.write(arr);
6 </script>

出力結果:

George,John,Thomas
John,Thomas
George,John,Thomas

9,

sort() 配列の要素

を配列への

参照 でソートします。配列は元の配列でソートされ、コピーは生成されないことに注意してください

このメソッドのデフォルトは、文字エンコーディング (ASCII) の順にソートされます

例:

1 <script type="text/javascript">
2     var arr = new Array(6);
3     arr[0] = "John";
4     arr[1] = "George";
5     arr[2] = "Thomas";
6     document.write(arr + "<br/>");
7     document.write(arr.sort());
8 </script>

出力結果:

John,George,Thomas
George,John,Thomas

別の例を見てみましょう例:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort());
11 </script>

出力結果:

10,5,40,25,1000,1
1,10,1000,25,40,5

数値の大きさでソートしたい場合は、デフォルトのソート方法を変更し、ソート規則を自分で指定する必要があります。

次のように:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3     arr[0] = 10
 4     arr[1] = 5
 5     arr[2] = 40
 6     arr[3] = 25
 7     arr[4] = 1000
 8     arr[5] = 1
 9     document.write(arr + "<br/>");
10     document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小
11 </script>

出力結果:

10,5,40,25,1000,1
1,5,10,25,40,1000

降順に並べ替えたい場合はどうすればよいですか?

ソートルールを次のように変更します:

function (a, b) {return b – a;}

OKです

10. splice()は要素を削除し、新しい要素をarrayに追加します

splice()メソッドslide()メソッドの機能が異なります。 splice()メソッドは配列を直接変更します

(1) 指定範囲の配列要素を削除します:

 1 <script type="text/javascript">
 2     var arr = new Array(6);
 3    arr[0] = "George"; 
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
12    document.write(arr);
13 </script>

出力結果:

George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2) 指定された範囲から開始しますsubscript 指定した要素を挿入(要素数制限なし):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"
12    document.write(arr);
13 </script>

出力結果:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3) 指定範囲の配列要素を削除し、指定した要素に置き換えます(要素数制限なし) ):

 1 <script type="text/javascript">
 2    var arr = new Array(6);
 3    arr[0] = "George";
 4    arr[1] = "John";
 5    arr[2] = "Thomas";
 6    arr[3] = "James";
 7    arr[4] = "Adrew";
 8    arr[5] = "Martin";
 9 
10    document.write(arr + "<br/>");
11    arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素),并用"William","JACK"进行替换
12 document.write(arr);
13 </script>

出力結果:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

以上がJavaScriptの配列操作関数のメソッドを解説した詳細なサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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