JS - 基礎學習(1): 數組(列表)的基本操作

　　本文主要介紹JS對數組(列表)的基本操作。習慣了用數據庫的操作順序來說明：增、刪、改、查；合並，裁剪，排序，格式化。

一.數組元素的添加(增加)

　　增加數組元素有三種方法：unshift()  push()  splice()

　　1、arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始位置(即頭部)，數組中的原元素自動后移；並返回數組新長度。

　　2、arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾；並返回數組新長度。

　　3、arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置，插入位置的元素自動后移，返回""。

　　舉例說明：

unshift()
var a = [1,2.5,"a","yes"];
var temp = a.unshift(-1,-2.2);
console.log(a);     //[-1, -2.2, 1, 2.5, "a", "yes"] console.log(temp);  //6 數組的長度 push()
var a = [1,2.5,"a","yes"];
var temp = a.push(-1,-2.2);
console.log(a);     //[1, 2.5, "a", "yes", -1, -2.2] console.log(temp);  //6 數組的長度   
splice()    將數據添加到原數組結尾
var a = [1,2.5,"a","yes"];
var temp = a.splice(a.length,0, -1,-2.2);    //此將數據添加到原數組結尾，同push()
console.log(a);     //a: [1, 2.5, "a", "yes", -1, -2.2] console.log(temp);  //[] 空數組 
splice()    將數據添加到原數組開頭
var a = [1,2.5,"a","yes"];
var temp = a.splice(0,0, -1,-2.2);   //此將數據添加到原數組開頭，同unshift()
console.log(a);     //a: [-1, -2.2, 1, 2.5, "a", "yes"] console.log(temp);  //[] 空數組 splice()    將數據添加到具體位置
var a = [1,2.5,"a","yes"];
var temp = a.splice(2,0, -1,-2.2);   //此將數據添加到第三個位置
console.log(a);     //a: [1, 2.5, -1, -2.2, "a", "yes"] console.log(temp);  //[] 空數組

 

二.數組元素的刪除

　　刪除數組元素有三種方法：shift()  pop()  splice()

　　1、  arayObj.shift();//刪除原數組第一項，並返回刪除元素的值；如果數組為空則返回undefined 

　　2、  arrayObj.pop();//刪除原數組最后一項，並返回刪除元素的值；如果數組為空則返回undefined

　　3、  arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素，以數組形式返回所移除的元素

　　舉例說明：

shift()
var a = [1,2.5,"a","yes"];
var temp = a.shift();
console.log(a); //[2.5, "a", "yes"] console.log(temp);  // 1 原數組第一項       
pop()
var a = [1,2.5,"a","yes"];
var temp = a.pop();
console.log(a); // [1, 2.5, "a"] console.log(temp);  // yes 原數組最后一項 splice()    刪除指定位置開始的數據。第一個參數是指定位置，第二個參數是刪除從指定位置開始的數據個數
var a = [1,2.5,"a","yes"];
var temp = a.splice(1,1);       //刪除第2個位置開始的1個數據，
console.log(a); // [1, "a", "yes"] console.log(temp);  // [2.5] 以數組形式返回移除的元素 var temp = a.splice(1,2);       //刪除第2個位置開始的2個數據，
console.log(a); // [1, "yes"] console.log(temp);  // [2.5, "a"] 以數組形式返回移除的元素

 

三.數組元素的修改

　　數組元素值的修改：先按元素的索引查找到需要修改的元素; 然后進行元素值的修改。

　　舉例說明：

var a = [1,2.5,"a","yes"];
a[2] = "IT";
console.log(a); // [1, 2.5, "IT", "yes"]

　　還可以通過splice()函數進行修改。splice(start,delCount,val1,val2,...):從start位置開始刪除delCount項后，並從該開始位置起插入val1,val2,...  當然刪除的元素個數和添加的元素個數必須相等。 

var a = [1,2.5,10,"No","a","yes"];      通過指定位置先刪除再插入，達到修改數組的目的
var temp = a.splice(2,2,"You",0.1);
console.log(a);     // [1, 2.5, "You", 0.1, "a", "yes"] console.log(temp);  // [10, "No"] 其實就是刪除項，用數組形式返回

 

