JavaScript數(shù)組特性與實(shí)踐應(yīng)用深入詳解

更新時(shí)間：2018年12月30日 10:08:07 作者：deniro_li

這篇文章主要介紹了JavaScript數(shù)組特性與實(shí)踐應(yīng)用,較為深入而詳細(xì)的分析了javascript數(shù)組的功能、屬性、使用方法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript數(shù)組特性與實(shí)踐應(yīng)用。分享給大家供大家參考，具體如下：

JavaScript 提供了一種類似數(shù)組特性的對(duì)象，它把數(shù)組的下標(biāo)變?yōu)樽址?，作為?duì)象的屬性。雖然它比一個(gè)真正的數(shù)組來的慢，但是使用起來很方便。

1 數(shù)組字面量

數(shù)組字面量是在一對(duì)方括號(hào)中包圍零個(gè)或多個(gè)用逗號(hào)分隔的值的表達(dá)式：

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

數(shù)組對(duì)象繼承自 Array.prototype，所以 numbers 繼承了大量有用的方法。

JavaScript 允許數(shù)組包含任意混合類型的值：

var misc = [
  'string', 11.3, false, true, null, undefined, ['nested', 'array'], {object: true}, NaN, Infinity
];
console.log(misc.length);//10

2 長(zhǎng)度

數(shù)組有一個(gè) length 屬性，但它是沒有上界的。如果用大等于當(dāng)前 length 的數(shù)字作為下標(biāo)來存儲(chǔ)元素，那么 length 屬性值會(huì)被增大以便容納新的元素，而不會(huì)發(fā)生數(shù)組越界現(xiàn)象哦O(∩_∩)O~

length 屬性的值很詭異，它是數(shù)組最大整數(shù)屬性名加 1，即它不一定等于數(shù)組的元素個(gè)數(shù)：

var myArray = [];
console.log(myArray.length);//0
//myArray 只包含一個(gè)屬性，但 length 的值等于這個(gè)數(shù)組最大整數(shù)的屬性名加 1
myArray[100000] = true;
console.log(myArray.length);//100001

[] 后置運(yùn)算符會(huì)把它包含的表達(dá)式轉(zhuǎn)換為字符串，如果表達(dá)式有 toString() 方法，那么就會(huì)調(diào)用它。這個(gè)字符串被當(dāng)做屬性名，如果這個(gè)字符串是一個(gè)大等于當(dāng)前 length 值而且小于 4294967295 的正整數(shù)，那么這個(gè)數(shù)組的 length 就會(huì)被重置為新的下標(biāo)加 1。

可以直接設(shè)置 length 的值。設(shè)置更大的 length 值不會(huì)為數(shù)組分配更多的空間；而把 length 設(shè)小則會(huì)導(dǎo)致所有下標(biāo)大等于新的 length 的屬性被刪除：

//刪除元素
numbers.length = 3;
console.log(numbers);//[ "zero", "one", "two" ]

把下標(biāo)指定為數(shù)組的當(dāng)前 length，就可以把一個(gè)新元素附加到數(shù)組的尾部：

//新增元素
numbers[numbers.length] = 'four';
console.log(numbers);//[ "zero", "one", "two", "four" ]

使用 push() 可以更方便地實(shí)現(xiàn)同樣的功能：

//新增元素（push）
numbers.push('good');
console.log(numbers);//[ "zero", "one", "two", "four", "good" ]

3 刪除

JavaScript 數(shù)組就是對(duì)象，所以可以用 delete 移除元素：

delete numbers[2];
console.log(numbers);//[ "zero", "one", <1 個(gè)空的存儲(chǔ)位置>, "four", "good" ]

可惜的是，這會(huì)在數(shù)組中留下一個(gè)空洞！而我們希望的是：刪除后，被刪除元素的后續(xù)元素會(huì)自動(dòng)地往前移動(dòng)。

JavaScript 數(shù)組提供了 splice() 方法，它接受下列參數(shù)：
①. 數(shù)組的索引。
②. 要?jiǎng)h除的元素個(gè)數(shù)。
③. 其他參數(shù)（多個(gè)）- 把這些參數(shù)依次插入到索引位置。

