一般的な配列メソッドをすべて理解するための記事（おすすめ集）

プログラミング 2023-07-29 22:48:10 訪問数: null

記事ディレクトリ

序文

作中では配列内のデータを処理することが多いのですが、配列のメソッドはたくさんあり、メソッドの名前や使い方を忘れがちなので、一般的な使い方を特別に記録しておきます。使用された配列。
なお、これは Vue フレームワークをベースに書いていますが、ネイティブ JS やその他のフレームワークを使用する場合は、書式の問題に注意する必要があります。

元の配列を変更します

ポップ

配列の最後の要素を削除し、削除された要素を返します。

  • 文法

配列.ポップ()

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.pop()
    console.log('修改后:'+newData);
    console.log('修改后:'+this.data);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

押す

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

  • 文法

array.push(アイテム1, アイテム2, …, アイテムX)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.push('77')
    console.log('修改后:'+this.data);
    console.log('修改后返回的值:'+newData);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

シフト

配列の最初の要素を削除して返します。

  • 文法

配列.シフト()

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.shift()
    console.log('修改后:'+this.data);
    console.log('修改后返回的值:'+newData);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

シフトを解除する

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

  • 文法

array.unshift(item1,item2,…,itemX)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    let newData = this.data.unshift('0')
    console.log('修改后:'+this.data);
    console.log('修改后返回的值:'+newData);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

逆行

配列の要素の順序を逆にします。

  • 文法

配列.reverse()

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    this.data.reverse()
    console.log('修改后:'+this.data);
  }
}
  • 効果
    ここに画像の説明を挿入

選別

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

  • 文法

配列.sort(ソート関数)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[5,3,6,1,7,8,2,9,4],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    this.data.sort()
    console.log('修改后:'+this.data);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

スプライス

配列の要素を挿入、削除、または置換するために使用されます。

  • 文法

array.splice(インデックス,何個,アイテム1,…,アイテムX)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
    }
  },
  mounted(){
    
    
    console.log('修改前:'+this.data)
    this.data.splice(1,3)   //删除下标1至3
    console.log('删除下标1至3:'+this.data);
    this.data = [1,2,3,4,5,6,7,8,9,10]

    this.data.splice(1,0,'a')   //在下标1插入a
    console.log('在下标1插入a:'+this.data);
    this.data = [1,2,3,4,5,6,7,8,9,10]

    this.data.splice(1,2,'a','b')   //在下标1至2替换为'a','b'
    console.log('在下标1至2替换为a,b:'+this.data);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

元の配列を変更しません

連結

2 つ以上の配列を連結して結果を返します。

  • 文法

string.concat(string1, string2, …, stringX)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[1,2,3,4,5,6,7,8,9,10],
      data2:['a','b','c','d','e','f','g','h','i','j'],
    }
  },
  mounted(){
    
    
    console.log('修改前(data)：',this.data);
    console.log('修改前(data2)：',this.data2);
    let newData = this.data.concat(this.data2)
    console.log('修改后:'+newData);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

毎日

配列要素の各要素が条件を満たしているかどうかを確認します。

  • 文法

array.every(関数(currentValue,index,arr), thisValue)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.every((item) => {
    
    
      return item > 10
    })
    let newData2 = this.data.every((item,index,arr) => {
    
    
      console.log(index); //index可以当做第一个不符合验证的下标
      console.log(arr); //当前数组
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

いくつかの

配列要素内のいずれかの要素が指定された条件を満たすかどうかを確認します。

  • 文法

array.some(関数(currentValue,index,arr),thisValue)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.some((item,index,arr) => {
    
    
      console.log(index); //index可以当做符合验证的下标
      console.log(arr); //当前数组
      return item < 100
    })
    let newData2 = this.data.some((item) => {
    
    
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

フィルター

配列要素を検出し、基準を満たすすべての要素の配列を返します。

  • 文法

array.filter(関数(currentValue,index,arr), thisValue)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.filter((item,index,arr) => {
    
    
      console.log(index); //当前下标
      console.log(arr); //当前数组
      return item < 100
    })
    let newData2 = this.data.filter((item) => {
    
    
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

の指標

配列内の要素を検索し、その位置を返します。

  • 文法

string.indexOf(検索値,開始)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.indexOf(300)   //找第一个300的位置并返回下标
    let newData2 = this.data.indexOf(100)   //找第一个100的位置并返回下标，没找到则为-1
    let newData3 = this.data.indexOf(300,3) //从下标为3开始找300，没找到为-1
    console.log(newData);
    console.log(newData2);
    console.log(newData3);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

加入

配列のすべての要素を文字列に入れます。

  • 文法

array.join(セパレータ)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[],
      data2:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('修改前:',this.data);
    this.data = this.data2.join(',')  //将data2赋值给data1并且以','隔开,注意会覆盖data中的内容
    console.log('修改后:',this.data);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

配列を文字列に変換し、結果を返します。

  • 文法

数値.toString(基数)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('修改前:',this.data);
    this.data = this.data.toString()  
    console.log('修改后:',this.data);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

lastIndexOf

文字列内の指定された位置を前後に検索して、指定された文字列値が最後に出現した位置を返します。

  • 文法

string.lastIndexOf(検索値,開始)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('data:',this.data);
    let num = this.data.lastIndexOf(50)  
    console.log('50最后出现的位置:',num);
    let num2 = this.data.lastIndexOf(300,1)  //下标为1的地方找，注意这里是从后往前找
    console.log('300最后出现的位置:',num2);
    let num3 = this.data.lastIndexOf(600)  
    console.log('600最后出现的位置:',num3); //没找到则返回-1
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

地図

指定された関数で配列の各要素を処理し、処理された配列を返します。

  • 文法

array.map(function(currentValue,index,arr), thisValue)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    let newData = this.data.map((item,index,arr) => {
    
    
      console.log(index); //当前下标
      console.log(arr); //当前数组
      return item < 100
    })
    let newData2 = this.data.map((item) => {
    
    
      return item > 100
    })
    console.log(newData);
    console.log(newData2);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

スライス

配列の一部を選択し、新しい配列を返します。

  • 文法

rray.slice(開始、終了)

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:[200,50,300,400,500]
    }
  },
  mounted(){
    
    
    console.log('data:',this.data);
    let num = this.data.slice(1,4)  
    console.log('截取第一个到第三个:',num);
    let num2 = this.data.slice(-4,-1)  
    console.log('截取倒数第四个到倒数第二个:',num2);
    let num3 = this.data.slice(-3)  
    console.log('截取倒数三个:',num3);
    let num4 = this.data.slice(2)  
    console.log('截取第二个后面的全部:',num4);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

配列オブジェクトのプリミティブ値を返します。

  • 文法

数値.値()

  • コード
<script>
export default {
    
    
  data(){
    
    
    return{
    
    
      data:1
    }
  },
  mounted(){
    
    
    console.log(this.data);
    let newData = this.data.valueOf()
    console.log(newData);
  }
}
</script>
  • 効果
    ここに画像の説明を挿入

おすすめ

転載: blog.csdn.net/weixin_44748171/article/details/129876260
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
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)
2024-05-04(18)

コードワールド

© 2018 codetd.com