四.數組元素的查詢(訪問)

    獲取數組元素值通用的一個方法：按元素的索引獲取元素值; 返回改索引下的元素值

      注：一次只能返回一個元素值，不能切片分塊返回，也不能從數組末尾以負數形式返回

　　舉例說明：

var a = [1,2.5,"a","yes"];
var temp = a[1];
console.log(temp);  // 2.5 返回數組索引為1的元素值 var temp = a[1,2]; var temp = a[-1];　　//這兩種都是錯誤的，無法獲取想要的數據

 

五.數組元素的合並

   將兩個以上數組合並為一個數組，常用的方法是concat()，此方法返回一個新的數組，而參與合並的原數組不變。

　　舉例說明：

var a = [1,5,2,15,6];
var b = ["You","No","a","yes"];
var temp = a.concat(b); //將b合並到a后面 var tempdata = b.concat(a);     //將a合並到b后面 console.log(temp);      // [1, 5, 2, 15, 6, "You", "No", "a", "yes"] console.log(tempdata);     //["You", "No", "a", "yes", 1, 5, 2, 15, 6]

　　通過concat()函數實現兩個以上數組的合並，其實通過循環使用unshift()和push()也可以做到。

　　比如將b加在a后面/前面，可以循環使用push()/unshift()函數。

var a = [1,5,2,15,6];
var b = ["You","No","a","yes"];
for(var i=0; i< b.length; i++){ a.push(b[i])        //將b加在a后面；如果希望將b加在a前面，則改用unshift（）
} console.log(a); // [1, 5, 2, 15, 6, "You", "No", "a", "yes"] console.log(b);  // ["You", "No", "a", "yes"]

　　這樣做將會改變宿主數組，如果不希望改變原數組的話，則新建一個新的空數組，將宿主數組(載體數組)拷貝給新數組，這樣原數組就可以不改變。注：這里的拷貝是深拷貝，而不是直接將a賦值給新數組，那樣的話新數組其實只是保存了原數組的一個地址，新數組被修改，則原數組一樣會被修改。

六.數組元素裁剪

    數組的裁剪：是在原數組基礎上截取出一個小的數組，以便於使用和存放。截取的元素組成一個新的數組副本，而原數組不發生改變。

　　數組的裁剪一般使用slice()函數，slice(start,end):返回從原數組中指定開始下標到結束下標之間的元素組成新的數組 ，若結束下標超出原數組總長，則以原數組結尾處下標為結束下標。

　　舉例說明：

var a = [1,2.5,"a","yes",12,23];
var temp = a.slice(2,5); //裁剪下標為2到下標為5的元素；結束下標未超出數組總長
console.log(temp);  // ["a", "yes", 12] console.log(a);     // [1, 2.5, "a", "yes", 12, 23] 原數組不發生改變 var temp = a.slice(2,15);   //裁剪下標為2到下標為15的元素；結束下標超出數組總長
console.log(temp);  // ["a", "yes", 12, 23] 結束下標自動以原數組結尾下標為結束下標 console.log(a);     // [1, 2.5, "a", "yes", 12, 23]

 

七.數組元素排序

     數組的排序：是在原數組的基礎上對數組元素進行整理，使得元素按照一定順序排列，不會生成副本。

     數組排序一般使用數組對象內置方法sort()。sort()方法用於對數組的元素進行排序。

　　　如果調用該方法時沒有傳入參數，將按字母順序對數組中的元素進行默認排序，是按照字符編碼的順序進行排序。如果想按其他標准進行排序，則需要提供比較函數，該函數比較兩個值，然后返回一個數字來說明這兩個值的大小。比較函數具有兩個參數 a 和 b，其返回值如下：

　　若 a 小於 b，在排序后的數組中 a 應該出現在 b 之前，則返回一個小於 0 的值(-1)。

　　若 a 等於 b，則返回 0。

　　若 a 大於 b，則返回一個大於 0 的值。

　　舉例說明：

