搜尋
首頁web前端css教學JS針對Array的各種操作匯總

Array應該是我們在平常寫js程式碼中,使用頻率最高的,在平常的專案中,許多資料都是可以透過Array來儲存、操作等任務。除了Object之外,Array型別應該是js中最常用的型別了。

今天總結Array的一些簡單和基本的操作,也來鞏固下自己的基礎知識。

一、如何建立Array(下面直接說數組)

創建數組主要有兩種方法,第一種是使用數組建構函數,第二種是使用數組字面量表示法。

1、使用陣列建構子

如:var arr = new Array();

如果預先知道陣列的長度,那麼也可以直接給建構函式傳遞該長度。

如:var arr = new Array(20);

如果知道數組中應該包含的項,就直接在構造的時候,傳遞數組中的應該包含的項。

如:var arr = new Array(1,2,3);

2、使用陣列字面量表示法

如:var arr = [1,2,3,4];

  var arr2 = [ ];

二、數組的操作

1、 棧方法和隊列方法

1)棧操作的方式:先進後出原則----透過重數組尾部添加資料項,然後在從數組的尾部獲取尾部資料項

push();----就是在數組的尾部添加資料項,該方法的參數個數可以自訂;

pop();---該方法就是取得數組的最尾部的一個資料項,函數無需傳遞任何參數;

如:

var colors = new Array();//建立陣列
var count = colors.push("red","green");//推入兩項
console.log(count);

var color = ["red","black"];
color.push("brown");//推入另一項
color[3]="yellow "; //新增一項
console.log(color);
console.log(color.push("blue"));
console.log(color.pop());//取得最後一項


2)佇列操作的方式:先進先出原則---透過從陣列的頭部插入資料項目來模擬實作

push();--向陣列末端新增資料項;

shift ();---取得陣列的頭部一項的資料資訊;

unshift();--與shift完全相反,就是向陣列的頭部插入資料項目資訊;

var colorArr = new Array() ;//建立數組
colorArr.push("red","yellow");//推入兩個項
console.log(colorArr);
var length = colorArr.push("blue");
console.log (length);

var item = colorArr.shift();//取得第一項
console.log(item);
console.log(colorArr.length);

2、檢測驗證組

。在平時專案開發中,我們往往會遇到,判斷一個物件是否為數組(函數的參數傳遞中),那麼如果判斷一個物件是否為數組呢,有以下兩種方式

1)第一種方法

  if(value instanseof Array){
   }

2)第二種方法

  if(Array.isArray(value)){
   }//该方法只使用与高版本的浏览器:IE9+、Firefox4+/Chrome

3、具體的編程實例

1)添加元素(數組末尾添加元素)

在數組arr 末尾添加元素item。不要直接修改數組arr,結果回傳新的數組.

方法一:slice()和push()結合

function append(arr, item) { 
  var newArr = arr.slice(0); // slice(start, end)浅拷贝数组 
  newArr.push(item); 
  return newArr; 
};

方法二:普通的迭代拷貝

function append(arr, item) { 
  var length = arr.length, 
    newArr = []; 
  
  for (var i = 0; i < length; i++) { 
    newArr.push(arr[i]); 
  } 
  
  newArr.push(item); 
  
  return newArr; 
};

方法三:使用concat

function append(arr, item) { 
  return arr.concat(item); 
}

2)添加元素(新增任意位置的元素)

在陣列arr 的index 處加入元素item。不要直接修改陣列 arr,結果傳回新的陣列。

方法一:使用普通的迭代拷貝

function insert(arr, item, index) { 
  var newArr=[]; 
  for(var i=0;i<arr.length;i++){ 
    newArr.push(arr[i]); 
  } 
  newArr.splice(index,0,item); 
  return newArr; 
}

方法二:slice()和splice()結合

function insert(arr, item, index) { 
  var newArr=arr.slice(0); 
  newArr.splice(index,0,item); 
  return newArr; 
}

方法三:concat()和splice()結合

function insert(arr, item, index) { 
  var newArr=arr.concat(); 
  newArr.splice(index,0,item); 
  return newArr; 
}

