乐趣区

关于javascript:js学习笔记8数组

实质

数组是一种非凡的对象,这一点能够从 typeof 看出。

typeof [1, 2, 3] // "object"

其特殊性体现在键名是依照秩序排列的一组整数,这一点能够从 Object.keys 看出

var arr = ['a', 'b', 'c'];

Object.keys(arr)
// ["0", "1", "2"]

因为对象键名为数字时不能用.(会被认为是小数点),所以数组只能用【】

length 属性

  • length 属性:返回数组的成员数量。这里要留神的是,length 属性的值 = 键名中的最大整数加一,不是有几个元素,例如下边有三个元素,然而 length 值为 10
var arr = ['a', 'b'];
arr.length // 2


arr[9] = 'd';
arr.length // 10
  • 由上边也能够发现,数组的数字键不须要间断;而且数组是一种动静的数据结构,能够随时增减成员
  • 另外,若咱们将 length 设置为小于以后成员个数的值,那么数组的成员数量会主动缩小到 length 的值。咱们能够通过将 length 设为 0,达到清空数组的目标
var arr = ['a', 'b', 'c'];

arr.length = 0;
arr // []

若人为设置 length 大于以后元素个数,成员数量会减少到这个值,新增的地位都是空位 undefined

var a = ['a'];

a.length = 3;
a[1] // undefined
  • 值得注意的是,数组实质上是对象,所以咱们能够为数组增加属性。然而增加字符串和小数键名,不会影响 length 的值(length属性的值就是等于最大的数字键加 1,而这个数组没有整数键,所以 length 属性放弃为0
var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0

in 运算符

in 运算符用于查看某个键名是否存在,能够用于对象和数组。若某个地位为空位,返回 false

数组的遍历

  • 数组是非凡的对象,能够用 for…in 循环遍历。然而,for…in 不仅会遍历整数键,还会遍历其余键,所以不举荐用 for…in 遍历数组
var a = [1, 2, 3];
a.foo = true;

for (var key in a) {console.log(key);
}
// 0
// 1
// 2
// foo
  • 数组的遍历能够思考 for、while 或者 forEach 办法
var a = [1, 2, 3];

// for 循环
for(var i = 0; i < a.length; i++) {console.log(a[i]);
}

// while 循环
var i = 0;
while (i < a.length) {console.log(a[i]);
  i++;
}

var l = a.length;
while (l--) {console.log(a[l]);
}
var colors = ['red', 'green', 'blue'];
colors.forEach(function (color) {console.log(color);
});
// red
// green
// blue

空位

  • 当某个地位为空元素,即两个逗号间没有任何值,咱们称存在空位。这里要留神的是,最初一个元素后边有逗号,不会产生空位
var a = [1, 2, 3,];

a.length // 3
a // [1, 2, 3]
  • 数组的空位是能够读取的,返回 undefined。然而留神的是,undefined 和空位不是一回事。如果是空位,应用数组的 forEach 办法、for...in构造、以及 Object.keys 办法进行遍历,空位都会被跳过。
var a = [, , ,];

a.forEach(function (x, i) {console.log(i + '.' + x);
})
// 不产生任何输入

for (var i in a) {console.log(i);
}
// 不产生任何输入

Object.keys(a)
// []

undefined 遍历时则不会跳过

var a = [undefined, undefined, undefined];

a.forEach(function (x, i) {console.log(i + '.' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined

for (var i in a) {console.log(i);
}
// 0
// 1
// 2

Object.keys(a)
// ['0', '1', '2']

总的来说,空位示意数组没有这个元素,所以不会被遍历到;undefined 示意数组有这个元素,然而值为 undefined,所以遍历时不会跳过

相似数组的对象

若一个对象所有键名都是正整数或 0,并且有 length 属性,这个对象称为‘相似数组的对象’。

var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

然而,相似数组的对象不具备数组的办法(如 push 等);而且 length 不是动静值,不随着成员变动而变动

典型的“相似数组的对象”是函数的 arguments 对象,以及大多数 DOM 元素集,还有字符串。

将相似数组的对象转化为数组
  • 数组的 slice 办法能够将“相似数组的对象”变成真正的数组。
var arr = Array.prototype.slice.call(arrayLike);
  • 除了转为真正的数组,“相似数组的对象”还有一个方法能够应用数组的办法,就是通过 call() 把数组的办法放到对象下面。
function print(value, index) {console.log(index + ':' + value);
}

Array.prototype.forEach.call(arrayLike, print);

下面代码中,arrayLike代表一个相似数组的对象,原本是不能够应用数组的 forEach() 办法的,然而通过 call(),能够把forEach() 嫁接到 arrayLike 下面调用。

留神,这种办法比间接应用数组原生的 forEach 要慢,所以最好还是先将“相似数组的对象”转为真正的数组,而后再间接调用数组的 forEach 办法。

  • 字符串也是相似数组的对象,所以也能够用 Array.prototype.forEach.call 遍历。
Array.prototype.forEach.call('abc', function (chr) {console.log(chr);
});
// a
// b
// c
var arr = Array.prototype.slice.call('abc');
arr.forEach(function (chr) {console.log(chr);
});
// a
// b
// c
退出移动版