ホームページ > 記事 > 配列メソッドの最も包括的な概要

配列メソッドの最も包括的な概要

小云云オリジナル: 2017-12-13 15:35:112016ブラウズ

いわゆる配列は、順序のない要素のシーケンスです。同じ型の変数の限定されたコレクションに名前が付けられている場合、その名前は配列名になります。配列を構成する個々の変数は、配列のコンポーネントと呼ばれ、配列の要素とも呼ばれ、添え字変数と呼ばれることもあります。配列の個々の要素を区別するために使用される数値は、添え字と呼ばれます。プログラミングにおいて、配列は、処理の便宜のために、同じタイプの複数の要素を順序付けされていない方法で編成した形式です。同様のデータ要素のこれらの順序付けされていないコレクションは、配列と呼ばれます。この記事では、皆さんの役に立つことを願って、ネイティブ JavaScript メソッドを使用する配列メソッドの最も完全な概要を主に共有します。

配列の作成

var colors = [];
var colors = ['red', 'blue'];

配列の検出

if(arr instanceof Array) {}

Webページに複数のフレームが含まれている場合、次のメソッドを使用して配列を検出する必要があります

if(Array.isArray(arr)) {}

`arr.valueOf()arr.valueOf()`

var colors = ['red', 'yellow'];
colors.valueOf();
// > ['red', 'yellow']

`arr.toString()`

var colors = ['red', 'yellow'];
colors.toString();
// > "red,yellow"

`arr.push(item)`

从数组末尾添加元素，并返回新数组的长度

var colors = ['red', 'yellow'];
colors.push('pink');
// > 3

`arr.pop()`

从数组末尾删除元素，并返回被删除的元素

var colors = ['red', 'yellow'];
colors.pop();
// > 'yellow'

`arr.unshift(item)`

从数组头部添加元素，并返回新数组的长度

var colors = ['green', 'pink'];
colors.unshift('pink');
// > 3

`arr.shift()`

从数组头部删除元素，并返回被删除的元素

var colors = ['yellow', 'orange'];
colors.shift();
// > 'yellow'

`arr.reverse()`

反转数组的顺序，并返回重新排序之后的数组，原数组会被改变

[1, 2, 3, 'reer', 'game', 2, 5].reverse();
// > [5, 2, "game", "reer", 3, 2, 1]

`arr.sort(fn)`

如果不传参数，默认情况下数组内的元素会被转换为字符串进行比较，因此一般不推荐直接使用默认的arr.sort()进行排序。
返回值为排序后的新数组。原数组会被改变

将数组内数值元素从小到大排序。

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b)) {
    return a - b;
}
// > [1, 2, 4, "reee", "name", "9", "doc"]

将数组内数值元素从大到小排序

var demo = [1, 4, 2, 'reee', 'name', '9', 'doc'];
demo.sort(function(a, b) {
    return b - a;
})
// > [4, 2, 1, "reee", "name", "9", "doc"]

`arr.concat(otherArr)`

参数中传入元素或者数组，会将该参数合并到arr中，返回合并后新的数组，原数组不会改变

var arr = [1, 3, 'jake'];
arr.concat('rose', [2, 'fi']);
// > [1, 3, 'jake', 'rose', 2, 'fi']

`arr.slice()`

剪切数组，返回剪切之后的数组，元素不会改变

传入一个参数，表示起始位置，结束位置为最末尾

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2);
// > [1, "reee", "name", "9", "doc"]

传入2个参数，表示起始位置与结束位置，但不包括结束位置所在的元素

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.slice(2, 4);
// > [1, "reee"]

`arr.splice()`

根据参数的不同，可以分别实现删除，插入，替换元素的作用，会改变原始数组

删除

传入2个参数，分别表示起始位置与要删除元素的个数，返回被删除掉的元素组成的数组

var arr = [4, 2, 1, "reee", "name", "9", "doc"];
arr.splice(2, 3);
// > [1, "reee", "name"]
// arr: [4, 2, 1, "9", "doc"]

插入

传入3个参数， [起始位置 | 要删除的项数为0 | 要插入的元素]，最终返回删除掉的元素组成的数组，因为这里删除项数为0，因此会返回空数组

var arr = [2, 4, 6];
arr.splice(2, 0, 'red', 'green'); 
// > []
// arr: [2, 4, "red", "green", 6]

替换

传入三个参数， [ 起始位置 | 要删除的项数为1 | 要插入的元素 ]，最终返回被删除掉的元素组成的数组

var arr = [2, 4, 9];
arr.splice(1, 1, ['tim', 'tom']);
// > [4]
// arr: [2, ['tim', 'tom'], 9]

总结因此，这个方法会因为参数的不同而实现不同的功能，所有的参数从头到尾依次为

[ 起始位置 | 要删除元素的个数 | 要插入元素的值，可以写入多个值 ]

`arr.indexOf(item)`

验证数组中是否含有某个元素，返回第一个匹配到的元素在数组中所在的位置，如果没有，则返回 -1

var arr = [2, 'tim', 4, 5, 2];
arr.indexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

