JS陣列物件

阿新 • • 發佈：2020-12-30

第1關：陣列的建立、讀寫和長度
任務描述
本關任務：掌握建立陣列的方法，獲取陣列的元素和長度。
相關知識
陣列的出現就是為了批量處理資料。
陣列的建立
建立陣列有兩種方法，一是使用陣列字面量，簡單來說就是在[]之中列出陣列的所有元素：
var numberArray = [1,2,3,4,5];//數字陣列
var stringArray = [“java”,“script”,“edu”,“coder”];//字串陣列
var mixArray = [1,2,“java”,true,6.6];//混合陣列
如上，各元素之間用,隔開。JavaScript中陣列的元素可以是不同的資料型別，如上面的第三個陣列。

建立陣列的第二種方法是新建一個Array物件的例項，如：
var myArray = new Array();//建立一個初始為空的陣列
var lengthMixArray = new Array(6);//建立一個長為6的陣列
這種情況下可以設定陣列的長度（即陣列中元素的個數），也可以不設定。
陣列元素的讀取和寫入
陣列元素的讀取和寫入在形式上相似，都是用賦值符號連線的兩個表示式。
讀取時，存放讀入值的變數在左邊，陣列元素在右邊：
var readArray = [1,3,“js”,true,2.22];
var read = readArray[0];//讀取第一個元素到變數read中
寫入時，陣列元素在左邊，待寫值在右邊：

var writeArray = [1,3,“js”,true,2.22];
writeArray[0] = 2;//在第一個元素的位置寫入2
console.log(writeArray[0]);//原來的1已經被覆蓋，輸出2
陣列長度
陣列長度指陣列中元素的個數，等於最大索引值加1，陣列的length屬性即陣列的長度。
var arrayLength = [1,“js”,true];
console.log(arrayLength.length);//輸出3
陣列的長度也可以寫入，當寫入的值小於陣列的實際長度時，陣列會被刪除一部分。大於實際長度時，陣列會在尾部新增一些空的區域。
arrayLength.length = 2;

console.log(arrayLength);//輸出[1,“js”]
程式設計要求
本關的程式設計任務是補全右側程式碼片段中begin至end中間的程式碼，具體要求如下：
已知兩個陣列array1和array2，引數a是一個整數，先判斷a的值與陣列array1的長度值相等，如果相等，返回陣列array1的最後一個元素，反之，則返回陣列array2的最後一個元素；
具體請參見後續測試樣例。
測試說明
測試過程：
平臺將讀取使用者補全後的ArrayCreate.js；
呼叫其中的mainJs()方法，並輸入若干組測試資料作為引數；
接著根據測試的輸出判斷程式是否正確。
以下是測試樣例：
測試輸入：
7
預期輸出：
hello
海到無邊天作岸，山登絕頂我為峰。 —— 林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考程式碼：

var array1 = [1,2,3,"js",4,true,"hello"];
var array2 = [true,true,"java",2.1];
function mainJs(a) {
	//請在此處編寫程式碼
    /*********begin*********/
if(a==array1.length){
return array1[array1.length-1];
}
else{
return array2[array2.length-1];
}
    /*********end*********/
}

