JavaScript面向物件基礎 - 資料型別與陣列
阿新 • • 發佈：2020-08-05
★ JavaScript基本介紹
- 瀏覽器端JS由以下三個部分組成：
- ECMAScript：基礎語法(資料型別、運算子、函式。。。)
- BOM(瀏覽器物件模型)：window、location、history、navigator。。。
- DOM(文件物件模型)：div、p、span。。。
- CMAScript又名es，有以下重大版本：
- 舊時代：
- es1.0。。。es3.1
- 新時代：
- es5
- es6(es2015)
- es7(es2016)、es8(es2017)
- 舊時代：
★ 資料型別
+ 基本資料型別 —— 值型別： - Number - String - Boolean - null：未定義 - undefined：已定義，未賦值 + 複雜資料型別——引用型別：(物件) - Array - Function - Date - RegExp + 資料型別的檢測方法： - Object.prototype.toString.call() 全型別檢測 - instanceof Array[,Function,Date,RegExp,Object] 只能檢測物件型別 - typeof 只能檢測除null外的值型別 - 常用於(typeof value == "string") ? "'" + value + "'" : value; - Array.isArray() 僅只檢測Array型別 + 強制型別轉換 + 字串操作
★ 陣列
初識陣列
- 陣列的建立
- 使用Array物件建立陣列
- 不可以留有空儲存位
- 可以指定陣列長度
- 使用“[]”建立陣列
- 可以留有空儲存位
- 使用Array物件建立陣列
var arr = [];
var arr = new Array;
var arr = new Array();
var arr = new Array(3);
- 陣列的基本操作
- 獲取陣列長度
- arr.length
- 陣列的訪問與遍歷
- for迴圈
- 獲取陣列長度
// 陣列的訪問與遍歷 var arr = ['red','orange','yellow','green','cyan','blue','purple']; for(var i=0; i<arr.length; i++){ console.log(arr[i]); } for(var key in arr){ console.log(arr[key]); } for(var value of arr){ console.log(value); }
- 元素的新增與修改
- 元素的刪除
- delete
// 清空陣列
var arr = ['red','orange','yellow','green','cyan','blue','purple'];
for(var i=0; i<arr.length; i++){
delete arr[i];
console.log(arr[i]);
}
- 陣列的結構賦值
- [a,b,c] = [1,2,3];
// 解構賦值 var num = ['#ff0000','#ff7d00','#ffff00','#00ff00','#00ff7d','#0000ff','#7d00ff']; [red,orange,yellow,green,cyan,blue,purple] = num; console.log(red);
- 陣列的釋放
- 主動釋放一個物件的引用，null本身是原始型別的值。
- 伴隨主程式同時執行的後臺程式，記錄每個物件當前被引用的次數
- 被引用的次數==0時，垃圾回收器自動釋放物件記憶體空間
- 強烈建議：在使用完，較大物件後，主動賦值為null，總是好習慣
var arr = ['red','orange','yellow','green','cyan','blue','purple'];
console.log(arr);
arr = null;
console.log(arr);
// 任意數字比大小
function comparison(){
var max = min = arguments[0];
for(var i=0; i<arguments.length; i++){
arguments[i] > max ? max = arguments[i] : max;
arguments[i] < min ? min = arguments[i] : min;
}
return "max : "+ max + " min : " + min;
}
console.log(comparison(32,56,42,12));
雜湊(hash)陣列
- 定義
- 雜湊陣列：關聯陣列，可自定義元素下標名稱的陣列
- 關聯陣列的length屬性失效
- 關聯陣列中的key不能重複
- 關聯(hash)陣列查詢極快！和元素個數無關！
- 索引陣列：自動從0開始分配連續不重複的序號下標
- 雜湊陣列：關聯陣列，可自定義元素下標名稱的陣列
- 建立
- 先建立普通空陣列，再追加自定義下標的元素
var arr = [];
arr["red"] = "#ff0000";
arr["orange"] = "#ff7d00";
arr["yellow"] = "#ffff00";
- 建立陣列同時，初始化元素內容
var arr = {
"red" : "#ff0000",
"orange" : "#ff7d00",
"yellow" : "#ffff00"
}
- 遍歷雜湊陣列
for(var key in arr){
console.log(arr[key]);
}
- 雜湊陣列的淺拷貝
var source = ['red','orange','yellow','green','cyan','blue','purple'];
var target = [];
for(var key in source){
target[key] = source[key];
}
二維陣列
- 定義
- 陣列中的某個元素，又指向另一個子陣列物件
- 儲存橫行豎列的二維資料
- 儲存上下級包含關係的資料
- 陣列中的某個元素，又指向另一個子陣列物件
- 建立
- 使用Array物件建立陣列
- 使用"[]"建立陣列
var arr = new Array(new Array, new Array);
var arr = [[], []];
- 遍歷
- 外層迴圈遍歷行，內層迴圈遍歷列
var arr = [];
for(var i=0; i<3; ++i>){
arr[i] = [];
arr[i][0] = i;
}
- 轉置
- 將二維陣列橫向元素儲存為縱向元素
var arr = [['a','b','c'], ['d','e','f'], ['g','h','i'], ['j','k','l']];
var res = [];
for(var i=0; i<arr[0].length; ++i){
res[i] = [];
for(var j=0; j<arr.length; ++j){
res[i][j] = arr[j][i];
}
}
console.log(res);
陣列排序
- 冒泡演算法
- 原理：在氣泡排序的過程中，按照要求從小到大排序或從大到小排序，不斷比較陣列中相鄰兩個元素的值，較大或較小的元素前移。氣泡排序比較的輪數是陣列長度減1，每輪比較的對數等於陣列的長度減當前的輪數。
function bubbleSort(){
var arr = [];
for(var key in arguments){
arr[key] = arguments[key];
}
for(var i=1; i<arr.length; ++i){
for(var j=0; j<arr.length-i; ++j){
if(arr[j] > arr[j+1]){
[arr[j], arr[j+1]] = [arr[j+1], arr[j]];
}
}
}
return arr;
}
console.log(bubbleSort(52, 61, 91, 81, 72, 43, 10, 28, 35));
- 插入演算法
- 原理：插入排序是氣泡排序的優化，是一種直觀的簡單排序演算法。其原理是通過構建有序陣列元素的儲存，對未排序的陣列元素在已排序的陣列中從最後一個元素向第一個元素遍歷，找到相應位置並插入，其中，待排序陣列的第1個元素會被看作是一個有序的陣列，從第2個至最後一個元素會被看作是一個無序陣列。插入排序比較的次數與無序陣列的長度相等，每次無序陣列元素與有序陣列中的所有元素進行比較，比較後找到對應位置插入，最後即可得到一個有序陣列。
function insertSort(){
var arr = [];
for(var key in arguments){
arr[key] = arguments[key];
}
for(var i=1; i<arr.length; ++i){
for(var j=i; j>0; --j){
if(arr[j-1] > arr[j]){
[arr[j-1], arr[j]] = [arr[j], arr[j-1]];
}
}
}
return arr;
}
console.log(insertSort(52, 61, 91, 81, 72, 43, 10, 28, 35));
- 希爾演算法
- 原理：希爾排序是插入排序的改進型。對於一個任意一個無序的序列，我們把這個序列從邏輯上分為有序區和無序區，並預設在開始排序前，第一個元素為有序區，其餘為無序區。在我們對其逐漸有序化的時候，依次從無序區中取出其第一個元素並插入有序區。有序區會增加，無序區會減少，同時無序區第一個元素前的元素必然在有序區。
- 增量（gap）：一個序列可以按增量（gap）在邏輯上劃分為gap個序列（關於的gap的取值，第一次取序列長度一半，之後再取用gap前要除2）。如 [ 5, 6, 9, 8, 7, 4, 1, 2, 3 ]，gap = 9/2 = 4 ，即在邏輯上分成4組小序列，同一小序列內的、邏輯上相鄰的元素，在序列中的小標差為gap，比如小序列[ 5, 7, 3 ],它們在原序列中的小標為0、4、8，相差為gap。
- 排序流程：
- [1] 在邏輯上按gap將序列劃分為gap個小序列。（第一次時取增量（gap）為序列長度的一半）；
- [2] 一個指標從序列的無序區（由各個小序列的無序區組成）由左向右遍歷，遍歷到的元素，將其插入對應小序列的有序區”；
// 希爾演算法，待考證
function shellSort(){
var arr = [];
for(var key in arguments){
arr[key] = arguments[key];
}
//控制增量（gap），增量將不斷/2直到小於1。（序列會在邏輯上按gap劃分為gap個小序列）
for(var gap=arr.length/2; gap>0; gap=gap/2){
//遍歷無序區（最開始>=gap的下標都屬於無序區）
//變數unorder始終指向當前序列的無序區的第一個元素的下標
for(var unorder=gap; unorder<arr.length; unorder++){
/*
*order是小序列有序區內的下標指標
*unorder - gap 是當前小序列有序區的最後一個
*把當前無序區第一個元素插入對應小序列有序區
*/
for(var order=unorder-gap; order>=0; order=order-gap){
if(arr[order] > arr[order+gap]){
[arr[order], arr[order+gap]] = [arr[order+gap], arr[order]];
}
}
}
}
return arr;
}
console.log(shellSort(5, 6, 9, 8, 7, 4, 1, 2, 3));
陣列API
- 棧和佇列方法
- push() 將一個或多個元素新增到陣列的末尾，並返回陣列的新長度
- unshift() 將一個或多個元素新增到陣列的開頭，並返回陣列的新長度
- pop() 從陣列的末尾移出並返回一個移出的陣列元素，若是空陣列則返回undefined
- shift() 從陣列的開頭移出並返回一個移出的陣列元素，若是空陣列則返回undefined
var arr = ['red','orange','yellow','green','cyan','blue','purple'];
var pur = arr.pop();
console.log(pur);
console.log(arr);
var red = arr.shift();
console.log(red);
console.log(arr);
var purlen = arr.push('purple');
console.log(purlen);
console.log(arr);
var redlen = arr.unshift('red');
console.log(redlen);
console.log(arr);
- 檢索方法
- includes() 用於確定陣列中是否含有某個元素，含有返回true，否則返回false
- Array.isArray() 用於確定傳遞的值是否是一個Array，是返回true，不是返回false
- indexOf() 返回在陣列中可以找到給定值的第1個索引，如果不存在，則返回-1
- lastIndexOf() 返回指定元素在陣列中的最後一個索引，如果不存在則返回-1
var arr = ['red','orange','yellow','green','cyan','blue','purple','orange'];
var cyan = arr.includes('cyan', 5);
console.log(cyan);
var is = Array.isArray(arr);
console.log(is);
var orange = arr.indexOf('orange');
var pink = arr.indexOf('pink');
var orangelast = arr.lastIndexOf('orange');
var pinklast = arr.lastIndexOf('pink');
console.log(orange);
console.log(pink);
console.log(orangelast);
console.log(pinklast);
// 新增元素
var arr = ['red','orange','yellow','green','orange','cyan','blue','purple','orange'];
function addArrayElement(array,add){
if(array.indexOf(add) === -1){
array.push(add);
return array;
}else{
return '目標已存在';
}
}
console.log(addArrayElement(arr,'pink'));
// 檢索元素
function searchArrayElement(array,search){
var res = [];
var i = array.lastIndexOf(search);
if(i === -1){
return "檢索目標不存在";
}else{
while(i !== -1 && i>0){
res.push(i);
i = array.lastIndexOf(search,i-1);
}
}
return res;
}
console.log(searchArrayElement(arr,'orange'));
- 陣列轉字串
- join() 將陣列的所有元素連線到一個字串中
- toString() 返回一個字串，表示指定的陣列及其元素
console.log(['r','e','d'].join());
console.log(['r','e','d'].join(''));
console.log([['r','e','d'], ['c','y','a','n']].join());
console.log([['r','e','d'], ['c','y','a','n']].join('-'));
console.log(['r','e','d'].toString());
console.log([['r','e','d'], ['c','y','a','n']].toString());