JavaScript データ構造とアルゴリズム - 配列と配列の一般的なメソッド

プログラミング 2023-09-30 10:39:04 訪問数: null

記事ディレクトリ

1. splice() - トリミング

splice() は配列をクリップするためによく使用され、3 つのパラメータを受け取ることができます。

  • パラメータ 1: 配列の最初の項目からトリミングを開始します。
  • パラメータ 2: 切り出す項目の数
  • パラメータ 3 (渡す必要はありません): 追加するデータ

1.1 従来のクリッピングアレイ

let arr = [1,2,3,4,5]
let arr1 = arr.splice(0,2)
console.log(arr)   // 输出结果：[3, 4, 5]
console.log(arr1)  // 输出结果：[1, 2]

1.2 データのトリミングと追加後

let arr = [1,2,3,4,5]
let arr1 = arr.splice(1,1,10,20,30)
console.log(arr)   // 输出结果：[1, 10, 20, 30, 3, 4, 5]
console.log(arr1)  // 输出结果：[2]

2.sort() - 並べ替え

sort() は配列の並べ替えによく使用され、単純な配列を並べ替えるだけでなく、オブジェクト内の特定の値に基づいてオブジェクトを並べ替えることもできます。

  • X - Y: 小さいものから大きいものの順に並べ替えます
  • Y - X: 大から小まで並べ替えます

2.1 小規模から大規模へ (X - Y)

 let arr = new Array(6,5,2,8,19,35,5)
 arr.sort((x,y)=>x-y)   // 从小到大排列
 console.log(arr)       // 输出结果：[2, 5, 5, 6, 8, 19, 35]

2.2 最大から最小へ (Y - X)

 let arr = new Array(6,5,2,8,19,35,5)
 arr.sort((x,y)=>y-x)   // 从小到大排列
 console.log(arr)       // 输出结果：[35, 19, 8, 6, 5, 5, 2]

2.3 オブジェクト内の特定の値に従ってオブジェクトを並べ替える

let arr = [
  {
    
    name: "张三",age: 25,},
  {
    
    name: "李四",age: 23,},
  {
    
    name: "王五",age: 30,},
];
// 根据 age ,从小到大排序
arr.sort((x, y) => x.age - y.age);
console.log(arr);
// 输出结果如下：
// [
//  {name: "李四",age: 23,},
//  {name: "张三",age: 25,},
//  {name: "王五",age: 30,},
// ]

3. concat() - 接続

concat() は 2 つの配列を連結できます

let arr1 =new Array(1,2,3)
let arr2 =new Array(5,6,7)
// 将 arr1 与 arr2进行连接
let arr3= arr1.concat(arr2)
console.log(arr3);     // 输出结果；[1, 2, 3, 5, 6, 7]

// 将 arr1、arr2、10,11,12 进行连接
let arr4= arr1.concat(arr2,10,11,12)
console.log(arr4);    // 输出结果；[1, 2, 3, 5, 6, 7, 10, 11, 12]

4.every() - すべての値が条件を満たします

Every() は配列を走査でき、戻り値はブール値です

  • 配列の場合所有项均满足条件时のみ true を返します
  • それ以外の場合は false を返します

4.1 価値があるが条件を満たさない

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 10);
 console.log(result)  // 输出结果：false。显然并非每一项都大于10

4.2 すべての条件が満たされる

let arr = new Array(10, 11, 12, 13, 14, 15);
let result = arr.every((item) => item < 20);
console.log(result)  // 输出结果：true。显然数组中的每一项都小于20

5. some() - 少なくとも 1 つが条件を満たす

some() は配列を走査でき、戻り値はブール値です。Every() メソッドとの違いに注意してください

  • 配列至少一项满足条件时、 true を返します
  • それ以外の場合は false を返します

5.1 すべての値が条件を満たしていない

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 20);
 console.log(result)  // 输出结果：false。显然数组中不存在任何一项大于20

5.2 少なくとも 1 つの条件が満たされる

 let arr = new Array(10, 11, 12, 13, 14, 15);
 let result = arr.every((item) => item > 14);
 console.log(result)  // 输出结果：true。显然数组中存在一项大于14

6. filter() - フィルター配列

filter() は、过滤配列から特定の要素を削除し、残りの要素を返すために使用されます。

6.1 偶数のフィルタリング

 let arr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
 let arr2 = arr.filter((item) => {
    
    
   return item % 2 != 0;
 });
 console.log(arr2)   // 输出结果：[1, 3, 5, 7, 9]

6.2 配列内のオブジェクトをフィルタリングする

let arr = [
   {
    
     name: "张三", age: 15 },
   {
    
     name: "李四", age: 25 },
   {
    
     name: "王五", age: 30 },
   {
    
     name: "陈皮", age: 40 },
 ];
 let arr2 = arr.filter((item) => {
    
    
   // 可自行设置过滤条件
   return item.age > 25;
 });
 console.log(arr2);  // 输出结果：[{ name: "王五", age: 30 },{ name: "陈皮", age: 40 }]

7.map() - 新しい配列を返します

新しい配列を返します。配列内の要素は、関数を呼び出した後の元の配列の値です。

let arr = new Array(10, 11, 12, 13, 14, 15);
let arr2 = arr.map((item) => item + "你好"); // 返回新数组，进行数据拼接
console.log(arr2)   // 输出结果：["10你好","11你好","12你好","13你好","14你好","15你好"]

8. forEach() - ループトラバーサル

個人によって最も一般的に使用されるループ トラバーサル方法で、非常に高速で使いやすいです。

8.1 略語

let arr = [
  {
    
    name:'张三',age:15},
  {
    
    name:'李四',age:23},
  {
    
    name:'王五',age:32},
  {
    
    name:'陈皮',age:27},
]
// 只用到item,不用index时，可以省略括号
arr.forEach(item=>{
    
    
  // 拿到数组中的每一项，即可写入对应的逻辑代码
  console.log(item)
})

