The way to add elements to the array in the vue project

learning target:

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

---

Learning Content:

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

method:

1. push()
2. unshift()
3. splice()

---

Summarize:

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

• 1.
  The meaning of push(): add at the end of push()
  　 Usage: array.push(element)
  　　

示例代码如下：
this.list.push(newList)  
//push()  在数组末端添加一条数据 
console.log(this.list)

• 2. The meaning of unshift()
  : unshift() adds to the head
  　 How to use: array.unshift(element)
  　

示例代码如下：
let newList = {
   id:'4'
   name1:'a4',
   name2:'b4',
 }
this.list.unshift(newList)  //unshift()在数组头部添加一条数据 
console.log(this.list)

• 3. The meaning of splice()
  : The splice() method adds/deletes items to/from the specified position of the array, and then returns the deleted item.
  Usage: Array.splice(index,0,newList)
  Explanation: The first parameter is the subscript of the data to be operated, and the
  second parameter is the operation add/delete (0 is add, 1 is no operation, 2 is delete, 3 is to delete multiple pieces of data),
  the third parameter is optional
  

示例代码如下：

   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)
 

The analysis diagram is as follows:
The first case: passing one parameter

The second case: passing two parameters

The third case: the passed parameter is a negative value The
parameter passed by slice() can also be a negative value. When there is a negative value in the parameter, the corresponding position is determined by adding the number to the length of the array. For example, if the passed value is -3 and the length of the array is 6, then slice(-3) corresponds to slice(3). Or you can start counting from the end of the array, and the last one is -1.
The analysis diagram is as follows:

Points to pay special attention to:
the second parameter passed can also be a negative number, and it can also be mixed with positive and negative numbers.
Special attention: When slice() passes two parameters, the first parameter and the second parameter are in the same position or the first parameter is after the second parameter, the new array obtained is an empty value (the negative value is also similar , but the negative value is compared with the sum of the length of the value).
In short, if the end position is less than or equal to the start position, an empty array will be returned.

The analysis diagram is shown in the figure below:

• 4. concat() // array merge

//示例代码如下：

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() method:
Meaning: We can understand it as merging arrays.
Principle: Create a new array based on all items in the current array, that is, concat() first creates a copy of the current array, then adds the received parameters to the end of the copy (array), and finally returns a new array.

第一种情形：传递一个参数或多个参数
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]
总结：
此时它只是复制当前数组，并且返回一个副本。

**

Summary: The concat() method operates on a copy of the array and returns a newly constructed array without affecting the original array.

**