次のエディタでは、基本および高度な JavaScript 配列メソッドの概要が表示されます (推奨)。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして見てみましょう
一般的な配列メソッドの概要:
以下に、es3 でよく使用される配列メソッドのみをまとめます。合計で 11 個あります。 es5 の 9 つの新しい配列メソッドについては、後で個別にまとめます。
配列を接続する 1 つのメソッド: concat()
配列を文字列に変換する 2 つのメソッド: join()、toString()
配列要素を追加および削除する 6 つのメソッド: Pop()、push()、shift () 、unshift()、slice()、splice()
2つの配列ソートメソッド: reverse()、sort()
配列を接続するメソッド:
1.機能: 2 つの配列を接続し、新しい配列にマージします。 使用法: arr1.concat(arr2, arr2...)
例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" var arr2 = new Array(3) arr2[0] = "James" arr2[1] = "Adrew" arr2[2] = "Martin" document.write(arr.concat(arr2)) </script>
George,John,Thomas,James,Adrew,Martin
配列を文字列に変換するメソッド:
1. join()
関数: 配列内のすべての要素を文字列に入れるために使用されます。指定された区切り文字で区切られます。 使用法: arrayObject.join(separator)
例:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>
George.John.Thomas
注: 戻り値は文字列です。区切り文字がない場合、デフォルトはカンマ区切りです。
2. toString()
関数: 配列を文字列に変換し、結果を返します。 使用法: arrayObject.toString()
例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George"； arr[1] = "John"； arr[2] = "Thomas"； document.write(arr.toString())； </script>
George, John, Thomas
戻り値は、パラメータなしの join() メソッドによって返される文字列と同じです。配列内の要素はカンマで区切られます。
配列要素を追加および削除するメソッド:
1.pop()
関数: 配列の最後の要素を削除して返すために使用されます。 使用法: arrayObject.pop()
pop() メソッドは、arrayObject の最後の要素を削除し、配列の長さを 1 減らして、削除した要素の値を返します。配列がすでに空の場合、pop() は配列を変更せず、未定義の値を返します。
例:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr)
document.write("<br />")
document.write(arr.pop())
document.write("<br />")
document.write(arr)
</script>George,John,Thomas Thomas George,John
2.push()
機能: 1 つ以上の要素を配列の末尾に追加し、新しい長さを返すことができます。 使用法: arrayObject.push(newelement1, newelement2,....,newelementX)
新しい配列を作成するのではなく、arrayObject を直接変更します。 Push() メソッドと Pop() メソッドは、配列によって提供される first-in-last-pop 関数を使用します。
例:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>George,John,Thomas 4 George,John,Thomas,James
3.shift()
関数: 配列の最初の要素を削除し、最初の要素の値を返すために使用されます。 使用法: arrayObject.shift()
配列が空の場合、shift() メソッドは何も行わず、未定義の値を返します。このメソッドは新しい配列を作成するのではなく、元の arrayObject を直接変更することに注意してください。
例:
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.shift() + "<br />") document.write(arr) </script>
George,John,Thomas George John,Thomas
4, unshift()
機能: 1 つ以上の要素を配列の先頭に追加し、新しい長さを返すことができます。 使用法: arrayObject.unshift(newelement1,newelement2,....,newelementX)
unshift() メソッドは、arrayObject の先頭にパラメータを挿入し、既存の要素をシーケンス添字内の上位の要素に移動してスペースを残します。メソッドの最初の引数は配列の新しい要素 0 になり、2 番目の引数がある場合は新しい要素 1 になり、以下同様になります。
unshift() メソッドは新しいものを作成するのではなく、元の配列を直接変更することに注意してください。 unshift() メソッドは Internet Explorer では正しく機能しません。
例:
<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)
</script>George,John,Thomas 4 William,George,John,Thomas
5、slice()
関数: 既存の配列から選択された要素を返します。 使用法: arrayObject.slice(start,end)
必須。選択範囲を開始する位置を指定します。負の場合は、配列の末尾からの位置を指定します。つまり、-1 は最後の要素を指し、-2 は最後から 2 番目の要素を指し、以下同様になります。 | |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 |
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.slice(1) + "<br />") document.write(arr) </script>
输出：
George,John,Thomas John,Thomas George,John,Thomas
6，splice（）
作用：向/从数组中添加/删除项目，然后返回被删除的项目。
用法：arrayObject.splice(index,howmany,item1,.....,itemX)
index | 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 |
item1, ..., itemX | 可选。向数组添加的新项目。 |
该方法会改变原始数组。
示例：
<script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />")arr.splice(2,0,"William") document.write(arr + "<br />") </script>
输出：
George,John,Thomas,James,Adrew,Martin George,John,William,Thomas,James,Adrew,Martin
数组元素排序：
1、reverse（）
作用：用于颠倒数组中元素的顺序。
用法：arrayObject.reverse()
该方法会改变原来的数组，而不会创建新的数组。
示例：
<script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.reverse()) </script>
输出：
George,John,Thomas Thomas,John,George
2，sort（）
作用：用于对数组的元素进行排序。
用法：arrayObject.sort(sortby)
Sortby：可选，按规定是顺序排序。必须是函数。
相对于其他方法来说复杂了一点。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
<script type="text/javascript">
function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>输出：
10,5,40,25,1000,1 1,5,10,25,40,1000
上面这个例子是让数组元素从小到大排序，如果想实现从大到小排序，只需要将sortNumber函数中的a-b改为b-a即可。
<script type="text/javascript">
function sortNumber(a,b)
{
return b - a;
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
document.write(arr.sort(sortNumber))
</script>输出：
10,5,40,25,1000,1 1000,40,25,10,5,1
补充：
数组对象的属性：
属性 | 描述 |
constructor | 返回对创建此对象的数组函数的引用。 |
length | 设置或返回数组中元素的数目。 |
prototype | 使您有能力向对象添加属性和方法。 |
以下这个例子展示了如何使用constructor属性
<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}
</script>输出：
This is an Array
length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素，而且以元素 0 开始的常规数组而言，属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。
获取数组的长度：arrayObject.length
以上が基本および高度な JavaScript 配列の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
