ホームページ > 記事 > ウェブフロントエンド > JavaScriptにおける一般的な配列操作方法のまとめ(コード)
この記事は、JavaScript における一般的な配列操作方法をまとめたもの (コード) であり、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。
1. concat()
concat() メソッドは、2 つ以上の配列を接続するために使用されます。このメソッドは既存の配列を変更せず、連結された配列のコピーを返すだけです。
var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1);//[1, 2, 3] console.log(arr3);//[1, 2, 3, 4, 5]
2. join()
join() メソッドは、配列内のすべての要素を文字列に入れるために使用されます。要素は指定された区切り文字で区切られます。デフォルトでは、要素の区切りには「,」が使用されますが、元の配列は変更されません。
var arr = [2,3,4]; console.log(arr.join());//2,3,4 console.log(arr);//[2, 3, 4]
3.push()
push() メソッドは、配列の末尾に 1 つ以上の要素を追加し、新しい長さを返すことができます。最後に追加すると長さが返され、元の配列が変更されます。
var a = [2,3,4]; var b = a.push(5); console.log(a); //[2,3,4,5] console.log(b);//4 push方法可以一次添加多个元素push(data1,data2....)
4.pop()
pop() メソッドは、配列の最後の要素を削除して返します。最後の要素を返すと、元の配列が変更されます。
var arr = [2,3,4]; console.log(arr.pop());//4 console.log(arr); //[2,3]
5.shift()
shift() メソッドは、配列の最初の要素を削除し、最初の要素の値を返すために使用されます。元の配列を変更して、最初の要素を返します。
var arr = [2,3,4]; console.log(arr.shift()); //2 console.log(arr); //[3,4]
6. unshift()
unshift() メソッドは、配列の先頭に 1 つ以上の要素を追加し、新しい長さを返すことができます。元の配列を変更して、新しい長さを返します。
var arr = [2,3,4,5]; console.log(arr.unshift(3,6)); //6 console.log(arr); //[3, 6, 2, 3, 4, 5]
7.slice()
arrayObject の要素を最初から最後まで含む新しい配列を返します (この要素は除きます)。選択された要素を返します。このメソッドは元の配列を変更しません。
var arr = [2,3,4,5]; console.log(arr.slice(1,3)); //[3,4] console.log(arr); //[2,3,4,5]
8. splice()
splice() メソッドは、インデックスから始まる 0 個以上の要素を削除し、それらをパラメータ リスト要素で宣言された 1 つ以上の値に置き換えることができます。削除されました。 arrayObject から要素が削除された場合、削除された要素を含む配列が返されます。 splice() メソッドは配列を直接変更します。
var a = [5,6,7,8]; console.log(a.splice(1,0,9)); //[] console.log(a); // [5, 9, 6, 7, 8] var b = [5,6,7,8]; console.log(b.splice(1,2,3)); //[6, 7] console.log(b); //[5, 3, 8]
9. substring() と substr()
同じ点: パラメーターを 1 つだけ記述する場合:
substr(startIndex);
var str = '123456789'; console.log(str.substr(2)); // "3456789" console.log(str.substring(2));// "3456789"違い: 2 番目のパラメータsubstr(startIndex,lenth): 2 番目のパラメータは文字列の長さをインターセプトします (開始点から一定の長さの文字列をインターセプトします)
substring (startIndex, endIndex): 2 番目のパラメーターは、文字列の最後の添字をインターセプトします (2 つの位置の間の文字列をインターセプトします。「先頭は含みますが末尾は含みません」)
console.log("123456789".substr(2,5)); // "34567" console.log("123456789".substring(2,5));// "345"10.sort 並べ替え
Unicode コード位置による並べ替え、デフォルトの昇順:
var scores = [1, 10, 21, 2]; scores.sort(); // [1, 10, 2, 21]11. reverse()
reverse() メソッドは、配列内の要素の順序を逆にするために使用されます。返されるのは反転された配列であり、元の配列が変更されます。
var arr = [2,3,4]; console.log(arr.reverse()); //[4, 3, 2] console.log(arr); //[4, 3, 2]Twelve、indexOf および lastIndexOf
はどちらも、検索する値と検索の開始位置という 2 つのパラメーターを受け入れます。
存在しない場合は -1 を返し、存在する場合は位置を返します。 indexOf は前から後ろに検索し、lastIndexOf は後ろから前に検索します。
indexOf: var a = [2, 9, 9]; a.indexOf(2); // 0 a.indexOf(7); // -1 if (a.indexOf(7) === -1) { // element doesn't exist in array } lastIndexOf: var numbers = [2, 5, 9, 2]; numbers.lastIndexOf(2); // 3 numbers.lastIndexOf(7); // -1 numbers.lastIndexOf(2, 3); // 3 numbers.lastIndexOf(2, 2); // 0 numbers.lastIndexOf(2, -2); // 0 numbers.lastIndexOf(2, -1); // 313.every
配列の各項目に対して指定された関数を実行し、各項目が ture を返す場合は true を返します。
function isBigEnough(element, index, array) { return element < 10; } [2, 5, 8, 3, 4].every(isBigEnough); // true14.some
配列の各項目に対して指定された関数を実行します。いずれかの項目が ture を返す場合、true を返します。
function compare(element, index, array) { return element > 10; } [2, 5, 8, 1, 4].some(compare); // false [12, 5, 8, 1, 4].some(compare); // true15. filter
配列の各項目に対して指定された関数を実行し、結果が true となる項目で構成される配列を返します。
var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"]; var longWords = words.filter(function(word){ return word.length > 6; }); // Filtered array longWords is ["exuberant", "destruction", "present"]16.map
配列の各項目に対して指定された関数を実行し、各関数呼び出しの結果を返して新しい配列を形成します。
var numbers = [1, 5, 10, 15]; var doubles = numbers.map(function(x) { return x * 2; }); // doubles is now [2, 10, 20, 30] // numbers is still [1, 5, 10, 15]17. forEach 配列トラバーサル
const items = ['item1', 'item2', 'item3']; const copy = []; items.forEach(function(item){ copy.push(item) });18.reduce
reduce は、配列内の各要素に対してコールバック関数を順番に実行します。ただし、削除された要素または削除されていない要素は除きます。配列 割り当てられた要素は、初期値 (または最後のコールバック関数の戻り値)、現在の要素の値、現在のインデックス、およびreduce が呼び出される配列の 4 つのパラメータを受け入れます。
无初始值: var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; }) console.log(arr, sum);印刷結果:
1 2 1ご覧いただけます。上の例では、インデックスは 1 から始まり、最初の prev の値が配列の最初の値になります。配列の長さは 4 ですが、reduce 関数は 3 回ループします。
3 3 2
6 4 3
[1, 2, 3, 4] 10
初期値あり:
var arr = [1, 2, 3, 4]; var sum = arr.reduce(function(prev, cur, index, arr) { console.log(prev, cur, index); return prev + cur; },0) //注意这里设置了初始值 console.log(arr, sum);印刷結果:
0 1 0この例では、インデックスは 0 から始まり、最初の prev 値は設定した初期値 0 で、配列の長さは 4 で、reduce 関数は 4 回ループします。
1 2 1
3 3 2
6 4 3
[1, 2, 3 , 4] 10
結論:initialValue が指定されていない場合、reduce は最初のインデックスをスキップしてインデックス 1 からコールバック メソッドを実行します。 initialValue が指定されている場合は、インデックス 0 から開始します。
ES6 では、配列を操作するための新しいメソッドが追加されました
1. find()
コールバック関数を渡し、現在の検索ルールを満たす配列内の最初の要素を見つけて返し、検索を終了します。
const arr = [1, "2", 3, 3, "2"] console.log(arr.find(n => typeof n === "number")) // 12. findIndex()
コールバック関数を渡し、現在の検索ルールを満たす配列内の最初の要素を見つけ、その添え字を返し、検索を終了します。
const arr = [1, "2", 3, 3, "2"] console.log(arr.findIndex(n => typeof n === "number")) // 03.fill()
配列内の要素を新しい要素に置き換えると、置き換えられる添え字の範囲を指定できます。
arr.fill(value, start, end)
4、copyWithin()
选择数组的某个下标,从该位置开始复制数组元素,默认从0开始复制。也可以指定要复制的元素范围。
arr.copyWithin(target, start, end) const arr = [1, 2, 3, 4, 5] console.log(arr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素开始,复制数组,所以4, 5被替换成1, 2 const arr1 = [1, 2, 3, 4, 5] console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,所以4, 5被替换成2, 3 const arr2 = [1, 2, 3, 4, 5] console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,结束位置为2,所以4被替换成2
5、from
将类似数组的对象(array-like object)和可遍历(iterable)的对象转为真正的数组。
const bar = ["a", "b", "c"]; Array.from(bar); // ["a", "b", "c"] Array.from('foo'); // ["f", "o", "o"]
6、of
用于将一组值,转换为数组。这个方法的主要目的,是弥补数组构造函数 Array() 的不足。因为参数个数的不同,会导致 Array() 的行为有差异。
Array() // [] Array(3) // [, , ,] Array(3, 11, 8)// [3, 11, 8] Array.of(7); // [7] Array.of(1, 2, 3); // [1, 2, 3] Array(7);// [ , , , , , , ] Array(1, 2, 3); // [1, 2, 3]
7、entries() 返回迭代器:返回键值对
//数组 const arr = ['a', 'b', 'c']; for(let v of arr.entries()) { console.log(v) } // [0, 'a'] [1, 'b'] [2, 'c'] //Set const arr = new Set(['a', 'b', 'c']); for(let v of arr.entries()) { console.log(v) } // ['a', 'a'] ['b', 'b'] ['c', 'c'] //Map const arr = new Map(); arr.set('a', 'a'); arr.set('b', 'b'); for(let v of arr.entries()) { console.log(v) } // ['a', 'a'] ['b', 'b']
8、values() 返回迭代器:返回键值对的value
//数组 const arr = ['a', 'b', 'c']; for(let v of arr.values()) { console.log(v) } //'a' 'b' 'c' //Set const arr = new Set(['a', 'b', 'c']); for(let v of arr.values()) { console.log(v) } // 'a' 'b' 'c' //Map const arr = new Map(); arr.set('a', 'a'); arr.set('b', 'b'); for(let v of arr.values()) { console.log(v) } // 'a' 'b'
9、keys() 返回迭代器:返回键值对的key
//数组 const arr = ['a', 'b', 'c']; for(let v of arr.keys()) { console.log(v) } // 0 1 2 //Set const arr = new Set(['a', 'b', 'c']); for(let v of arr.keys()) { console.log(v) } // 'a' 'b' 'c' //Map const arr = new Map(); arr.set('a', 'a'); arr.set('b', 'b'); for(let v of arr.keys()) { console.log(v) } // 'a' 'b'
10、includes
判断数组中是否存在该元素,参数:查找的值、起始位置,可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN,会判断错误。
var a = [1, 2, 3]; a.includes(2); // true a.includes(4); // false
【相关推荐:JavaScript视频教程】
以上がJavaScriptにおける一般的な配列操作方法のまとめ(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。