vue プロジェクトで配列に要素を追加する方法

学習目標:

提示:了解 vue 向数组 添加元素 的三种方式


学習内容:

提示: vue 向数组 添加元素 的三种方式

方法:

  1. 押す()
  2. アンシフト()
  3. スプライス()

要約:

提示:这里总结相关的知识

  • 1.
    push() の意味: push() の最後に追記
      使い方: array.push(element)
      ここに画像の説明を挿入
示例代码如下:
this.list.push(newList)  
//push()  在数组末端添加一条数据 
console.log(this.list)

  • 2. unshift() の意味
    : unshift() は先頭に追加します
      使用方法: array.unshift(element)
      ここに画像の説明を挿入
示例代码如下:
let newList = {
   id:'4'
   name1:'a4',
   name2:'b4',
 }
this.list.unshift(newList)  //unshift()在数组头部添加一条数据 
console.log(this.list)

  • 3. splice() の意味
    : splice() メソッドは、配列の指定された位置にアイテムを追加/削除し、削除されたアイテムを返します。
    使用法: Array.splice(index,0,newList)
    説明: 第 1 パラメータは操作するデータの添字、第
    2 パラメータは操作の追加/削除 (0 は追加、1 は操作なし、2 は削除) 、3 は複数のデータを削除することです)、
    3 番目のパラメーターはオプションです
    ここに画像の説明を挿入
示例代码如下:

   let newList = {
     id:time.id,
     name1:time.name1,
     name2:time.name2,
   }
   //第一个参数为需要操作数据的下标,第二个参数为操作添加/删除(0为添加,1为不操作,2为删除,3为删除多条数据),第三个参数可选
   this.list.splice(index,0,newList) 
   console.log(this.list)
 

分析図は次のとおりです。
最初のケース: 1 つのパラメーターを渡す
ここに画像の説明を挿入
2 番目のケース: 2 つのパラメーターを渡す
ここに画像の説明を挿入
3 番目のケース: 渡されたパラメーターは負の値です
パラメーターに負の値がある場合、対応する位置は、配列の長さに数値を追加することによって決定されます。たとえば、渡された値が -3 で、配列の長さが 6 の場合、slice(-3) は slice(3) に対応します。または、配列の最後から数え始めることができ、最後のものは -1 です。
分析図は次のとおりです。
ここに画像の説明を挿入
特に注意する点:
渡される 2 番目のパラメーターは負の数にすることも、正と負の数を混在させることもできます。
特記事項: slice() が 2 つのパラメーターを渡す場合、最初のパラメーターと 2 番目のパラメーターが同じ位置にある場合、または最初のパラメーターが 2 番目のパラメーターの後にある場合、取得される新しい配列は空の値です (負の値も同様ですが、負の値は、値の長さの合計と比較されます)。
つまり、終了位置が開始位置以下の場合、空の配列が返されます。

分析図を下の図に示します。
ここに画像の説明を挿入

  • 4. concat() // 配列のマージ
//示例代码如下:

let arrA = [1,2,3]
let arrB = [4,5,6]
arrA.concat(arrB) // 输出 1,2,3,4,5,6

let arrC = [7,8,9]
arrA.concat(arrB,arrC) // 输出 1,2,3,4,5,6,7,8,9

concat() メソッド:
意味: 配列のマージと理解できます。
原則: 現在の配列内のすべての項目に基づいて新しい配列を作成します。つまり、concat() は最初に現在の配列のコピーを作成し、次に受け取ったパラメーターをコピー (配列) の末尾に追加し、最後に新しい配列を返します。配列。

第一种情形:传递一个参数或多个参数
var arr = [`1`,'2','3'];
console.log(arr);
结果输出:
 // ["1", "2", "3"]
var arr2 = arr.concat('4','5','6');
console.log(arr2);
结果输出
 // ["1", "2", "3", "4", "5",'6']

第二种情形:
 传递一个或多个数组
 示例代码如下:
 var arr = ["1","2",'3'];
console.log(arr);
结果输出
 // ["1", "2",'3']
var arr2 = arr.concat(10,["4","5",'6'],["7","8","9"]);
console.log(arr2);
输出结果
 // ["1", "2",'3',10, "4", "5", "6", "7", "8",'9']

第三种情形:
传递空值(也就是说没有传递参数)
示例代码如下:
var arr = [1,2,3];
console.log(arr); // [1, 2,3]
var arr2 = arr.concat();
console.log(arr2); // [1, 2,3]
总结:
此时它只是复制当前数组,并且返回一个副本。

**

概要: concat() メソッドは配列のコピーを操作し、元の配列に影響を与えることなく、新しく構築された配列を返します。

**

おすすめ

転載: blog.csdn.net/YHLSunshine/article/details/130272026