1、純字符串排序
var a = ["zhao","qian","sun","li","zhou","wu","zheng"];
var temp = a.sort();
console.log(a); // ["li", "qian", "sun", "wu", "zhao", "zheng", "zhou"] console.log(temp);  // ["li", "qian", "sun", "wu", "zhao", "zheng", "zhou"] 返回排好序的原數組 先按第一個字母排序，第一個相同則按第二個排序，以此類推。 2、字符串和數字混雜
var a = ["zhao","qian",1,"li","zhou","wu",2];
var temp = a.sort();
console.log(a); //[1, 2, "li", "qian", "wu", "zhao", "zhou"] 先排數字，后排字符串，其實這的1,2排序看似正確，其實不是按照他們的大小排的，而是按照1和2的編碼順序排的。從下面這個例子可以看出。 
3、  純數字排序(但不提供比較函數)
var a = [11,5,1,13,20,-1,2];
var temp = a.sort();
console.log(a);  // [-1, 1, 11, 13, 2, 20, 5] 從這就可以看出默認排序是按照字符編碼順序排的，而不是大小 4、  純數字正確排序(需要提供排序函數) var a = [11,5,1,13,20,-1,2];
var temp = a.sort(sortNumber);
console.log(a);  // [-1, 1, 2, 5, 11, 13, 20] 這才是正確的從小到大排序
function sortNumber(a,b) 這是從小到大排序
{
    return a - b
}
function sortNumber(a,b) 這是從大到小排序
{
    return b – a
}
console.log(a);  // [20, 13, 11, 5, 2, 1, -1] 這是從大到小排序結果    

 

八.數組的格式化

　　數組也有尷尬的時候，有時候我們需要將數組轉化為字符串進行傳參，或者進行數據存儲等，那么這時候就需要將數組轉化成字符串。

　　join() 方法用於把數組中的所有元素放入一個字符串，元素通過指定的分隔符進行分隔。Join方法返回一個新的字符串副本，不會對原數組進行修改。

　　語法格式：arrayObject.join(separator)     返回一個字符串，該字符串是通過把 arrayObject 的每個元素轉換為字符串，然后將這些字符串連接起來，在兩個元素之間插入separator 字符而生成。

　　舉例說明：

var a = [1,2.5,"a","yes",12,23];
var temp = a.join();  //默認格式化，不提供連接字符
console.log(temp); //1,2.5,a,yes,12,23 console.log(a);　　// [1, 2.5, "a", "yes", 12, 23] var a = [1,2.5,"a","yes",12,23];
var temp = a.join(“|”);   //提供連接字符,但連接字符必須是字符(“x”)形式 console.log(temp); // 1|2.5|a|yes|12|23 console.log(a);　　// [1, 2.5, "a", "yes", 12, 23]

 

九.數組的建立

　　var arrayObj = new Array();　//創建一個數組 通過內置對象Array()進行創建

　　var arrayObj = new Array([size]);　//創建一個數組並指定長度，注意不是上限，是長度

　　var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//創建一個數組並初始化賦值

　　var arrayObj = [];    //也可以創建一個數組，並已完成初始化,只不過是個空的,沒有實際元素

　　注：需要說明的是，雖然第二種方法創建數組指定了長度，但實際上所有情況下數組都是變長的，也就是說即使指定了長度為5，仍然可以將元素存儲在規定長度以外的，注意：這時長度會隨之改變。

　　數組是JavaScript提供的一個內部對象，它是一個標准的集合，我們可以添加(push)、刪除(shift)里面元素，還可以通過for循環遍歷里面的元素。

附件：數組對象內置操作方法

Array 對象方法

方法	描述
concat()	連接兩個或更多的數組，並返回結果。
join()	把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
pop()	刪除並返回數組的最后一個元素
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	顛倒數組中元素的順序。
shift()	刪除並返回數組的第一個元素
slice()	從某個已有的數組返回選定的元素
sort()	對數組的元素進行排序
splice()	刪除元素，並向數組添加新元素。
toSource()	返回該對象的源代碼。
toString()	把數組轉換為字符串，並返回結果。
toLocaleString()	把數組轉換為本地數組，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值