JavaScript 配列の一般的なメソッド

---

序文

配列は、プログラミング開発において最も一般的なデータ型の 1 つです。主にいくつかの組み込みメソッドと

---

まず、配列内の値

Value は位置要素の値を指定します

配列に対応する指定された添え字に従って、指定された位置の要素の値を取得できます。

const arr = new Array("js","JavaScript","jQuery");
const first = arr[0] // 因为数组下标是从 0 开始算的
const two = arr[1]
const end = arr[arr.length-1]
console.log(first); // js
console.log(two); // JavaScript
console.log(end); // jQuery

最後の要素の値を取得する

• 最後の要素を削除する JavaScript Pop() メソッド (元の配列が変更されるため、注意して使用してください)

let arr = new Array("js","JavaScript","jQuery");
const end = arr.pop()
console.log(end); // jQuery
console.log(arr); // ["js", "JavaScript"]

• JavaScriptのslice()メソッドは、指定された範囲をインターセプトし、配列を返します。

const arr = new Array("js","JavaScript","jQuery");
const end = arr.slice(-1); // -1 即取值最后一位
console.log(end); // ["jQuery"]
// 如果想取第二位则
const two = arr.slice(1, 2); // 即取值 从下标 1 （包含）开始到下标 2 之前（不含）内容
console.log(two); // ["JavaScript"]

2つ目は、配列自体を変更する方法です。

実際に配列自体を変更する方法は基本的には增こんな删感じになります

N個の要素がpush()の最後に追加されます

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

let arr = ['a', 'b', 'c'];
const ele = arr.push('d');
console.log(ele); // 4
console.log(arr); // ['a','b','c','d']

Pop() は最後の要素を削除します

配列から最後の要素を削除し、その要素の値を返します。配列が空の場合は unknown を返します。

let arr = ['a', 'b', 'c', 'd'];
const ele = arr.pop();
console.log(ele); // 'd'
console.log(arr); // ['a','b','c']

SHIFT() は最初の要素を削除します

配列から最初の要素を削除し、その要素の値を返します。

let arr = ['a', 'b', 'c', 'd'];
const ele = arr.shift();
console.log(ele); // 'a'
console.log(arr); // ['b''c','d']

unshift() は最初に N 個の要素を追加します

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

var arr = ['a', 'b', 'c'];
var ele = arr.unshift('d'); // 可传多个参数
console.log(ele); // 4
console.log(arr); // ['d','a','b','c']

splice() は、指定された位置にある N 個の要素を削除または追加します

splice(start,deleteCount?,item1?) 既存の要素を削除または置換するか、新しい要素を所定の位置に追加することによって配列を変更し、変更された内容を配列の形式で返します (要素が 1 つだけ削除された場合、戻り値には要素が 1 つだけ含まれます)要素の配列。要素が削除されなかった場合は空の配列を返します)。

• start: 変更の開始位置を指定します (0 から数えます)。配列の長さを超える場合は、配列の末尾から内容が追加されます。負の値の場合は、配列の末尾からの番号を示します (-1 から数えて、-n が最後であることを意味します) n 番目の要素など、array.length-n に等しい); 負の数の絶対値が配列の長さより大きい場合、開始位置が 0 番目の位置であることを意味します。
• deleteCount (オプション): 削除する配列要素の数を示す整数。
• deleteCount が開始後の要素の総数より大きい場合、開始後のすべての要素 (開始ビットを含む) が削除されます。
• deleteCount が省略されている場合、またはその値が array.length - start 以上の場合 (つまり、start 後のすべての要素の数以上の場合)、start 以降の配列のすべての要素は次のようになります。削除されました。
• deleteCount が 0 または負の場合、要素は削除されません。この場合、少なくとも 1 つの新しい要素を追加する必要があります。
• item1、item2、… (オプション): 開始位置から始まる、配列に追加する要素。指定しない場合、splice() は配列要素のみを削除します。