第2關：陣列元素的增減
任務描述
本關任務：掌握陣列元素增減的方法。
相關知識
陣列元素的增刪是JavaScript的一個特點，因為其他很多程式語言的陣列是不允許增加或者刪除元素的。
陣列元素的增加
在JavaScript中，為陣列增加元素可以在陣列頭部（索引最小處）或者尾部進行，可以使用陣列的方法或者直接使用運算子。
在尾部新增元素
最直觀的方法是直接給當前尾部元素的後一個位置賦值。
var numberArray = [12,23,34,45];
numberArray[numberArray.length] = 56;
console.log(numberArray);//輸出[12,23,34,45,56]
第二種方法是使用push()函式，往陣列的末尾新增一個或多個元素，引數是要新增的元素，返回陣列長度。
//利用push()方法在陣列尾部新增元素
var numberArray = [12,23,34,45];
var newLength = numberArray.push(56);
console.log(newLength);//輸出5
console.log(numberArray);//輸出[12,23,34,45,56]
在頭部新增元素
unshift()方法在陣列的頭部新增元素，並返回陣列新的長度，其餘元素自動向索引大的方向移動。
var sArray = [“ja”,“va”,“script”];
var newLength = sArray.unshift(“he”,“llo”);
console.log(newLength)//輸出5
console.log(sArray);//輸出[“he”,“llo”,“ja”,“va”,“script”];
陣列元素的刪除
刪除也能在陣列頭部（索引值小）或者尾部進行。
在尾部刪除元素
上一關介紹過一種方法：直接修改陣列長度為更小的值。
var array = [1,2,true,“hello”];
array.length = 3;//索引最大的元素被刪除
console.log(array);//輸出[1,2,true]
第二種方法是使用delete運算子。delete運算子後接要刪除的元素，但是刪除後，會有一個空佔位符，所以資料的長度保持不變。如：
var dArray = [11,22,33,44,55];
delete dArray[4];//刪除索引最大的元素
console.log(dArray);//輸出[11,22,33,44]
console.log(dArray.length); //長度為5
第三種方法是使用pop()，一次刪除一個，並返回被刪除的元素。
//利用pop()方法在陣列尾部刪除元素
var numberArray = [3,4,5,6,7];
var deletedNumber = numberArray.pop();
console.log(deletedNumber);//輸出被刪除的元素7
console.log(numberArray);//刪除後的陣列為[3,4,5,6]
在頭部刪除元素
有unshift()，自然有shift()，shift()的作用是刪除陣列頭部一個元素並返回該元素，然後所有元素往索引值小的方向移動一位。
初學者很容易混淆這兩個方法，建議記住shift單詞的意思是：刪除，去掉。
var dArray = [11,22,33,44,55];
console.log(dArray.shift());//輸出11，11被從陣列中刪除
console.log(dArray);//輸出[22,33,44,55]
程式設計要求
本關的程式設計任務是補全右側程式碼片段中begin至end中間的程式碼，具體要求如下：
將陣列testArray的最後a個元素移動到最前面，這a個元素之間的相對位置不變，其餘元素之間的相對位置不變；
比如將陣列[1,2,3,4,5]最後2個元素移動到最前面，陣列變為[4,5,1,2,3]；
返回移動結束後陣列在索引b處的元素；
具體請參見後續測試樣例。
測試說明
測試過程：
平臺將讀取使用者補全後的ArrayAddDelete.js；
呼叫其中的mainJs()方法，並輸入若干組測試資料作為引數；
接著根據測試的輸出判斷程式是否正確。
以下是測試樣例：
測試輸入：
2,0
預期輸出：
c#
海到無邊天作岸，山登絕頂我為峰。 —— 林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考程式碼：

var testArray = [12,"java","js","c","c++",24,36,"python","c#","css"];
function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
    //請在此處編寫程式碼
    /*********begin*********/
for(var i=0;i<a;i++){
testArray.unshift(testArray.pop());
}
return testArray[b];
    /*********end*********/
}

第3關：陣列的遍歷和多維陣列
任務描述
本關任務：將一個一維陣列轉換為二維陣列，行優先。
相關知識
陣列的遍歷
陣列的遍歷指按順序訪問你陣列的每一個元素。有兩種方法：
使用for迴圈
//依次在瀏覽器的控制檯輸出one，two，three，four
var stringArray = [“one”,“two”,“three”,“four”];
for(var i=0,sLength=stringArray.length;i<sLength;i++) {
console.log(stringArray[i]);
}
使用forEach()方法 forEach()方法的引數是一個無名字的函式，函式有三個引數，第一個引數是當前的陣列元素，第二個引數是當前的索引，第三個引數是陣列物件的索引。與for迴圈的區別是無法用break中斷迴圈。
var numArr = [10,11,12,13,14];
numArr.forEach(function(mem,i,arr) {
mem *= 10;
arr[i] = mem;
});
console.log(numArr);//輸出[100,110,120,130,140]
多維陣列的實現
多維陣列實際上就是陣列的陣列，指陣列的每一個元素也是一個數組，這裡僅討論二維陣列。
JavaScript中二維陣列的列的長度不唯一，第一列可以有4個元素，第二列可以有5個元素，等等。
二維陣列的建立建立已知的二維陣列：
var multiArr = [[1,2,3,4],[5,6,7],[8,9]];
建立僅知道長度的二維陣列
//建立一個4行6列的二維陣列
var muArr = new Array(4);
for(var i = 0;i <4;i++) {
muArr[i] = new Array(6);
}
二維陣列的讀寫二維陣列的讀寫用陣列名[][]的方式，第一個中括號內為行數，從0計數，第二個中括號內為列數，也從0計數。以上面的陣列multiArr為例：
var multiArr = [[1,2,3,4],[5,6,7],[8,9]];
console.log(multiArr[1][1]);//讀元素，輸出6
multiArr[0][0] = 0;//寫元素
程式設計要求
本關的程式設計任務是補全右側程式碼片段中begin至end中間的程式碼，具體要求如下：
將一維陣列arr轉為a行b列的二維陣列，行優先；
返回該二維陣列；
具體請參見後續測試樣例。
測試說明
測試過程：
平臺將讀取使用者補全後的MultiArray.js；
呼叫其中的mainJs()方法，並輸入若干組測試資料作為引數；
接著根據測試的輸出判斷程式是否正確。
以下是測試樣例：
測試輸入：
6,4
預期輸出：
[[1, 2, 3, 4], [5, 6, 7, 8], [9, 0, 10, 11], [12, 13, 14, 15], [16, 17, 18, 19], [20, 21, 23, 22]]
海到無邊天作岸，山登絕頂我為峰。 —— 林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考程式碼：

