Web フロントエンド、JS ベースの配列の 4 つの使用法、チェック、変更、追加、削除

序文

継続的な学習の概要出力で、今日私が共有するのは、Web フロントエンド、JS ベースの配列の 4 つの使用法、チェック、変更、追加、削除です。

1. 配列とは何ですか

配列(Array)はデータを順番に格納できるデータ型です

考えてみます。
会社の研究開発部門の 5 人の名前を保存したい場合はどうすればよいでしょうか?
データが複数ある場合は、配列に保存できます。

2. 配列の基本的な使い方

1. 宣言構文

    <script>
        // let 数组名 = ['数据1', '数据1', '...','数据n']
        let names = ['小星', '小黄', '小伟','小霞','小亮']
    </script>

• 配列は順番に保存されるため、各データには独自の番号が付けられます。
• コンピュータの数字は 0 から始まるので、Xiaoxing の数字は 0、Xiaohuang の数字は 1 になります。
• 配列では、データの数はインデックスまたは添字とも呼ばれます
• 配列はあらゆるタイプのデータを格納できます

2. 値の構文

    <script>
        // let 数组名 [下标]
        let names = ['小星', '小黄', '小伟','小霞','小亮']
        names[0]  //小星
        names[1]  //小黄
    </script>

• 添字によるデータの取得
• どのような型を取り出すか、その型の特性に応じてアクセスします

3. いくつかの用語

要素: 配列に格納されている各データを配列要素と呼びます。
添字: 配列内のデータの数
長さ: 配列内のデータの数。配列の length プロパティを通じて取得されます。

    <script>
        let names = ['小星', '小黄', '小伟','小霞','小亮']
        console.log(names[0])   //小星
        console.log(names[1])   //小黄
        console.log(names.length)   //5
    </script>

4. 配列を走査する
ループを使用して配列内の各要素にアクセスします。通常は for ループを使用して走査します。

    <script>
         // 数组求和案例
        let arr = [20, 60, 10, 87, 44]
        for (let i = 0; i < arr.length; i++) {
      
      
            document.write (arr[i])
        }
    </script>

3. 演算配列

配列の本質はデータのコレクションであり、データの操作は追加、削除、変更、構文のチェックにすぎません。

1. 配列データ
配列 [添字] のクエリ
、または配列データへのアクセスと呼びます。

    <script>
         let arr = ['小星', '小黄', '小伟']
        // 访问 / 查询
        console.log(arr[0])
    </script>

2. array[subscript] = 新しい値を再割り当てします

    <script>
        let arr = ['小星', '小黄', '小伟']
        // 访问 / 查询
        console.log(arr[0])
        // 2. 改
        arr[0] = '小星星'
        // arr = '干嘛'
        console.log(arr)
    </script>

3. 新しいデータを配列に追加します。
arr.push (新しい内容) arr.unshift (新しい内容)

3.1 array.push()メソッドは、1 つ以上の要素を配列の末尾に追加し、配列の新しい長さを返します。

    <script>
       // arr.push('元素1', '...', '元素n')
        let arr = ['小星', '小黄']
        // 把 小伟 放到 arr 的后面
        // arr.push('小伟')
        // 返回值是新的数组长度： 
        // 不但把数组放入数组，而且还告诉我们，看看有3个值啦
        // console.log(arr.push('小伟'))
        arr.push('小伟', '小霞')
        console.log(arr)
    </script>

3.2 arr.unshift (新しいコンテンツ)メソッドは、配列の先頭に 1 つ以上の要素を追加し、配列の新しい長さを返します。

    <script>
    // arr.unshift('元素1', '...', '元素n')
      let arr = ['小星', '小黄']
        // arr.unshift('小伟', '小霞')
        console.log(arr.unshift('小伟', '小霞'))
        console.log(arr)
    </script>

4. 配列内のデータを削除します
arr.pop()
arr.shift()
arr.splice (操作の添字、削除数)

4.1 配列: Pop()メソッドは、配列から最後の要素を削除し、要素の値を返します。

    <script>
	    let arr = ['小星', '小黄', '小伟']
        // 删除最后一个元素
	      arr.pop()
    </script>

