深入理解 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

[] 后置运算符会把它包含的表达式转换为字符串,如果表达式有 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" ]

3 删除

JavaScript 数组就是对象,所以可以用 delete 移除元素:

delete numbers[2];
console.log(numbers);//[ "zero", "one", <1 个空的存储位置>, "four", "good" ]

可惜的是,这会在数组中留下一个空洞!而我们希望的是:删除后,被删除元素的后续元素会自动地往前移动。

JavaScript 数组提供了 splice() 方法,它接受下列参数:

  1. 数组的索引。
  2. 要删除的元素个数。
  3. 其他参数(多个)- 把这些参数依次插入到索引位置。
//第一个参数是索引号,第二个参数是要删除的元素个数
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;
};

这个方法在不同窗口(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 初始值
 */
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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,749评论 0 8
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,232评论 0 5
  • 女儿从小就是我的骄傲,聪慧好学,乖巧懂理,是好多孩子心中的榜样。没想到,五年级那年,一记闷棍把我打蒙圈了。 五年级...
    开心就笑吧阅读 91评论 0 2
  • 因我需要参加一场在异地举行的考试,考虑其路途的远近以及转车的繁琐,于是慎重地向妈妈提出独自驱车前往。妈妈提出我...
    车马正简阅读 169评论 0 0
  • 因为Google Doodle,第一次认识到了二十四节气。 来自百度百科的解释 一年有二十四个节气,计十二个节和十...
    太阳融化了我阅读 1,274评论 2 1