var arr = [1,2,3,4,5,6,7,8,9,0,10,11,12,13,14,15,16,17,18,19,20,21,23,22];
function mainJs(a,b) {
    a = parseInt(a);
    b = parseInt(b);
    //請在此處編寫程式碼
    /*********begin*********/
var arr1=new Array(a);
for(var i=0;i<a;i++){
arr1[i]=new Array(b);
}
var count=0;
for(var i=0;i<a;i++){
for(var j=0;j<b;j++){
arr1[i][j]=arr[count++];
}
}
return arr1;
    /*********end*********/
}

第4關：陣列的常用方法
任務描述
本關任務：掌握陣列的常用方法。
相關知識
本關將介紹一些陣列常用的方法，你可以通過呼叫這些方法生成複雜的程式碼。
查詢元素的位置
根據值查詢元素的位置，有兩個方法：indexOf()和lastIndexOf()，前者從索引小處往大搜索，後者相反。都返回第一次遇到該元素時的索引。
兩者都有兩個引數，第一個引數為要查詢的元素，第二個引數可選，為搜尋的起點索引。如：
var search = [“a”,“b”,“a”,“b”,“c”,“d”,“a”,“a”,“b”,“a”];
console.log(search.indexOf(“a”));//輸出0
console.log(search.lastIndexOf(“a”));//輸出9
console.log(search.indexOf(“a”,2));//輸出2，從索引為2處開始搜尋
第二個引數可以是負數，-1表示倒數第一個元素，-2表示倒數第二個元素，依次類推。如：
var search = [“a”,“b”,“a”,“b”];
console.log(search.indexOf(“a”，-3));//輸出2
console.log(search.lastIndexOf(“a”，-3));//輸出0
陣列的合併
concat()實現數組合並，其形式是陣列a.concat(陣列b)，合併之後返回新陣列，新陣列為陣列a後面連線陣列b，但是陣列a和b不變。
var a = [1,2,3];
var b = [4,5,6];
var c = a.concat(b);//合併後返回新陣列
console.log©;//輸出[1,2,3,4,5,6]
陣列倒置
reverse()實現陣列倒置，無引數，返回倒置後的陣列，同時呼叫該方法的陣列也會被倒置。稱為就地逆置。
var a = [1,2,3,4];
var b = a.reverse();
console.log(a);//輸出[4,3,2,1]
console.log(b);//輸出[4,3,2,1]
元素合併
join()將陣列的所有元素連線起來組成字串，引數為元素之間的分隔符，預設逗號。
var sArray = [“June”,“July”,“August”];
console.log(sArray.join());//輸出June,July,August
console.log(sArray.join("+"));//輸出June+July+August
元素排序
sort()實現資料元素排序，不帶該引數表示元素按照ASCII表從小到大排序（參考JavaScript學習手冊三）。如：
var stringArray = [“a”,“ab”,“b”,“aa”];
stringArray.sort();
console.log(stringArray);//輸出[“a”,“aa”,“ab”,“b”]
需要注意的是數字的排序，例子如下：
var arr = [1,2,10,5,12];
arr.sort();
console.log(arr);//輸出[1,10,12,2,5];
帶引數的格式如下：
arr.sort(function(a,b){
return a-b; //升序排列
})
或者：
arr.sort(function(a,b){
return b-a; //降序排列
})
說明：
arr是要排序的陣列；
a，b是兩個引數，返回a-b，升序排列，返回b-a，降序排列。
對於數字的排序，sort()帶引數和不帶引數是不一樣的，例子如下：
var arr = [1,2,10,5,12];
arr.sort();
console.log(arr);//輸出[1,10,12,2,5]
arr.sort(function(a,b){
return a-b;
});
console.log(arr);//輸出[1,2,5,10,12]
提取子陣列
slice()返回切割出的子陣列，不修改原來的陣列。
它有兩個整數引數a和b，a表示切割的起點，該點屬於子陣列；b可選，表示切割的終點，該點不屬於子陣列。
a和b都可以為負數，如-1表示倒數第一個位置，依次類推。
var arr = [“a”,“b”,“c”,“d”,“e”];
console.log(arr.slice(0,3));//[“a”,“b”,“c”]
console.log(arr.slice(0,-2));//[“a”,“b”,“c”]
console.log(arr.slice(4));//[“e”]
console.log(arr.slice(-4));//[“b”,“c”,“d”,“e”]
程式設計要求
本關的程式設計任務是補全右側程式碼片段中begin至end中間的程式碼，具體要求如下：
獲取字串a在陣列myArray的所有位置並組成一個位置陣列；
獲取字串b在陣列myArray的所有位置並組成一個位置陣列；
合併這兩個陣列然後返回合併後的陣列。
測試說明
測試過程：
平臺將讀取使用者補全後的ArrayMethod.js；
呼叫其中的mainJs()方法，並輸入若干組測試資料作為引數；
接著根據測試的輸出判斷程式是否正確。
以下是測試樣例：
測試輸入：
a,a,c,b,b
預期輸出：
[0,1,3,4]
海到無邊天作岸，山登絕頂我為峰。 ——林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考程式碼：