//第一個(gè)參數(shù)是索引號(hào)，第二個(gè)參數(shù)是要?jiǎng)h除的元素個(gè)數(shù)
numbers.splice(2, 1);
console.log(numbers);// [ "zero", "one", "four", "good" ]

4 枚舉

JavaScript 數(shù)組是對(duì)象，所以可以用 for in 語句來遍歷數(shù)組的所有屬性?？墒?for in 語句無法保證屬性的順序，而且可能從原型鏈中得到意外的屬性。

可以使用 for 來避免上述的問題：

var i,
  myArray = numbers;
for (i = 0; i < myArray.length; i += 1) {
  console.log(myArray[i]);
}

5 數(shù)組與對(duì)象

如何在這兩者進(jìn)行選擇？當(dāng)屬性名是小而連續(xù)的整數(shù)時(shí)，使用數(shù)組；否則使用對(duì)象。

JavaScript 的 typeof 會(huì)認(rèn)為數(shù)組是 object，這沒有意義！

我們可以定義一個(gè)函數(shù)來檢測(cè)數(shù)組：

var is_array = function (value) {
  return value && typeof value === 'object' &&
    value.constructor === Array;
};

這個(gè)方法在不同窗口(window)或框架(frame) 里構(gòu)造的數(shù)組會(huì)失敗。所以請(qǐng)用下面的這個(gè)更好的方法：

var is_array = function (value) {
  return Object.prototype.toString.apply(value) === '[object Array]';
};
console.log(is_array(myArray));//true

6 方法

JavaScript 提供了一些對(duì)于數(shù)組可用的方法，它們被存儲(chǔ)在 Array.prototype 中。我們可以為數(shù)組增加一個(gè)對(duì)數(shù)組進(jìn)行計(jì)算的方法：

//新增可以對(duì)數(shù)組中的元素進(jìn)行計(jì)算的方法
Array.method('reduce', function (f, value) {
  var i;
  for (i = 0; i < this.length; i += 1) {
    value = f(this[i], value);
  }
  return value;
});

這樣所有的數(shù)組都繼承了這個(gè)方法。它接受一個(gè)函數(shù)與初始值為參數(shù)。然后遍歷數(shù)組，并通過函數(shù)計(jì)算出新值，最后返回這個(gè)值。

//創(chuàng)建數(shù)字?jǐn)?shù)組
var data = [9, 16, 32, 192, 8];
//定義加法與乘法函數(shù)
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

因?yàn)閿?shù)組就是對(duì)象，所以也可以直接給數(shù)組添加方法：

data.total = function () {
  return this.reduce(add, 0);
};
console.log(data.total());//257

因?yàn)樽址?“total” 不是整數(shù)，所以不會(huì)改變數(shù)組的 length 值。當(dāng)屬性名是字符串時(shí)，它就會(huì)成為數(shù)組的屬性。

7 指定初始值

如果使用 [] 得到的新數(shù)組，它將是空的。這是如果訪問它，將會(huì)得到 undefined。我們可以實(shí)現(xiàn)一個(gè)可以初始化數(shù)組元素值的方法：

//為每一個(gè)元素指定初始值
Array.dim = function (dimension, initial) {
  var a = [], i;
  for (i = 0; i < dimension; i += 1) {
    a[i] = initial;
  }
  return a;
};
//創(chuàng)建包含 10 個(gè) 0 的數(shù)組
var myArray = Array.dim(10, 0);
console.log(myArray);//[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

JavaScript 數(shù)組的元素可以是數(shù)組，通過這種方式來實(shí)現(xiàn)多維數(shù)組功能：

//數(shù)組的數(shù)組
var matrix = [
  [0, 1, 2], [3, 4, 5]
];
console.log(matrix[1][0]);//3

可以擴(kuò)展 Array 方法，讓它可以初始化矩陣：

/**
 *
 * @param m 第一維個(gè)數(shù)
 * @param n 第二維個(gè)數(shù)
 * @param initial 初始值
 */
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;
};
//構(gòu)造 0 填充的 4*4 矩陣
console.log(Array.matrix(4, 4, 0));
//構(gòu)造單元矩陣
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

感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。