4.2 配列:shift()メソッドは、配列から最初の要素を削除し、その要素の値を返します。

    <script>
	    let arr = ['小星', '小黄', '小伟']
        console.log(arr.pop())
        // 看我删了一个， 删的是 第一个 小星
    </script>

4.3 配列: splice()メソッドは指定された要素を削除します

    <script>
         // console.log(arr.shift())
        // shift是删除     unshift比shift 加了一个 un 表示加
        // console.log(arr)
        // 重点删除  arr.splice(从哪里开始删， 删几个)
        let arr = ['小星', '小黄', '小伟']
        //  我就想把小黄 删掉
        // 第一个1 是从索引号是1的位置开始删
        // 第二1 是删除几个
        // arr.splice(start, deleteCount)
        // arr.splice(1, 1)
        // arr.splice(1)
        console.log(arr)
    </script>

説明する：

start 開始位置:
変更の開始位置を指定します (0 から数えます)
deleteCount:
削除する配列要素の数を示します
オプション。省略した場合、デフォルトでは指定された開始位置から最後まで削除されます。

まとめ

1. 配列の末尾にデータ要素を追加するにはどのメソッドを使用しますか?
arr.push()
は 1 つ以上の配列要素を追加し
、配列の長さを返します。

2. 配列の先頭にデータ要素を追加するにはどのようなメソッドを使用しますか?
arr.unshift()
は 1 つ以上の配列要素を追加し
、配列の長さを返します。

3. それを覚えていますか?
arr.push()

4. 配列の末尾にあるデータ要素を削除するにはどのメソッドが使用されますか? パラメータあり?
arr.pop()
パラメータなしの場合、
戻り値は削除された要素です

5. 配列の先頭にあるデータ要素を削除するにはどのメソッドが使用されますか? パラメータあり?
arr.shift()
パラメータなしの場合、
戻り値は削除された要素です

6. 配列要素を削除するにはどれを指定しますか? 開発でよく使われますか? 使用シーンはありますか?
arr.splice (開始位置、削除数) は、
ランダムな抽選など、開発でよく使われます。指定商品の削除など

4. ケース

配列 sum
要件: 配列内のすべての要素の合計と平均を求めます [66,86,78,75, 94]
分析:
1. sum 変数 sum を宣言します。
2. 配列を走査し、各配列要素を合計に加算します。
3. sum 変数を配列の長さで割って、配列の平均値を取得します。

 <script>
        // 数组求和案例
        let arr =  [66,86,78,75, 94] 
        // 求和变量
        let sum = 0
        // 求平均值变量
        let average = 0
        // 遍历数组
        for (let i = 0; i < arr.length; i++) {
      
      
            // console.log(arr[i])
            // sum = sum + arr[i]
            // arr[i] 就是数组里面的每个值 比如 66,86
            sum += arr[i]
        }
        average = sum / arr.length
        document.write(`这个同学的总分是: ${ 
        sum}, 平均分是:${ 
        average}`)
    </script>

操作結果:

配列のスクリーニング
要件: 配列 [2、0、6、1、77、0、52、0、25、7] から 10 以上の要素を選択し、それらを新しい配列に入れます。 分析: 1. 新しい配列を宣言します。新しいデータ newArr を格納するには、
配列を使用します。 2. 元の古い配列を走査して、10 以上の要素を見つけます。 3. 新しい配列 newArr に順番に追加します。

  <script>
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        // 需要一个新的空数组   数组字面量  [] 
        let newArr = []
        // 遍历旧数组
        for (let i = 0; i < arr.length; i++) {
      
      
            if (arr[i] >= 10) {
      
      
                // console.log(arr[i])
                // 满足条件的，依次追加给新的数组
                // 把 arr[i] 追加给 newArr
                // newArr = arr[i]  不可以
                newArr.push(arr[i])
            }
        }
        console.log(newArr)
    </script>

操作結果:

5. まとめ

最後に一文をシェアします。

世界を変えるのが難しいとき、哲学は人生に対処する力を与えてくれます。それは、ひとり歩く夜道を照らす星のよう、痛みを癒す優しい慰め、人生の迷いを解く知恵「哲学の慰め
」

今回の共有は以上です。！！

コメント欄にメッセージを残して議論することを歓迎します。！