`arr.lastIndexOf(item)`

验证数组中是否含有某个元素，不过是从数组尾部开始查找，返回第一个匹配到的元素所在的位置，如果没有，则返回-1

var arr = [2, 'tim', 4, 5, 2];
arr.lastIndexOf('tim');
// > 1
arr.indexOf('jake');
// > -1

IE6, 7, 8 不支持indexOf与lastIndexOf方法

`arr.every()`

对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。会有一个函数作为every的参数，该函数也有3个参数，分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.every(function(item, index, array) {
    return item > 2;
})
// > false

`arr.some()`

对数组中的每一项运行给定函数，如果该函数对其中一项返回true，则返回true。会有一个函数作为every的参数，该函数也有3个参数，分别为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.some(function(item, index, array) {
    return item > 2;
})
// > true

arr.filter(fn)

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

arr .toString()

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

arr.push(item)配列の末尾から要素を追加し、新しい配列の長さを返します

numbers.forEach(function(item, index) {
    // do something
})

🎜

arr.pop()🎜🎜配列の末尾から要素を削除し、削除された要素を返します🎜<pre class="brush:php;toolbar:false">var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// &gt; 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15</pre>🎜<code>arr.unshift(item)

🎜🎜配列の先頭から要素を追加します配列を取得し、新しい配列の長さを返します🎜

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

🎜arr.shift()🎜🎜配列の先頭から要素を削除し、削除された要素を返します🎜

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变

🎜arr.reverse() 🎜🎜配列の順序を反転し、並べ替えられた配列を返します。元の配列は変更されます🎜

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响

🎜arr.sort(fn)🎜🎜パラメータが渡されない場合、配列内の要素はデフォルトで文字列に変換されます。比較のために、並べ替えにデフォルトの arr.sort() を直接使用することは一般に推奨されません。 🎜戻り値はソート後の新しい配列です。元の配列が変更されます🎜

🎜 配列内の数値要素が小さいものから大きいものへと並べ替えられます。 🎜

$.inArray(3, [1, 2, 3]);
// > 2

🎜 配列内の数値要素を大きい順に並べ替えます🎜

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变，可以使用下面的方式来写
$.merge($.merge([], arr), arr2);

🎜 arr.concat(otherArr)🎜🎜要素または配列をパラメータとして渡すと、パラメータが arr にマージされ、元の配列は変更されません🎜rrreee🎜arr.slice ()🎜🎜配列を切り取り、切り取った後の配列を返します。要素は変更されません🎜

🎜開始位置を示すパラメータを渡します。終了位置は終了です🎜

rrreee

🎜開始位置と終了位置を示す 2 つのパラメータを渡しますが、終了位置は含まれません位置それが存在する要素 🎜

rrreee🎜arr.splice()🎜🎜 さまざまなパラメータに従って、要素をそれぞれ削除、挿入、置換できます。元の配列🎜

🎜🎜削除🎜🎜

🎜開始位置と削除する要素の数をそれぞれ示す 2 つのパラメータを渡します削除され、削除された要素で構成される配列を返します🎜rrreee

🎜🎜Insert🎜🎜

🎜 3 つのパラメータを渡します。[開始位置 |削除された要素の数は 0 | 挿入される要素] を実行し、最終的に削除された要素の配列を返します。ここでは削除された要素の数が 0 であるため、空の配列が返されます🎜rrreee

🎜🎜Replace 🎜🎜

🎜 3 つのパラメータ [開始位置 | 削除する項目の数は 1 | 挿入する要素] を渡し、最後に削除された要素を返します。構成 🎜rrreee

🎜の配列概要したがって、このメソッドはパラメータの違いにより異なる機能を実現します。最初から最後まですべてのパラメータは 🎜

arr.indexOf(item)

arr.lastIndexOf(item)

を返します。🎜IE6、7、8 は、indexOf と lastIndexOf をサポートしていません。メソッド。 🎜

arr.every()

