這篇文章主要介紹了JavaScript陣列特性與實踐應用,較為深入而詳細的分析了javascript陣列的功能、屬性、使用方法及操作注意事項,寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。
JavaScript 提供了一種類似陣列特性的物件，它把陣列的下標變為字串，作為物件的屬性。雖然它比一個真正的陣列來的慢，但是使用起來很方便。
1 陣列字面量
陣列字面量是在一對方括號中包圍零個或多個用逗號分隔的值的表示式：
var empty = [];
var numbers = [
'zero', 'one', 'two', 'three'
];
console.log(empty[1]);//undefined
console.log(numbers[1]);//one
console.log(empty.length);//0
console.log(numbers.length);//4
複製程式碼陣列物件繼承自 Array.prototype，所以 numbers 繼承了大量有用的方法。 JavaScript 允許陣列包含任意混合型別的值：
var misc = [
'string', 11.3, false, true, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity
];
console.log(misc.length);//10
複製程式碼2 長度
陣列有一個 length 屬性，但它是沒有上界的。如果用大等於當前 length 的數字作為下標來儲存元素，那麼 length 屬性值會被增大以便容納新的元素，而不會發生陣列越界現象哦O(∩_∩)O~ length 屬性的值很詭異，它是陣列最大整數屬性名加 1，即它不一定等於陣列的元素個數：
var myArray = [];
console.log(myArray.length);//0
//myArray 只包含一個屬性，但 length 的值等於這個陣列最大整數的屬性名加 1
myArray[100000] = true;
console.log(myArray.length);//100001
//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
複製程式碼[] 後置運算子會把它包含的表示式轉換為字串，如果表示式有 toString() 方法，那麼就會呼叫它。這個字串被當做屬性名，如果這個字串是一個大等於當前 length 值而且小於 4294967295 的正整數，那麼這個陣列的 length 就會被重置為新的下標加 1。 可以直接設定 length 的值。設定更大的 length 值不會為陣列分配更多的空間；而把 length 設小則會導致所有下標大等於新的 length 的屬性被刪除：
//刪除元素
numbers.length = 3;
console.log(numbers);//[ "zero", "one", "two" ]
複製程式碼把下標指定為陣列的當前 length，就可以把一個新元素附加到陣列的尾部：
//新增元素
numbers[numbers.length] = 'four';
console.log(numbers);//[ "zero", "one", "two", "four" ]
複製程式碼使用 push() 可以更方便地實現同樣的功能：
//新增元素（push）
numbers.push('good');
console.log(numbers);//[ "zero", "one", "two", "four", "good" ]
//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
複製程式碼3 刪除
JavaScript 陣列就是物件，所以可以用 delete 移除元素：
delete numbers[2];
console.log(numbers);//[ "zero", "one", <1 個空的儲存位置>, "four", "good" ]
複製程式碼可惜的是，這會在陣列中留下一個空洞！而我們希望的是：刪除後，被刪除元素的後續元素會自動地往前移動。 JavaScript 陣列提供了 splice() 方法，它接受下列引數： ①. 陣列的索引。 ②. 要刪除的元素個數。 ③. 其他引數（多個）- 把這些引數依次插入到索引位置。
//第一個引數是索引號，第二個引數是要刪除的元素個數
numbers.splice(2, 1);
console.log(numbers);// [ "zero", "one", "four", "good" ]
複製程式碼4 列舉
JavaScript 陣列是物件，所以可以用 for in 語句來遍歷陣列的所有屬性。可是 for in 語句無法保證屬性的順序，而且可能從原型鏈中得到意外的屬性。 可以使用 for 來避免上述的問題：
var i,
myArray = numbers;
for (i = 0; i < myArray.length; i += 1) {
console.log(myArray[i]);
}
複製程式碼5 陣列與物件
如何在這兩者進行選擇？當屬性名是小而連續的整數時，使用陣列；否則使用物件。 JavaScript 的 typeof 會認為陣列是 object，這沒有意義！ 我們可以定義一個函式來檢測陣列：
var is_array = function (value) {
return value && typeof value === 'object' &&
value.constructor === Array;
};//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
複製程式碼這個方法在不同視窗(window)或框架(frame) 裡構造的陣列會失敗。所以請用下面的這個更好的方法：
var is_array = function (value) {
return Object.prototype.toString.apply(value) === '[object Array]';
};
console.log(is_array(myArray));//true
複製程式碼6 方法
JavaScript 提供了一些對於陣列可用的方法，它們被儲存在 Array.prototype 中。我們可以為陣列增加一個對陣列進行計算的方法：
//新增可以對陣列中的元素進行計算的方法
Array.method('reduce', function (f, value) {
var i;
for (i = 0; i < this.length; i += 1) {
value = f(this[i], value);
}
return value;
});
複製程式碼這樣所有的陣列都繼承了這個方法。它接受一個函式與初始值為引數。然後遍歷陣列，並通過函式計算出新值，最後返回這個值。
//建立數字陣列
var data = [9, 16, 32, 192, 8];
//定義加法與乘法函式
var add = function (a, b) {
return a + b;
};
var mult = function (a, b) {
return a * b;
};
console.log(data.reduce(add, 0));//257
console.log(data.reduce(mult, 1));//7077888
複製程式碼因為陣列就是物件，所以也可以直接給陣列新增方法：
data.total = function () {
return this.reduce(add, 0);
};
console.log(data.total());//257
複製程式碼因為字串 “total” 不是整數，所以不會改變陣列的 length 值。當屬性名是字串時，它就會成為陣列的屬性。
7 指定初始值
如果使用 [] 得到的新陣列，它將是空的。這是如果訪問它，將會得到 undefined。我們可以實現一個可以初始化陣列元素值的方法：
//為每一個元素指定初始值
Array.dim = function (dimension, initial) {
var a = [], i;
for (i = 0; i < dimension; i += 1) {
a[i] = initial;
}
return a;
};
//建立包含 10 個 0 的陣列
var myArray = Array.dim(10, 0);
console.log(myArray);//[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]
複製程式碼JavaScript 陣列的元素可以是陣列，通過這種方式來實現多維陣列功能：
//陣列的陣列
var matrix = [
[0, 1, 2], [3, 4, 5]
];
console.log(matrix[1][0]);//3
複製程式碼可以擴充套件 Array 方法，讓它可以初始化矩陣：
/**
*
* @param m 第一維個數
* @param n 第二維個數
* @param initial 初始值
*///在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
Array.matrix = function (m, n, initial) {
var a, i, j, mat = [];
for (i = 0; i < m; i += 1) {
a = [];
for (j = 0; j < n; j += 1) {
a[j] = initial;
}
mat[i] = a;
}
return mat;
};
//構造 0 填充的 4*4 矩陣
console.log(Array.matrix(4, 4, 0));
//構造單元矩陣
Array.identity = function (n) {
var i, mat = Array.matrix(n, n, 0);
for (i = 0; i < n; i += 1) {
mat[i][i] = 1;
}
return mat;
};
var myMatrix = Array.identity(4);
console.log(myMatrix);
console.log(myMatrix[3][3]);//1
複製程式碼結語
感謝您的觀看，如有不足之處，歡迎批評指正。 獲取資料??? 本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：???619586920???，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。