8.2 インデックス

let arr = [
  {
    
    name:'张三',age:15},
  {
    
    name:'李四',age:23},
  {
    
    name:'王五',age:32},
  {
    
    name:'陈皮',age:27},
]
arr.forEach((item,index)=>{
    
    
  // 可以拿到数组中的每一项，以及对应性的 index 
  console.log(item,index)
})

9.reduce()メソッドの概要

Reduce() メソッドは、配列内の各要素に対して指定した Reduce 関数を (昇順で) 実行し、その結果を 1 つの戻り値に要約します。Reduce メソッドは多くのことを行うことができ、配列の合計、配列の乗算、配列内の要素の出現数、配列の重複排除など、ループ トラバーサルで実行できることはすべて実行できます。

9.1 配列の累算

let arr = [1, 2, 3, 4, 5];
// 下一次循环时，item1 + item2 的值会赋值给 item1
let arr2 = arr.reduce((item1, item2) => item1 + item2);
console.log(arr2);  // 输出结果：15

9.2 配列の累積乗算

let arr = [1, 2, 3, 4, 5];
// 下一次循环时，item1 * item2 的值会赋值给 item1
let arr2 = arr.reduce((item1, item2) => item1 * item2);
console.log(arr2);  // 输出结果：120

9.3 アレイの重複排除

let arr = [1, 3, 5, 7, 9, 1, 3, 5];
let arr1 = arr.reduce((total, current, index) => {
    
    
  // 判断total中是否包含current
  if (!total.includes(current)) {
    
    
    return total.concat(current);
  } else {
    
    
    return total;
  }
}, []);
console.log(arr1);   // 输出结果：[1,3,5,7,9]

9.4 2 次元配列を 1 次元配列に変換する

let arr = [[1,2],[3,4],[5,6]]
let arr1 = arr.reduce((total,current)=>{
    
       // 方法二
  return total.concat(current)
},[])
console.log(arr1)  // 输出结果：[1,2,3,4,5,6]

幕間、ここでは 2 次元配列を配列に変換する簡単な方法を紹介します。

let arr = [[1,2],[3,4],[5,6]]
// 只需一行代码，即可将二维数组，转为一维数组
let arr1 = arr.flat(Infinity)
console.log(arr1)  // 输出结果：[1,2,3,4,5,6]

9.5 要素の出現を数える

let arr = ["王", "李", "王", "张", "张", "张"];
let num = arr.reduce((total, current) => {
    
    
  //  current in total current 是否在total中
  if (current in total) {
    
    
    total[current]++;
  } else {
    
    
    total[current] = 1;
  }
  return total;
},{
    
    });
console.log(num);  // 输出结果：{王: 2, 李: 1, 张: 3}

10. イテレータオブジェクト

複数のイテレータ オブジェクトがあり、異なるイテレータ オブジェクトを通じて異なる値を取得できます。

  • arr.keys() は配列内の各項目のキーを取得します
  • arr.values() は配列内の各項目の値を取得します
  • arr.entries() は配列内の各キーと値のペアを取得します

10.1 単純な for ループ

let arr = [10, 11, 12, 13, 14];
for(let item of arr){
    
    
  console.log(item)  // 输出结果： 10, 11, 12, 13, 14
}

10.2 イテレータオブジェクトは配列のキーと値のペアを取得します

let arr = [10, 11, 12, 13, 14];
for(let item of arr.entries(){
    
    
  console.log(item)
}

出力結果:
ここに画像の説明を挿入します

10.3 イテレータオブジェクトはキーのみを取得します

let arr = [10, 11, 12, 13, 14];
for (let item of arr.keys()) {
    
    
  console.log(item);
}

出力結果:
ここに画像の説明を挿入します

10.4 イテレータオブジェクトは値のみを取得します

let arr = [10, 11, 12, 13, 14];
for (let item of arr.values()) {
    
    
  console.log(item);
}

出力結果:
ここに画像の説明を挿入します

11. Array.from()

Array.from() は配列のような構造を配列に変換できます

function test() {
    
    
  // 通过 Array.from() 将 arguments 转为数组
  console.log(Array.from(arguments));
  // 转为数组后可以调用数组的方法
  Array.from(arguments).forEach(item=>{
    
    
    console.log(item)
  })
}
test(1, 2, 3);

出力結果:
ここに画像の説明を挿入します

12. 検索 -indexOf()

arr.indexOf は配列内の要素の位置を取得できます

  • この要素が存在する場合は、そのインデックスを返します
  • そのような要素がない場合は、-1 を返します。
let arr = [10, 11, 12, 13, 14, 15];
console.log(arr.indexOf(11), "11的index");  // 输出结果：1 '11的index'
console.log(arr.indexOf(20), "20的index");  // 输出结果：-1 '20的index'

13. 検索 - find()

find()、从头到尾検索、条件を満たす最初の値を返す

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item > 10);
console.log(res)  // 输出结果：11

14. 検索 - findLast()

findLast()、从尾到头検索、条件を満たす最初の値を返す

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item < 14);
console.log(res)  // 输出结果：13

15. 検索 - findIndex()

findIndex()、从头到尾検索、条件を満たす最初のデータのインデックス値を返します

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item > 10);
console.log(res)  // 输出结果：1

16. 検索 - findLastIndex()

findLastIndex()、从尾到头検索、条件を満たす最初のデータのインデックス値を返します

let arr = [10, 11, 12, 13, 14, 15];
let res = arr.find((item) => item < 14);
console.log(res)  // 输出结果：3

おすすめ

転載: blog.csdn.net/qq_61402485/article/details/132093908
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com