JS在數(shù)組頭部添加元素的3種方法
更新時間：2023年10月08日 15:07:41 作者：zzzyyyyy丶
JS數(shù)組是一種特殊的對象,JS沒有真正的數(shù)組,只是用對象模擬數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JS在數(shù)組頭部添加元素的3種方法,需要的朋友可以參考下
1. 使用Array.unshift()方法,在數(shù)組頭部插入元素
let person= ['張三', '李四', '王五'];
console.log(person.unshift('小明')); // 4
console.log(person); // ["小明", "張三", "李四", "王五"]
// 注意: 此方法的返回值是數(shù)組的長度 且改變原數(shù)組2. 使用ES6的擴(kuò)展運(yùn)算符(...)
// 定義一個數(shù)組 let arr = ['張三', '李四'] let arr2 = ['王五', ...arr] console.log(arr2) // 王五 張三 李四 // 定義一個數(shù)組，在頭部寫好需要插入的項(xiàng)后使用擴(kuò)展運(yùn)算符對原數(shù)組進(jìn)行展開
3. 使用Array.contact方法,將數(shù)組進(jìn)行拼接
// contact方法連接兩個或多個數(shù)組 let arr1 = ['前端', 'JAVA'] let arr2 = ['攻城獅', '程序猿'] // 需添加在頭部的元素 console.log(arr2.contact(arr1)) // 攻城獅 程序猿 前端 JAVA // 注: contact方法不改變原數(shù)組
附：在數(shù)組中添加刪除或替換元素
splice();在任意位置添加或刪除元素,返回刪除或被替換的值，如果沒有被刪除或替換則返回空數(shù)組;
splice()方法會修改原數(shù)組的值;
只有一個值時，從當(dāng)前位置刪除到數(shù)組末尾
let arr=[1,2,3,4,5]； let num1=arr.splice(1) console.log(num1;arr)//num=[2,3,4,5];arr=[1];
有兩個值時，第一個值為刪除的位置，第二個值為刪除的個數(shù);
let arr=[1,2,3,4,5]； let num1=arr.splice(2,3)//刪除從索引值2開始的3個元素 console.log(num1;arr);// num1=[3,4,5],arr=[1,2]
有三個或者多個值時，第一個值為插入元素的位置，第二個值為替換的個數(shù)，后面的值都為插入的新元素；
let arr=[1,2,3,4,5]； let num2=arr.splice(2,1,6,7,8);//從索引值2開始替換掉1個元素，并且插入6,7,8 //如果第二個值為0，則不替換，直接插入6,7,8; console.log(num2;arr);//被替換的值num2=[3]; arr=[1,2,6,7,8,4,5]
總結(jié)
到此這篇關(guān)于JS在數(shù)組頭部添加元素的3種方法的文章就介紹到這了,更多相關(guān)JS數(shù)組頭部添加元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Three.js實(shí)現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來實(shí)現(xiàn)一個具有物理特性的乒乓球小游戲，使用 React Three Fiber 搭建基礎(chǔ)三維場景、如何使用新技術(shù)棧給場景中對象的添加物理特性等，最后利用上述知識點(diǎn)，將開發(fā)一個簡單的乒乓球小游戲,需要的朋友可以參考下2023-03-03
javascript 事件查詢綜合,需要的朋友可以參考下。2010-03-03
前端實(shí)現(xiàn)電子簽名的步驟及注意事項(xiàng)
本文詳細(xì)介紹了前端技術(shù)中電子簽名的實(shí)現(xiàn)方法,包括技術(shù)選型如HTML5?Canvas和SVG,以及實(shí)現(xiàn)步驟和數(shù)據(jù)安全措施,電子簽名確保了法律效力和數(shù)據(jù)的安全性,適用于多種文件簽署需求,需要的朋友可以參考下2024-11-11
JS實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的方法詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的兩種方法詳解，文中的示例代碼簡潔易懂，感興趣的小伙伴可以動手嘗試一下2022-06-06
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡單常見HTML5 Canvas特效濾鏡，并且封裝成一個純JavaScript可調(diào)用的API文件gloomyfishfilter.js，程序源代碼如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要給大家介紹了關(guān)于JavaScript類型檢測的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
今天小編就為大家分享一篇layui-select動態(tài)選中值的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript實(shí)現(xiàn)標(biāo)簽切換代碼示例
本文給大家分享的事tab切換的兩段js，均可實(shí)現(xiàn)標(biāo)簽切換功能，大家根據(jù)自己的需求自由選擇2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)圖片粘貼到網(wǎng)頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
本文主要對javascript中的JSON進(jìn)行詳細(xì)介紹。相信對于初學(xué)者具有很好的參考價值，下面就跟著小編一起來看下吧2016-12-12