3、刪除元素(刪除數組最後一個元素(刪除數組最後一個元素元素)

刪除數組arr 最後一個元素。不要直接修改陣列 arr,結果回傳新的陣列 。

方法一:使用普通的迭代拷貝

function truncate(arr, item) { 
  var newArr=[]; 
  for(var i=0;i<arr.length-1;i++){ 
    newArr.push(arr[i]); 
  } 
  return newArr; 
}

方法二:concat()和pop()結合

function truncate(arr) { 
  var newArr = arr.concat(); 
  newArr.pop(); 
  return newArr; 
}

4、刪除元素(刪除數組第一個元素)

刪除數組 arr 第一個元素。不要直接修改陣列 arr,結果回傳新的陣列 。

方法一:使用普通的迭代拷貝

function curtail(arr) { 
  var newArr=[]; 
  for(var i=1;i<arr.length;i++){ 
    newArr.push(arr[i]); 
  } 
  return newArr; 
}

方法二:concat()和shift()結合

function curtail(arr) { 
  var newArr = arr.concat(); 
  newArr.shift(); 
  return newArr; 
}

方法三:slice()

function curtail(arr) { 
  return arr.slice(1); 
}

5、合併數組

合併數組 arr1 和數組 arr2。不要直接修改陣列 arr,結果回傳新的陣列 。

方法一:使用普通的迭代拷貝

function concat(arr1, arr2) { 
  var newArr=[]; 
  for(var i=0;i<arr1.length;i++){ 
    newArr.push(arr1[i]); 
  } 
  for(var j=0;j<arr2.length;j++){ 
    newArr.push(arr2[j]); 
  } 
  return newArr; 
}

方法二:concat()方法

function concat(arr1, arr2) { 
  return arr1.concat(arr2); 
}

方法三:slice()和push()結合

function concat(arr1, arr2) { 
  var newArr=arr1.slice(0); 
  for(var i=0;i<arr2.length;i++){ 
    newArr.push(arr2[i]); 
  } 
  return newArr; 
}

5、移除數組中的元素元

中的所有值與item 相等的元素。不要直接修改陣列 arr,結果回傳新的陣列 。

方法一:splice()方法

function remove(arr, item) { 
      var newArr = arr.slice(0); 
      for(var i=0; i<newArr.length; i++) { 
        if(newArr[i] == item) { 
          newArr.splice(i, 1); 
        } 
      } 
      return newArr; 
    } 
    var arr = [1,2,3,4,2]; 
    var item = 2; 
    console.log(remove(arr, item)); 
    console.log(arr);

方法二:push()方法🎜
function remove(arr,item){ 
  var newarr = []; 
  for(var i=0;i<arr.length;i++){ 
    if(arr[i] != item){ 
      newarr.push(arr[i]); 
    } 
  } 
  return newarr; 
}
🎜🎜🎜
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
兩個圖像和一個API:我們重新著色產品所需的一切兩個圖像和一個API:我們重新著色產品所需的一切Apr 15, 2025 am 11:27 AM

我最近找到了一種動態更新任何產品圖像的顏色的解決方案。因此,只有一種產品之一,我們可以以不同的方式對其進行著色以顯示

每周平台新聞:第三方代碼,被動混合內容,連接最慢的國家的影響每周平台新聞:第三方代碼,被動混合內容,連接最慢的國家的影響Apr 15, 2025 am 11:19 AM

在本週的綜述中,燈塔在第三方腳本上闡明了燈光,不安全的資源將在安全站點上被阻止,許多國家連接速度

託管您自己的非JavaScript分析的選項託管您自己的非JavaScript分析的選項Apr 15, 2025 am 11:09 AM

有很多分析平台可幫助您跟踪網站上的訪問者和使用數據。也許最著名的是Google Analytics(廣泛使用)

它全部都在頭上:管理帶有React頭盔的React Power Site的文檔頭它全部都在頭上:管理帶有React頭盔的React Power Site的文檔頭Apr 15, 2025 am 11:01 AM

該文檔負責人可能不是網站上最迷人的部分,但是其中所處的內容對於您的網站的成功也一樣重要

JavaScript中的Super()是什麼?JavaScript中的Super()是什麼?Apr 15, 2025 am 10:59 AM

當您看到一些稱為super()的JavaScript時,在子類中,您會使用super()調用其父母的構造函數和超級。訪問它

比較不同類型的本機JavaScript彈出窗口比較不同類型的本機JavaScript彈出窗口Apr 15, 2025 am 10:48 AM

JavaScript具有各種內置彈出API,它們顯示用於用戶交互的特殊UI。著名:

為什麼可訪問的網站如此難以構建?為什麼可訪問的網站如此難以構建?Apr 15, 2025 am 10:45 AM

前幾天,我與一些前端人們聊天,講述了為什麼這麼多公司努力創建可訪問的網站。為什麼可訪問的網站如此艱難

'隱藏”屬性顯然很弱'隱藏”屬性顯然很弱Apr 15, 2025 am 10:43 AM

有一個HTML屬性,它可以正是您認為應該做的:

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能