快捷導(dǎo)航

Vue數(shù)組添加元素的三種實(shí)現(xiàn)方式

更新時(shí)間：2025年09月15日 10:35:41 作者：山間漫步人生路

這篇文章主要介紹了Vue數(shù)組添加元素的三種實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1、push() 結(jié)尾添加

數(shù)組.push(元素)

var node1 = ['111','222']
var new_node = node1.push('aaa')

此時(shí)數(shù)據(jù)為
node1: ['111','222','aaa']

2、unshift() 頭部添加

數(shù)組.unshift(元素)

var node1 = ['111','222']
var new_node = node1.unshift('aaa')

此時(shí)數(shù)據(jù)為
node1: ['aaa','111','222']

3、splice()

方法向/從數(shù)組指定位置添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目。

參數(shù)	描述
index	必需。整數(shù)，規(guī)定添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
howmany	必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目。
item1, …, itemX	可選。向數(shù)組添加的新項(xiàng)目。

 /**
     * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
     * @param start The zero-based location in the array from which to start removing elements.
     * @param deleteCount The number of elements to remove.
     * @returns An array containing the elements that were deleted.
     */
    splice(start: number, deleteCount?: number): T[];
    /**
     * Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
     * @param start The zero-based location in the array from which to start removing elements.
     * @param deleteCount The number of elements to remove.
     * @param items Elements to insert into the array in place of the deleted elements.
     * @returns An array containing the elements that were deleted.
     */
    splice(start: number, deleteCount: number, ...items: T[]): T[];

例如：

1、刪除：刪除(任意個(gè)數(shù))

參數(shù)1：開始的索引
參數(shù)2：刪除的長(zhǎng)度

var node = ['11','22','33','44']
var new_node = node.splice(1,2)
//返回被刪除的數(shù)組元素
//new_node  輸出 ['22','33']
console.log(new_node )
//node輸出 ['11','44']
console.log(node)

2、添加(任意個(gè)數(shù)): 插入起始位置、0（要?jiǎng)h除的項(xiàng)數(shù)）和要插入的項(xiàng)（不限）

var node = ['11','22','33','44']
//添加splice(start,0,newInfo)--返回值為空數(shù)組
var new_node = node.splice(1,0,'aa','bb')
// new_node 輸出 []
console.log(new_node)
// node 輸出 ['11', 'aa', 'bb', '22', '33', '44']
console.log(node)