詳解JavaScript數組特性與實踐應用

這篇文章主要介紹了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，快速升職加薪，走上人生巔峯。