DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS針對Array的各種操作匯總
JS針對Array的各種操作匯總
編輯:關於JavaScript     

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、移除數組中的元素
移除數組 arr 中的所有值與 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; 
} 

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved