索引集合

数组对象

数组是一个有序的数据集合,可以通过数组名称和索引进行访问。JavaScript中没有明确的数组数据类型,但可以使用内置的Array对象和其方法对数组进行操作。

创建数组

1
2
3
4
5
6
7
8
9
// 创建数组有以下三种方法:
// 1. 使用Array构造函数
let arr1 = new Array(1, 2, 3);

// 2. 使用Array函数
let arr2 = Array(1, 2, 3);

// 3. 使用数组字面量
let arr3 = [1, 2, 4];

填充数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 可以通过给元素赋值进行填充数组
let arr = [];
arr [0] = 1;
arr [1] = 2;
arr [3] = 3;
console.log(arr); // [1, 2, empty, 3]
console.log(arr.length); // 4

// 如果索引是一个非整型数值,则将会被作为数组对象的属性存储,而非数组元素
let arr = [];
arr[3.14] = 3.14;
console.log(arr); // [3.14: 3.14]
console.log(arr[3.14]); // 3.14
console.log(arr.length); // 0
console.log(arr.hasOwnProperty(3.14)); // true

引用数组元素

1
2
3
// 使用数组名加索引的方式引用
let arr = [1, 2, 3];
console.log(arr[0]); // 1

length属性

在实施层面,JavaScript实际上是将元素作为标准的对象属性来存储。把索引作为属性名。length属性是特殊的,它总是返回最后一个元素的索引值+1,也可以通过改写length来修改数组:

1
2
3
4
5
6
let arrs = [];
arrs[100] = 1;
console.log(arrs.length); // 101

arrs.length = 0; // 将length属性改为0会清空数组
console.log(arrs); // []

遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
let arrs = [1, 2, 3, 4, 5, 6];

// 常用的操作是遍历数组的值,并以某种方式进行处理
for(let i = 0; i < arrs.length; i++) {
console.log(arrs[i]); // 1, 2, 3, 4, 5, 6
}

// 如果确定数组中的元素没有一个false,例如只包含dom节点的数组,可以使用下面的方法
// 该方法可以避免检测数组长度的开销,并确保每次循环时都将div变量重新分配给当前项
let divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
console.log(div)
}

// 使用forEach方法
// 被传递给forEach的回调函数会在数组的每个元素上执行一次,元素作为参数传递给回调函数,未赋值的值不会在forEach循环迭代
arrs.forEach(item => {
console.log(item);
})
// 在数组定义时省略的元素不会在forEach遍历中列出,但手动赋值的undefined会被列出
let arr1 = [,,undefined,1];
arr1.forEach(item => {
console.log(item); // undefined, 1
})

数组方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// concat()连接两个数组并返回一个新的数组
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6]

// join()将数组所有元素连接成一个字符串,并以参数作为分隔符
console.log(arr1.join(',')); // 1,2,3

// push()在数组末尾添加一个或多个元素,并返回数组操作后的长度
console.log(arr2.push('a', 'b', 'c')); // 6
console.log(arr2); // [4,5,6,"a","b","c"]

// pop()从数组中移除最后一个元素,并返回该元素
console.log(arr2.pop()); // c
console.log(arr2); // [4,5,6,"a","b"]

// shift()从数组中移出第一个元素,并返回该元素
console.log(arr2.shift()); // 4
console.log(arr2); // [5,6,"a","b"]

// unshift()在数组开头添加一个或多个元素,并返回数组的新长度
console.log(arr2.unshift(4)); // 5
console.log(arr2); // [4,5,6,"a","b"]

// slice(start_index, end_index)从数组提取一个片段,并作为一个新数组返回
console.log(arr2.slice(0, 3)); // [4,5,6]

// splice(index, count_to_remove, addElment1...)从数组中移出一些元素,(可选)并替换它们
arr2.splice(3, 2, 7, 8, 9);
console.log(arr2); // [4, 5, 6, 7, 8,9]

// reverse()颠倒数组元素的顺序
arr2.reverse();
console.log(arr2); // [9, 8, 7, 6, 5, 4]

// sort()给数组元素排序
arr2.sort();
console.log(arr2); // [4, 5, 6, 7, 8, 9]
// sort也可以传一个回调函数来决定排序方法
arr2.sort((a, b) => b - a);
console.log(arr2); // [9, 8, 7, 6, 5, 4]

// indexOf(element[, fromIndex])在数组中搜索element并返回第一个匹配的索引
console.log(arr2.indexOf(9)); // 0

// lastIndexOf(element[, fromIndex])从结尾开始反向搜索elemnt,并返回第一次匹配的索引
console.log(arr2.lastIndexOf(9)); // 0

// forEach(callback[, thisObject])在数组的每个元素上执行callback
arr2.forEach(item => {
console.log(item); // 9 8 7
})

// map(callback[, thisObject])在数组的每个元素上执行callback,并将每次执行callback时的返回值组成新数组并返回
console.log(arr2.map(item => item * 2)); // [18, 16, 14, 12, 10, 8]

// filter(callback[, thisObject])在数组的每个元素上执行callback,并将每次执行callback时的返回值w为true的元素组成新数组并返回
console.log(arr2.filter(item => item % 2 === 0)); // [8, 6, 4]

// every(callback[, thisObject])在数组的每个元素上执行callback,如果每次执行callback的返回值都为true则返回true
console.log(arr2.every(item => item > 0)); // true

// some(callback[, thisObject])在数组的每个元素上执行callback,如果有一次次执行callback的返回值为true则返回true
console.log(arr2.some(item => item > 8)); // true

// reduce(callback[, initialValue])使用回调函数callback(first_value, second_value)把数组所有元素计算成一个单一值。
// 如果指定了initialValue,则使用initialValue作为第一个参数值并以数组中第一项的值作为第二个参数值来调用回调。如果未指定initialValue,则回调的前两个参数值将是数组的第一个和第二个元素。
// 9 + 8 + 7 + 6 + 5 + 4
console.log(arr2.reduce((first, second) => first + second)); // 39

// reduceRight(callback[, initialValue])从最后一个元素开始,使用回调函数callback(first_value, second_value)把数组所有元素计算成一个单一值
// 4 + 5 + 6 + 7 + 8 + 9
console.log(arr2.reduce((first, second) => first + second)); // 39

使用类数组对象

Array的原生(prototype)方法可以用来处理类似数组(例如arguments)行为的对象:

1
2
3
function printArgumnets() {
Array.prototype.forEach.call(arguments, item => console.log(item));
}

类型化数组

Typed Arrays是类数组对象,其提供访问原始二进制数据的机制

缓冲和视图:类型化的数组结构

JavaScript类型数组被分解为缓冲(Buffer, 由ArrayBuffer实现)和视图(views)。缓冲是代表数据块的对象,它没有格式可言并没有提供任何机制来访问其内容。为了访问包含在缓冲区的内存需要使用视图,视图提供一个上下文,即数据类型、起始偏移量和元素数,这些元素将数据转换为实际类型数组。

ArrayBuffer

ArrayBuffer是一种数据类型,用于表示一个通用的、固定长度的二进制数据缓冲区。不能直接操作一个ArrayBuffer中的内容,需要创建一个数组类型视图或者DataView来代表特定格式的缓冲区,从而实现读写缓冲区中的内容。

类型数组视图

类型数组属视图具有自描述性的名字,并且提供数据类型信息。例如Int8Unit32Float64等。

本文参考资料

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!

扫一扫,分享到微信

微信分享二维码
  • © 2019-2021 musi

请我喝杯咖啡吧~

支付宝
微信