function mainJs(myArray) {
    myArray = myArray.split(",");
    //請在此處編寫程式碼
    /*********begin*********/
var a=new Array();
	var i=0,j=0;
	while(myArray.indexOf("a",i)!=-1)
	{
		a[j]=myArray.indexOf("a",i);
		i=a[j]+1;
		j++;
	}
	var b=new Array();
	var i1=0,j1=0;
	while(myArray.indexOf("b",i1)!=-1)
	{
		b[j1]=myArray.indexOf("b",i1);
		i1=b[j1]+1;
		j1++;
	}
	var d=a.concat(b);
	return d;


    /*********end*********/
}

第5關：陣列的應用——內排序
任務描述
本關任務：掌握氣泡排序和選擇排序。
相關知識
所謂排序是指將一組資料按照從小到大（或從大到小）的順序重新排列，排序是面試常考的問題之一。
排序一般分為兩個步驟：比較和移動。比較指判斷兩個資料之間的大小關係，移動指根據大小關係把資料移動到合適的位置上。
待排序的資料大多是放置在陣列中，一是因為陣列中的資料有相對的順序，二是遍歷陣列操作起來比較簡單。
下面介紹JavaScript中兩種常見的排序方式：氣泡排序和選擇排序。
氣泡排序
一趟氣泡排序
先介紹一趟氣泡排序的過程。
以升序為例，從第一個元素開始，將第一個元素與第二個元素比較，如果第一個元素大於第二個元素，交換這兩者。
如下圖所示，9比5大，交換兩者的位置後，9就到後面去了。
在這裡插入圖片描述
然後第二個元素與第三個元素比較，將大的移動到後面；第三個元素與第四個元素比較……，這樣一直進行下去，直到倒數第二個元素和最後一個元素進行比較，稱為一趟氣泡排序，結束後最大的元素已經移到了索引最大處。下面的圖展示了每一次比較並交換後的陣列：
在這裡插入圖片描述
可以看到，一趟氣泡排序結束後，最大的元素9移到了索引最大處。
氣泡排序全過程
接下來對除了最後一個元素的陣列進行第二趟氣泡排序，結果是第二大的元素到了索引第二大的地方。這樣一直進行下去，直到整個陣列有序或者某一趟排序的時候不存在元素的交換。