var arr = ['a', 'b', 'c', 'd'];
// 从索引 2 的位置开始删除 0 个元素，插入"e"
var insertOnce = arr.splice(2, 0, 'e');
console.log(insertOnce); // []
console.log(arr); // ['a', 'b', 'e', 'c', 'd']
// 从索引 3 的位置开始删除一个元素
var delOnce = arr.splice(3, 1);
console.log(delOnce ); // ['c']
console.log(arr); // ['a', 'b', 'e', 'd']

sort() は配列をソートします

配列の要素を並べ替えます。

let arr = [1, 5, 2, 4, 3];
arr.sort();
arr.sort((a, b) => a - b); // 正序 arr.sort(function(a,b){return a -b})
console.log(arr); // [1,2,3,4,5]
arr.sort((a, b) => b - a); // 倒序 arr.sort(function(a,b){return b-a})
console.log(arr); // [1,2,3,4,5]
// or
let arr1 = [
    {
    
     name: 'Edward', age: 21 },
    {
    
     name: 'Sharpe', age: 37 },
    {
    
     name: 'And', age: 45 },
    {
    
     name: 'The', age: -12 },
    {
    
     name: 'Magnetic', age: 15 },
    {
    
     name: 'Zeros', age: 37 }
];
//依据age排序
arr1.sort(function (a, b) {
    
    
    return (a.age - b.age)
});
console.log(arr1); // [1,2,3,4,5]

reverse() 反転操作は位置反転です

配列内の要素の位置を反転し、配列を返します。配列の最初の要素が最後になり、2 番目の要素が最後から 2 番目になり、配列の最後の要素が最初になります。

var arr = [1, 2, 3, 4, 5];
arr.reverse();
// arr数组被修改: [5,4,3,2,1]
console.log(arr); // [5,4,3,2,1]

3. 配列自体を変更しない方法

lice() は、指定された範囲の要素をインターセプトします。

lice(begin?, end?) は、begin と end (begin を含む、end を除く) によって決定される元の配列のディープ コピーである新しい配列オブジェクトを返します。両方のパラメーターはオプションです。このメソッドは、つまり、指定された位置がインターセプトされます。

• begin オプションで、元の配列要素が抽出される開始インデックス (0 から始まる) を抽出します。
• パラメータが負の場合、元の配列の最後から 2 番目の要素から抽出することを意味し、slice(-2) は、元の配列の最後から 2 番目の要素から最後の要素 (最後の要素を含む) までを抽出することを意味します。
• begin が省略された場合、スライスはインデックス 0 から始まります。
• begin が元の配列のインデックス範囲外の場合、空の配列が返されます。
• end オプション 元の配列要素の抽出が終了する、抽出が終了するインデックス (0 から始まります)。スライスは、元の配列内の最初から最後までのインデックスを持つすべての要素を抽出します (開始は含まれますが、終了は含まれません)。
• lice(1,4) は、元の配列の 2 番目の要素から 4 番目の要素までのすべての要素 (インデックス 1、2、3 を持つ要素) を抽出します。
• このパラメーターが負の数の場合、元の配列の最後のいくつかの要素で抽出が終了することを意味します。slide(-2,-1) は、元の配列の最後から 2 番目の要素を抽出することを示します (最後の要素を除く、つまり最後から 2 番目の要素のみ)。
• end を省略した場合、元の配列の末尾までスライスが抽出されます。
• end が配列の長さより大きい場合、スライスは元の配列の末尾まで抽出されます。

const arr = ['a', 'b', 'c', 'd'];
const res = arr.slice(0, 2);
console.log(arr); // ['a', 'b', 'c', 'd']
console.log(res); // ['a', 'b']

concat() は N 個の配列をマージします

2 つ以上の配列を結合します。このメソッドは既存の配列を変更しませんが、新しい配列を返します。結合前の配列の値が同じであっても、重複排除は行われません。

