数据结构-数组详解

定义

数组存储一系列同一种数据类型的值。虽然，JavaScript里，数组可以存储不同类型的值。

创建和初始化数组

let arr1 = [];
let arr2 = new Array(); // []
let arr3 = new Array(3); // 创建数据内存长度为3的空数组 [undefined,undefined,undefined]
let arr4 = new Array(1,2,3);  // 创建值为 [1,2,3]的数组
let arr5 = Array.of(3); // [,,]

访问元素和迭代数组

直接使用下标访问

console.log(arr3[1]); // 2

ps: 如果指定的索引是一个无效值，JavaScript 数组并不会报错，而是会返回 undefined。

迭代访问

1. forEach

arr4.forEach((value, index, originArray)=>{
    console.log(value, index, originArray) 
    // 1, 0, [1,2,3]
    // 2, 1, [1,2,3]
    // 3, 2, [1,2,3]
})

2. for...of/ for...in

for (let value of arr4) {
  console.log(value);
  // 1
  // 2
  // 3
}

4. for循环

for(let i = 0; i < arr4.length; i++){
    console.log(arr4[i]);
    // 1
    // 2
    // 3
}

ES6中，数组新增@@Iterator对象

5. 使用@@Iterator对象

let iterator = arr4[Symbol.iterator]();
console.log(interator.next().value); // 1
console.log(interator.next().value); // 2
console.log(interator.next().value); // 3

6. 同第5项，可使用数组的entries、values和keys方法

顺便讲下，经常使用的for...in和for...of的差别，具体可以点击链接去MDN看下文档，这块还是讲得比较清楚，而在作者这里只是简单记录一下。

for...of与for...in的区别

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。（输出的是遍历对象的可枚举属性，如数组输出的是下标元素）

for...of 语句遍历可迭代对象定义要迭代的数据。（输出的是迭代对象的数据）

数组方法

静态方法

• Array.from() 从类数组对象或者可迭代对象中创建一个新的数组实例

• Array.isArray() 用来判断某个变量是否是一个数组对象

• Array.of() 根据一组参数来创建新的数组实例，支持任意的参数数量和类型

实例方法

• Array.prototype.at()实验中

  Returns the array item at the given index. Accepts negative integers, which count back from the last item.

• Array.prototype.concat()

  用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

• Array.prototype.copyWithin()

  浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

• Array.prototype.entries()

  返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对

• Array.prototype.every()

  测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值

• Array.prototype.fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素

• Array.prototype.filter()

  创建一个新数组，其包含通过所提供函数实现的测试的所有元素

• Array.prototype.find()

  返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

• Array.prototype.findIndex()

  返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1

• Array.prototype.flat() 按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

• Array.prototype.flatMap()

  使用映射函数映射每个元素，然后将结果压缩成一个新数组

• Array.prototype.forEach()

  对数组的每个元素执行一次给定的函数

• Array.prototype.includes()

  判断一个数组是否包含一个指定的值，如果包含则返回 true，否则返回 false

• Array.prototype.indexOf()

  返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1

• Array.prototype.join()

  将一个数组的所有元素连接成一个字符串并返回这个字符串

• Array.prototype.keys()

  返回一个包含数组中每个索引键的 Array Iterator 对象

• Array.prototype.lastIndexOf()

  返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1

• Array.prototype.map()

  返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

• Array.prototype.pop()

  从数组中删除最后一个元素，并返回该元素的值

• Array.prototype.push()

  将一个或多个元素添加到数组的末尾，并返回该数组的新长度

• Array.prototype.reduce()

  对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值

• Array.prototype.reduceRight()

  接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值

• Array.prototype.reverse()

  将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组

• Array.prototype.shift()

  从数组中删除第一个元素，并返回该元素的值

• Array.prototype.slice()

  提取源数组的一部分并返回一个新数组

• Array.prototype.some()

  测试数组中是不是至少有一个元素通过了被提供的函数测试

• Array.prototype.sort()

  对数组元素进行原地排序并返回此数组

• Array.prototype.splice()

  通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容

• Array.prototype.toLocaleString()

  返回一个字符串表示数组中的元素。数组中的元素将使用各自的 Object.prototype.toLocaleString() 方法转成字符串

• Array.prototype.toString()

  返回一个字符串表示指定的数组及其元素。数组中的元素将使用各自的Object.prototype.toString() 方法转成字符串

• Array.prototype.unshift()

  将一个或多个元素添加到数组的头部，并返回该数组的新长度

• Array.prototype.values()

  返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

• Array.prototype[@@iterator]()

  返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

类型数组

JavaScript 类型数组（Typed Arrays）将实现拆分为缓冲和视图两部分。一个缓冲（由 ArrayBuffer 对象实现）描述的是一个数据块。缓冲没有格式可言，并且不提供机制访问其内容。为了访问在缓冲对象中包含的内存，你需要使用视图。视图提供了上下文 — 即数据类型、起始偏移量和元素数 — 将数据转换为实际有类型的数组。

使用类型数组的 Web API

• FileReader.prototype.readAsArrayBuffer()

  FileReader.prototype.readAsArrayBuffer() 读取对应的Blob 或 File的内容

• XMLHttpRequest.prototype.send()

  XMLHttpRequest 实例的 send() 方法现在使用支持类型化数组和 ArrayBuffer 对象作为参数。

• ImageData.data

  是一个 Uint8ClampedArray 对象，用来描述包含按照 RGBA 序列的颜色数据的一维数组，其值的范围在0到255（包含 255）之间。

// 缓冲

// 首先，创建一个 16 字节固定长度的缓冲：
var buffer = new ArrayBuffer(16);

// 确认一下数据的字节长度：以及内存值
if (buffer.byteLength === 16) {
 console.log("Yes, it's 16 bytes.");
} else {
 console.log("Oh no, it's the wrong size!");
}
// Yes, it's 16 bytes.

console.log(buffer);
// ArrayBuffer(16)



// 缓冲转视图（也可一个缓冲转多个视图）

//创建一个视图，此视图将把缓冲内的数据格式化为一个 32 位的有符号整数数组：
var int32View = new Int32Array(buffer);

// 像数组一样访问
for (var i = 0; i < int32View.length; i++) {
 console.log(int32View[i]);
 // 0 0 0 0
}

使用复杂的数据结构

通过将缓冲与不同类型视图组合，以及修改内存访问的偏移位置，你可以操作包含更多更复杂数据结构的数据。你可以使用js-ctypes操作诸如WebGL，数据文件或 C 语言结构体这些复杂的数据结构。

c语言结构

struct someStruct {
  unsigned long id;
  char username[16];
  float amountDue;
};

js读取c语言中的数据

var buffer = new ArrayBuffer(24);

// 从c语言结构体中读取数据

var idView = new Uint32Array(buffer, 0, 1); 
// id (longInt)
var usernameView = new Uint8Array(buffer, 4, 16);
// username (string)
var amountDueView = new Float32Array(buffer, 20, 1);
// amountDue (float)

类型数组转换

可以调用 Array.from实现这种转换，如果 Array.from 不支持的话，也可以通过如下代码实现：

var typedArray = new Uint8Array([1, 2, 3, 4]);
// 转换方式，Array.prototype.slice
var normalArray = Array.prototype.slice.call(typedArray);
console.log(normalArray.length); // 4
console.log(normalArray.constructor); // Array;

资料来源于：

• MDN-TypedArray
• MDN-Array