在這裡插入圖片描述
第四趟冒泡過程中，未發生元素的交換，結束。
因為排序的原理是不斷的把大的資料往上浮動，故而命名為氣泡排序。
氣泡排序
var arr = [9，5，8，0，2，6];
var aLength = arr.length;
var temp;
var flag = 0;//元素交換的標誌位
for(var i = 1;i < aLength;i++) {//共進行n-1次冒泡
flag = 0;
for(var j = 0;j < aLength-i;j++) {//一次冒泡
if(arr[j]>arr[j+1]) {//交換元素
temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
flag = 1;
}
}
if(flag == 0) break;//本次冒泡沒有元素交換
}
console.log(arr);
氣泡排序關鍵在於這兩個迴圈的控制，外層迴圈控制冒泡的次數，一般是n-1次，n表示陣列長度。
內迴圈j的初值為0，因為不論是第幾趟冒泡，都是從arr[0]開始遍歷陣列，j的上限設定為arr.length-i，因為隨著冒泡的進行，越往後需要比較的陣列的索引上限越小。
選擇排序
一趟選擇排序
原理：遍歷陣列，記錄下最大元素的索引值，將最大的元素與陣列最後一個元素交換，這樣最大的元素到了索引值最大的地方，稱為一趟選擇排序。與冒泡不同的是，只會發生一次交換。
在這裡插入圖片描述
可以看到9移到了索引最大處。
選擇排序全過程
第二趟選擇排序是在除了最後一個元素的陣列中選擇最大的元素，將它與索引值第二大的元素交換，結束後第二大的元素也到了最終的位置上。這樣一直進行下去，一共n-1趟選擇排序。
在這裡插入圖片描述
選擇排序
var arr = [6,12,3,34,1,56,77,0,2,43];
var aLength = arr.length;
var temp;
var max = arr[0];
var maxIndex = 0;
for(var i = 0;i < aLength-1;i++) {//共進行n-1次選擇
for(var j = 1;j < aLength-i;j++) {//一次選擇
if(arr[j] > max) {
max = arr[j];
maxIndex = j;
}
}
//將本次選出的最大元素移動到最終的位置上
temp = arr[aLength-i-1];
arr[aLength-i-1] = arr[maxIndex];
arr[maxIndex] = temp;
var max = arr[0];
var maxIndex = 0;
}
console.log(arr);
這裡也有兩個大迴圈，第一個迴圈控制總的排序趟數，第二個迴圈求本次選擇出的最大元素的索引值，第二個迴圈結束後將本次的最大值與最終位置上的元素交換。
程式設計要求
本關的程式設計任務是補全右側程式碼片段中begin至end中間的程式碼，具體要求如下：
函式mainJs(a)中的變數arr是一個數組，你需要對該陣列進行選擇排序；
返回選擇排序進行過程中，在每一趟交換前，待排序子陣列的最大元素的位置組成的陣列；
比如對於上面相關知識中的陣列[9,5,8,0,2,6]，第一次交換前，最大的元素9的索引是0，第二次交換前，最大元素8的索引是2，第三次交換前最大元素6的索引是0，第四次交換前最大元素5的索引是1，第五次交換前最大元素2的索引是1，第六次交換前最大元素0的索引是0。索引需要返回的陣列是[0,2,0,1,1,0]；
具體請參見後續測試樣例。
測試說明
測試過程：
平臺將讀取使用者補全後的ArraySort.js；
呼叫其中的mainJs()方法，並輸入若干組測試資料作為引數；
接著根據測試的輸出判斷程式是否正確。
以下是測試樣例：
測試輸入：
9,5,8,0,2,6
預期輸出：
[0,2,0,1,1,0]
海到無邊天作岸，山登絕頂我為峰。 —— 林則徐
如果你覺得這一關的內容對你有幫助，請你在下面點贊。
參考程式碼：

function mainJs(a) {
    var arr = a.split(",");
    for(var i = 0;i < arr.length;i++) {
        arr[i] = parseInt(arr[i]);
    }
    //請在此處編寫程式碼
    /*********begin*********/
var mi=new Array(); 
	var aLength = arr.length;
	var temp;
	var max = arr[0];
	var maxIndex = 0;
	for(var i = 0;i < aLength-1;i++) {//共進行n-1次選擇
		for(var j = 1;j < aLength-i;j++) {//一次選擇
			if(arr[j] > max) {
				max = arr[j];
				maxIndex = j;
			}
		}
		mi[i]=maxIndex;
		//將本次選出的最大元素移動到最終的位置上
		temp = arr[aLength-i-1];
		arr[aLength-i-1] = arr[maxIndex];
		arr[maxIndex] = temp;
		var max = arr[0];
		var maxIndex = 0;
	}
	return mi;
    /*********end*********/
}

JS陣列物件

Js陣列物件的屬性值升序排序，並指定陣列中的某個物件移動到陣列的最前面

js陣列物件去重

JS 陣列物件

js陣列物件過濾——filter,find,some,every

js陣列物件過濾:filter,find,some,every

js三元表示式，js陣列物件去重

JS陣列物件

js陣列物件相同項合併處理

js 陣列物件操作 (filter，finde、findIndex、map)

js 陣列物件樹形遞迴過濾

基於JS判斷物件是否是陣列

JS localStorage儲存物件，sessionStorage儲存陣列物件操作示例

JS深入學習之陣列物件排序操作示例

JS 陣列和物件的深拷貝操作示例

JS陣列及物件遍歷方法程式碼彙總

js 根據條件刪除陣列中某個物件&js filter過濾陣列物件的使用

JS sort方法基於陣列物件屬性值排序

js 陣列迭代方法filter結合字串方法indexOf 過濾物件屬性包含某欄位的那個物件

js中陣列物件去重的方法

JS筆記006 - 第06章陣列物件

JS陣列物件

相關推薦