🎜🎜配列内の各項目に対して指定された関数を実行し、関数がいずれかの項目に対して true を返した場合は true を返します。 Every のパラメータとして関数があり、この関数には 3 つのパラメータもあります。 🎜🎜[Every を呼び出す配列の各要素は、対応する要素の位置を表します | arr.filter(fn)🎜🎜フィルタリングメソッド。条件を満たす要素で構成される配列を返します。 fn のパラメータは 🎜🎜[各 | を呼び出す配列の各要素は、対応する要素の位置を表します]🎜🎜

var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var everyRes = numbers.filter(function(item, index, array) {
    return item > 2;
})
// > [ 3, 4, 5, 4, 3 ]

`arr.map(fn)`

对数组的每一项进行计算等处理，返回处理结果组成的数组，fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

var numbers = [1, 2, 3, 3, 2, 1];
var everyRes = numbers.map(function(item, index, array) {
    return item > 2;
})
// >[false, false, true, true, false, false]

`arr.forEach(fn)`

遍历数组，没有返回值，fn的参数为
[ 调用every的数组的每一项元素 | 对应元素所在的位置 | 表示该数组 ]

numbers.forEach(function(item, index) {
    // do something
})

`arr.reduce(fn)`

缩减方法。fn的参数为
[ 前一个元素 | 当前元素，从1开始 | 后一个元素的序列，从1开始计数 | 表示该数组 ]

var values = [1, 2, 3, 4, 5];
var sum = values.reduce(function(prev, cur, index, array) {
    return prev + cur;
})
// > 15 
//每一次迭代之后的结果分别为
// [3, 3, 4, 5]
// [6, 4, 5]
// [10, 5]
// 15

`arr.reduceRight(fn)`

与reduce一模一样，只是方向相反。

jQuery相关方法

`$.each(arr, fn)`

遍历数组或者对象，fn有2个参数，分别为，比原生的for in 更加健壮
[ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]

var arr = [1, 2, 3];
$.each(arr, function(key, value) {
    // do something
});

跳过一次循环 return | return true
终止循环 return false

`$.grep(arr, fn)`

过滤方法，功能类同原生中的arr.filter(fn)。此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [ 1, 3, 6, 4 ];
$.grep(arr, function(val, key) {
    return val >= 3;
});
// > [3, 6, 4]
// arr : [ 1, 3, 6, 4 ] 不会改变

`$.map(arr, fn)`

对每项进行处理，返回处理结果组成的数组，此处fn的参数如下
[ value: 对象/数组的值 | key值或者序列 ]

var arr = [1, 2, 5, 3];
$.map(arr, function(val, key) {
    return val * 10;
})
// > [10, 30, 30, 20, 10]
// 原数组不受影响

`$.inArray(item, array)`

检测某一个元素item是否存在与数组之中，返回其所在的位置，如果不在，则返回-1

$.inArray(3, [1, 2, 3]);
// > 2

`$.merge(arr1, arr2)`

合并数组，会改变第一个参数的数组为合并之后的数组，返回合并之后的数组

var arr = [1, 3, 4];
var arr2 = [4, 3, 1];
$.merge(arr, arr2);
// > [1, 3, 4, 4, 3, 1]
// 为了防止第一个数组被改变，可以使用下面的方式来写
$.merge($.merge([], arr), arr2);

`$.unique(arr)`

过滤DOM数组中重复的元素

`$.makeArray(obj)`

将类数组对象转换为数组

`$(elem).toArray()`

将jQuery对象集合恢复成DOM数组

配列メソッドの最も包括的な概要

配列の作成

配列の検出

`arr.valueOf()arr.valueOf()`

`arr.toString()`

`arr.push(item)`

`arr.pop()`

`arr.unshift(item)`

`arr.shift()`

`arr.reverse()`

`arr.sort(fn)`

`arr.concat(otherArr)`

`arr.slice()`

`arr.splice()`

`arr.indexOf(item)`

`arr.lastIndexOf(item)`

`arr.every()`

`arr.some()`

`arr.filter(fn)`
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]

`arr.map(fn)`

`arr.forEach(fn)`

`arr.reduce(fn)`

`arr.reduceRight(fn)`

jQuery相关方法

`$.each(arr, fn)`

`$.grep(arr, fn)`

`$.map(arr, fn)`

`$.inArray(item, array)`

`$.merge(arr1, arr2)`

`$.unique(arr)`

`$.makeArray(obj)`

`$(elem).toArray()`

関連記事

配列メソッドの最も包括的な概要

配列の作成

配列の検出

arr.valueOf()arr.valueOf()

arr.toString()

arr.push(item)

arr.pop()

arr.unshift(item)

arr.shift()

arr.reverse()

arr.sort(fn)

arr.concat(otherArr)

arr.slice()

arr.splice()

arr.indexOf(item)

arr.lastIndexOf(item)

arr.every()

arr.some()

arr.filter(fn)var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]

arr.map(fn)

arr.forEach(fn)

arr.reduce(fn)

arr.reduceRight(fn)

jQuery相关方法

$.each(arr, fn)

$.grep(arr, fn)

$.map(arr, fn)

$.inArray(item, array)

$.merge(arr1, arr2)

$.unique(arr)

$.makeArray(obj)

$(elem).toArray()

関連記事

`arr.valueOf()arr.valueOf()`

`arr.toString()`

`arr.push(item)`

`arr.pop()`

`arr.unshift(item)`

`arr.shift()`

`arr.reverse()`

`arr.sort(fn)`

`arr.concat(otherArr)`

`arr.slice()`

`arr.splice()`

`arr.indexOf(item)`

`arr.lastIndexOf(item)`

`arr.every()`

`arr.some()`

`arr.filter(fn)`
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; var everyRes = numbers.filter(function(item, index, array) { return item > 2; }) // > [ 3, 4, 5, 4, 3 ]

`arr.map(fn)`

`arr.forEach(fn)`

`arr.reduce(fn)`

`arr.reduceRight(fn)`

`$.each(arr, fn)`

`$.grep(arr, fn)`

`$.map(arr, fn)`

`$.inArray(item, array)`

`$.merge(arr1, arr2)`

`$.unique(arr)`

`$.makeArray(obj)`

`$(elem).toArray()`