const arr1 = ['a', 'b', 'c', 'd'];
const arr2 = ['e', 'f']
const arr3 = arr1.concat(arr2);
console.log(arr3 ); // ['a', 'b', 'c', 'd','e','f']

join() 指定された区切り文字列、デフォルトの,分割を取得します。

配列 (または配列のようなオブジェクト) のすべての要素を文字列に連結し、その文字列を返します。配列に項目が 1 つだけある場合、その項目は区切り文字なしで返されます (デフォルトでは「,」が使用されます。「」が使用されている場合、すべての要素の間に文字は存在しません)。

const arr = ['a', 'b', 'c', 'd'];
const str = arr.join("-");
console.log(str); // "a-b-c-d"

forEach() は配列を走査します。通常、比較を行う場合、または各要素が異なる処理ロジックを持つ場合に使用されます。

forEach(function(currentValue,index?,array?),thisValue?) 配列の各要素に対して指定された関数を 1 回実行します。currentValue 必須 現在の要素の値 Index 任意 現在の要素の配列のインデックス値 任意 現在の要素が属する配列オブジェクト thisValue 任意 コールバック関数実行時にこの値が使用されます。省略した場合、または null または unknown が渡された場合、コールバック関数の this はグローバル オブジェクトになります。

/**
 * @param {*} element 当前元素值
 * @param {*} index 下标
 * @param {*} array 当前数组
 */
const logArrayElements = (element, index, array) => {
    
    
    console.log('a[' + index + '] = ' + element, array);
}

// 注意索引 2 被跳过了，因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

map() は配列を走査し、対応する要素の値を変更し、新しい配列を返します。

map(function(currentValue,index?,array?),thisValue?)
map() はどのように機能しますか? 実際、配列の各要素は 1 回走査され、同時に新しい値が返されます。返されるデータの長さは元の配列の長さと同じであることに注意してください。

つまり、配列内の各要素が、指定された関数への 1 回の呼び出しの戻り値となる新しい配列を作成します。

const kvArray = [{
    
     key: 1, value: 10 },
{
    
     key: 2, value: 20 },
{
    
     key: 3, value: 30 }];

const reformattedArray = kvArray.map(function (obj) {
    
    
    var rObj = {
    
    };
    rObj[obj.key] = obj.value;
    return rObj;
});
console.log(reformattedArray); // [{1: 10}, {2: 20}, {3: 30}]
console.log(kvArray); // 不变

filter() 指定された条件要素をフィルタリングします

filter(function(currentValue,index,arr), thisValue) は、
条件を満たす指定された配列内のすべての要素をチェックすることによって要素がチェックされる新しい配列を作成します。

つまり、コールバック関数が true を返す場合、この要素は返される配列に表示され、false を返す場合は、返される配列には表示されません。

/**
 * 筛选出字符串数组中长度大于6的字符串
 */
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result); // ["exuberant", "destruction", "present"]

each() 配列内の要素が指定された条件を満たすかどうかを判断します。

Every(function(currentValue,index,arr), thisValue) は、配列内のすべての要素が指定された関数のテストに合格できるかどうかをテストします。ブール値を返します。空の配列を受け取った場合、このメソッドはすべての場合に true を返します。

/*
 * 检查是否数组中的所有数字都小于40
 */
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold)); // true

some() 配列内の要素が指定された条件の値を持つかどうかを判断します

some(function(currentValue,index,arr), thisValue) は、配列内の少なくとも 1 つの要素が指定された関数テストに合格するかどうかをテストします。これはブール値を返します。空の配列でテストすると、いずれの場合も false を返します。

/**
 * 检测数组中是否至少有一个数字大于 18:
 */
const ages = [3, 10, 18, 20];
function checkAdult(age, index, arr) {
    
    
    return age >= 18;
}
console.log(ages.some(checkAdult))

find() は、指定された条件を満たす最初の要素値を検索します。

find(function(currentValue,index,arr), thisValue) は、指定されたテスト関数を満たす配列内の最初の要素の値を返します。それ以外の場合は、未定義を返します。

