慕課網web前端工程師2021視訊課程javascript學習路徑&筆記分享(3)
阿新 • • 發佈：2021-08-08
本節課主要是圍繞陣列展開學習，需要掌握的知識點如下：
-
陣列是什麼？應該如何定義？
陣列是有序的元素序列，屬於物件型別。有三種定義方式，最常見的是[]包圍。
-
如如何檢測陣列型別？
Array.isArray(陣列變數名)
-
陣列有哪些常用方法？
.push 在陣列末尾新增
.pop 在陣列的末尾刪除並記錄
.unshift 在陣列的頭部新增
.shift 在陣列的頭部刪除並記錄
.splice 在陣列中任意位置新增、刪除、替換項
.slice 擷取陣列內容(不會更改原陣列內容)
.join 使陣列轉為字串
.split 使字串轉為陣列
.indexOf 在陣列中查詢某個內容，返回值為陣列下角標，若找不到則返回-1
.includes 在陣列中查詢某個內容，返回值為boolean值，查詢到返回true，查不到返回flase
-
陣列的遍歷相關演算法、去重和隨機樣本、氣泡排序
-
基本型別值和引用型別值的區別
-
實現淺克隆
這三個知識點內容較多，在筆記下方
陣列的定義方法
陣列在瀏覽器列印時有時第一遍不會顯示出來，重新整理一下即可
// 陣列的定義方法1
var arr1 = [33, 44, 55, 66];
// 陣列的定義方法2
var arr2 = new Array(33, 44, 55, 66);
// 陣列的定義方法3
var arr3 = new Array(4);
檢測陣列型別的方法
var arr1 = [33, 44, 55, 66]; console.log(Array.isArray(arr1));
訪問陣列的項
var arr = ['A', 'B', 'C', 'D'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
// 訪問沒有的項，會出現undefine;
console.log(arr[4]);
console.log(arr[-1]);
// 可以直接輸出陣列的長度，也可以通過陣列的總長度-1，輸出陣列的最後一項，其他以此類推；
console.log(arr.length);
console.log(arr[arr.length - 1]);
通過直接訪問，更改陣列項
var arr = ['i', 'm', 'o', 'o', 'c'];
// 將陣列第2項o，改為大寫O
arr[2] = arr[2].toUpperCase();
// 增加陣列第六項為A，此時第5項為空，將設定為undefine
arr[6] = 'A';
console.log(arr);
陣列的遍歷方法
var arr = [34, 3245, 345, 234, 345, 67, 45, 345, 324];
// 使用for迴圈輸出陣列內的所有項
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
陣列的常用方法示例
陣列的頭尾操作
// 定義arr陣列
var arr = [22, 33, 44, 55];
// 在陣列末尾新增
arr.push(66);
console.log(arr);
// 在陣列的末尾刪除並記錄
var item = arr.pop();
console.log(arr);
console.log(item);
// 在陣列的頭部新增
arr.unshift(11);
arr.unshift(0);
console.log(arr);
// 在陣列的頭部刪除並記錄
var item = arr.shift();
console.log(arr);
console.log(item);
splice在陣列中任意位置新增、刪除、替換項
var arr = [0, 1, 2, 3, 4, 5];
// 新增操作：在陣列中第2個下標位前，新增44、55、66、77
arr.splice(2, 0, 44, 55, 66, 77);
console.log(arr);
var arr = [0, 1, 2, 3, 4, 5];
// 替換並新增操作：在陣列中第三個下標位前，從第三個下標位起的後2項(第三、第四)，將3, 4替換為66, 77, 88, 99
arr.splice(3, 2, 66, 77, 88, 99);
console.log(arr);
var arr = [0, 1, 2, 3, 4, 5];
// 刪除操作：刪除第二個下標位的內容
arr.splice(2, 1);
console.log(arr);
// 不論替換還是刪除，splice方法都會以陣列形式記錄下被替換或刪除的內容
var arr = [0, 1, 2, 3, 4, 5];
var items = arr.splice(3, 2, 66, 77, 88, 99);
console.log(arr);
console.log(items);
擷取陣列的slice方法
slice方法不會更改原陣列內容，需要將改變後的內容加入一個新的變數容器中儲存；
var arr = ['A', 'B', 'C', 'D', 'E', 'F'];
// 擷取從第二個下標開始，到第五個下標內的內容，不包括第五個
var ChildArr1 = arr.slice(2, 5);
console.log(ChildArr1);
// 擷取從第二個下標開始後的所有項
var ChildArr2 = arr.slice(2);
console.log(ChildArr2);
// 擷取從第二個下標開始，一直到倒數第一個下標的內容
var ChildArr3 = arr.slice(2, -1);
console.log(ChildArr3);
陣列的格式轉換方法
join()方法使陣列轉為字串，split()方法使字串轉為陣列，使用jpin&split方法時('')，空字元預設為，號
var arr = ['A', 'B', 'C', 'D', 'E', 'F'];
// 將陣列轉為字串，並去除, 連結
var joinArr = arr.join('');
console.log(joinArr);
// 將字串轉為陣列，並以, 分割
var splArr = joinArr.split('');
console.log(splArr);
// 用split方法將陣列轉為字串，再用reverse方法將陣列逆序排列，最後再用join方法將陣列轉為字串
// reverse方法只能用於陣列，不能用於字串
var revArr = JoinArr.split('').reverse().join('');
console.log(revArr);
陣列內容的查詢方法：indexOf和includes
// indexOf在陣列中查詢某個內容，能查詢到則返回該內容的下角標，查詢到多個則返回第一個的下角標，找不到返回-1
var indexOfArr = arr.indexOf('C');
console.log(indexOfArr);
// includes在陣列中查詢某個內容，能查詢到返回true，查不到返回flase
// includes查詢時不會考慮在第幾個下標位，也不會考慮查詢到多少個，有就是true，沒有就是flase
var includesArr = arr.includes('C');
console.log(includesArr);
陣列操作的經典案例
求陣列的總和和平均數
var arr = [3, 5, 3, 2, 1, 1];
// 累加器
var sum = 0;
// 遍歷陣列，每遍歷一個數字，就要把這個數字累加到累加器中
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
console.log(sum);
console.log(sum / arr.length);
求陣列的最大值和最小值
var arr = [3, 4, 88, 3, 1];
// 定義兩個變數，max表示當前尋找到的最大值，預設是arr[0]，min表示當前尋找到的最小值，預設是arr[0]
var max = arr[0];
var min = arr[0];
// 遍歷陣列，從下標為1的項開始遍歷
for (var i = 1; i < arr.length; i++) {
// 如果你遍歷的這項，比當前最大值大，那麼就讓當前最大值成為這個項
if (arr[i] > max) {
max = arr[i];
} else if (arr[i] < min) {
// 否則如果你遍歷的這項，比當前最小值小，那麼就讓當前最小值成為這個項
min = arr[i];
}
}
console.log(max, min);
陣列去重
var arr = [1, 1, 1, 2, 2, 3, 3, 3, 2, 1];
// 結果陣列
var result = [];
// 遍歷原陣列
for (var i = 0; i < arr.length; i++) {
// 判斷遍歷到的這項是否在結果陣列中，如果不在就推入
// includes方法用來判斷某項是否在陣列中
if (!result.includes(arr[i])) {
result.push(arr[i]);
}
}
console.log(result);
隨機樣本：隨機獲取陣列內3個不相同的數
var arr = [3, 6, 10, 5, 8, 9];
// 結果陣列
var result = [];
// 遍歷原陣列
for (var i = 0; i < 3; i++) {
// 隨機選擇一項的下標，陣列的下表0~arr.length - 1;
// 之前學習過一個random的公式，[a,b]區間的隨機數是parseInt(Math.random() * (b-a+1)) + a;
var n = parseInt(Math.random() * arr.length);
// 把這項推入結果陣列
result.push(arr[n]);
// 刪除這項，防止重複被隨機到
arr.splice(n, 1);
}
console.log(result);
氣泡排序
n個數字，共需要比較n-1遍，比較總次數為n(n-1)/2次
var arr = [6, 2, 9, 3, 8, 1, 45, 23, 45, 49];
// 一趟一趟比較，趟數序號就是i
for (var i = 1; i < arr.length; i++) {
// 內層迴圈負責兩兩比較
for (var j = arr.length - 1; j >= i; j--) {
// 判斷項的大小
if (arr[j] < arr[j - 1]) {
// 這一項比前一項還小了，那麼就要交換兩個變數的位置
// 定義一個臨時儲存項，方便陣列當前位與前一位互換位置
var temp = arr[j];
arr[j] = arr[j - 1];
arr[j - 1] = temp;
}
}
// console.log(arr);
}
console.log(arr);
基本型別和引用型別
不同之處：
基本型別被複制時，兩個變數a、b是完全獨立的，被複制變量a改變時不會更改已複製的新值b；
引用型別被複制時，被複制變量a改變時會同時更改已複製的新值b；
詳細解釋：
1）原始值：在將一個儲存著原始值的變數複製給另一個變數時，會將原始值的副本賦值給新變數，此後這兩個變數是完全獨立的，他們只是擁有相同的value而已。
2）引用值：在將一個儲存著物件記憶體地址的變數複製給另一個變數時，會把這個記憶體地址賦值給新變數，也就是說這兩個變數都指向了堆記憶體中的同一個物件，他們中任何一個作出的改變都會反映在另一個身上。
這裡要理解的一點就是，複製物件時並不會在堆記憶體中新生成一個一模一樣的物件，只是多了一個儲存指向這個物件指標的變數罷了。
二維陣列的遍歷方法
var matrix = [
[11, 33, 55],
[22, 33, 44],
[36, 49, 52],
[56, 10, 23]
];
// 迴圈輸出二維陣列中的每一個項
for (var i = 0; i < matrix.length; i++) {
for (var j = 0; j < matrix[i].length; j++) {
console.log(matrix[i][j]);
}
}
深克隆與淺克隆
本節課暫時只提到淺克隆，深克隆課程在後續課程中
var arr1 = [1, 2, 3, 4, [6, 9, 4]];
// 結果陣列
var result = [];
// 遍歷原陣列中的每一項，把遍歷到的項推入到結果陣列中
for (var i = 0; i < arr1.length; i++) {
result.push(arr1[i]);
}
console.log(result);
console.log(result == arr1); // 期望false，因為引用型別值進行比較的時候，==比較的是記憶體地址
console.log(result[4] == arr1[4]); // 藕斷絲連
更多關於慕課網前端工程師2021的詳細學習路徑&筆記目錄：
第5周 JS基礎語法與表示式
https://www.cnblogs.com/inzens/p/javascript.html
第6周 JS流程控制語句
https://www.cnblogs.com/inzens/p/15110463.html