/**
 * 获取数组中第一个大于10的值
 */
const array2 = [5, 12, 8, 130, 44];
const found = array2.find(element => element > 10);
console.log(found); // 12

flat() 配列の平坦化。入力パラメータの深さに応じて平坦化できます。

flat( Depth?) 指定された深さに従って配列を再帰的に走査し、すべての要素と走査された部分配列内の要素を新しい配列に結合して返します。

/**
 * depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。
 */
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]

新しい Set() とクラス配列の組み合わせ、重複排除

配列の重複排除、新しい Set() の生成、Array.from() 静的メソッドと組み合わせて、反復可能なオブジェクトまたは配列のようなオブジェクトから新しい浅いコピー配列を作成します

/**
 * 去重
 */
const getReplace = [0, 1, 5, 2, 1, 2, 6, 5, 2, 8];
console.log(new Set(getReplace)); // [0, 1, 5, 2, 6, 8]
console.log(Array.from(new Set(getReplace))); // [0, 1, 5, 2, 6, 8]
Array.prototype.removeDuplicate = function () {
    
    
    return Array.from(new Set(this));
};
console.log([1, 2, 1, 2, 3].removeDuplicate());

reduce() は、累積値を返したり、指定された条件の値を検索したりするなど、指定されたロジックによって処理されたデータを返すことができます。

配列で指定された値またはオブジェクトを直感的に返したり、オブジェクト内のプロパティの累積値を計算したり、最大または最小のデータを見つけたりすることができます。

const pilots = [
    {
    
    
        id: 10,
        name: "Poe Dameron",
        years: 14,
    },
    {
    
    
        id: 2,
        name: "Temmin 'Snap' Wexley",
        years: 30,
    },
    {
    
    
        id: 41,
        name: "Tallissan Lintra",
        years: 16,
    },
    {
    
    
        id: 99,
        name: "Ello Asty",
        years: 22,
    }
];
const totalYears = pilots.reduce(function (accumulator, pilot) {
    
    //const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);
    return accumulator + pilot.years;
}, 0);

const mostExpPilot = pilots.reduce(function (oldest, pilot) {
    
    
    return (oldest.years || 0) > pilot.years ? oldest : pilot;
}, {
    
    });

---

要約する

上記の説明と組み合わせると、演算配列の追加、削除、変更、およびシーケンスの変更のみが、元の配列の値を変更します。
元の配列そのものの値を変更するメソッドは以下の7つです。

• push()最後に N 個の要素を追加します
• pop()最後の要素を削除する
• shift()最初の要素を削除する
• unshift()最初に N 個の要素を追加します
• splice()指定された位置にある N 個の要素を削除または追加します
• sort()配列を並べ替える
• reverse()逆の操作

残りのメソッドは、元の配列を基に新しい配列を取得するなどの操作ですが、一般的には、検索、特定の内容のインターセプト、トラバース、フィルタリング、重複排除、蓄積などの操作がよく使われます。具体的には以下の 12 つがあります。メソッド

• slice()指定された範囲の要素をインターセプトします
• concat()N 個の配列を結合する
• join()指定された区切り文字列、デフォルトの,分割を取得します。
• forEach()配列の走査は通常、比較を行う場合、または各要素に異なる処理ロジックがある場合に使用されます。
• map()配列を走査し、対応する要素の値を変更し、新しい配列を返します。
• filter()指定された条件要素をフィルタリングする
• every()配列内の要素が指定された条件を満たしているかどうかを判断します
• some()配列内の要素が指定された条件の値を持つかどうかを判断します
• find()指定された基準を満たす最初の要素の値を検索します
• flat()配列の平坦化。入力パラメータの深さに応じて平坦化できます。
• new Set()クラス配列の結合、重複排除
• reduce()累計を返したり、指定した条件の値を検索したりするなど、指定したロジックで処理されたデータを返すことができます。