JavaScript权威指南(第7版) 笔记 - 第 7 章 数组

能用代码说清楚的，绝不多废话！！！！！！

Linux创始人Linus的名言：Talk is cheap，show me the code ! ，博主技术博文会精心给出能说明问题的范例代码！！！！！

⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️

第7章 数组

• 数组是值的有序集合，同一数组的数组元素可以是不同的类型；

例：

let arr = [1,'2',{
   
   a:3},function(){
   
   }];

• JavaScript数组是动态的，它们会按需增大或缩小；

let arr = [];// 空数组
arr[0] = 0; // 增大
arr[1] = 1; // 增大
arr.length = 1; // 缩小
delete arr[0]; // 缩小

• JavaScript数组可以是稀疏的，即元素不一定具有连续的索引，中间可能有空位；
  例：

let data = [7, 8, 9];
data[10] = '';// 动态的、稀疏的

索引3~9都是空位。我们在浏览器中debug的截图如下

JavaScript数组是一种特殊的JavaScript对象，因此数组的索引更像是属性名，只不过这个属性名是整数而已；(看了上图我们更能深刻体会这句话)

console.log(9 in data);      // => false

• JavaScript字符串的行为类似字母数组

console.log("abc"[2]); // => c

可以通过 [] 读取字符串中的字符

• ES6增加了一批新的数组类，统称为“定型数组”,定型数组具有固定长度和固定的数值元素类型。定型数组具有极高的性能

TODO

参考博主其他博文：定型数组

7.1 创建数组

创建数组有4中方式：
1、数组字面量；
2、对可迭代对象使用…扩展操作符；
3、Array() 构造函数；
4、工厂方法 Array.of()和 Array.from()；

7.1.1 数组字面量

（1）元素可以是常量

let empty = [];                 // 空数组
let primes = [2, 3, 5, 7, 11];  // 5个数值元素的数组
let misc = [1.1, true, "a",];   // 不同类型元素的数组，末尾逗号会被忽略misc的length为3

⚠️ 数组中末尾的逗号会被忽略。

（2）元素可以是变量或表达式

let base = 1024;
let table = [base, base + 1, base + 2, base + 3];

（3）逗号之间没有值的情况

let count = [1, , 3]; // 索引0、2处有元素 length为3,
let undefs = [, ,];  // 忽略末尾逗号，length为2

⭐️⭐️ 把数组看作对象、索引看作对象的属性（属性不需要数字连续），上面数组的表现就很容易理解了。

7.1.2 扩展操作符

let a = [1, 2, 3];
let b = [0, ...a, 4];  // b == [0, 1, 2, 3, 4]

把 ...a 想象成代表数组a的所有元素

扩展操作符

（1）扩展操作符创建数组（浅）副本

let original = [1, 2, 3];
let copy = [...original];
copy[0] = 0;  // 修改copy中的元素值，不影响original中元素值
original[0]   // => 1

（2）扩展操作符适用于任何可迭代对象

可迭代对象：数组、字符串、Set、Map

let arr =[];
// 1 字符串
arr = [..."abc"];
console.log(arr);// ['a', 'b', 'c']
// 2、数组
let other_arr = [1,2,3];
arr = [...other_arr];
console.log(arr);// [1, 2, 3]

// 3、Set
let set = new Set().add(1).add(2).add(3);
arr = [...set];
console.log(arr);// [1, 2, 3]

// 4、Map
let map = new Map().set("one",1).set("tow",2).set("three",3);
arr = [...map];
console.log(arr);// [['one', 1],['tow', 2],['three', 3]]

（3）应用Set数组去重

let letters = [..."hello world"];
letters = [...new Set(letters)]  // => ["h","e","l","o"," ","w","r","d"]

7.1.3 Array()构造函数

let a1 = new Array();               // 等价于 let a1 = [];
let a2 = new Array(10);             // 等价于 let a2 = [];a2.length = 10;
let a3 = new Array(3, 2, 1, "t,t"); // 等价于 let a3 = [3, 2, 1, "t,t"];

各个数组内部状态如下图：

字面量创建数组更简单，且完全替代构造函数创建数组。

⚠️ ⚠️ new Array(n) 这种方式创建数组，从上图中看，并不会预先分配空间。但对JavaScript引擎可能是有用的，可以根据n的大小来决定分配在内存的哪块区域 (根据程序访问的局部性原理，连续的内存可能会带来性能优势)。

在JavaScript中，数组的内存并不需要连续的内存区域。事实上，JavaScript的数组在内存中的实现与许多其他编程语言中的数组有本质的区别。

在JavaScript中，数组实际上是一种特殊的对象，用于存储有序的元素集合。这些元素可以是任何数据类型，并且数组的大小可以动态地增长和缩小。JavaScript的数组底层实现通常依赖于一种称为“散列表”或“哈希表”的数据结构，而不是传统的连续内存块。

使用散列表或哈希表作为底层数据结构意味着数组的每个元素都可以通过其索引（键）直接访问，而不需要遍历整个数组。这种实现方式提供了高效的插入、删除和查找操作，但也意味着数组的元素在内存中的位置可能并不连续。

因此，JavaScript的数组并不要求连续的内存区域来存储元素。相反，它们可以根据需要动态地分配和释放内存，以适应不同大小的数组和不同的操作需求。这种灵活性使得JavaScript的数组在处理各种复杂的数据结构和算法时非常有用。

需要注意的是，虽然JavaScript的数组不需要连续的内存区域，但在某些情况下，连续的内存访问可能会带来性能优势。然而，这通常是由JavaScript引擎的优化机制来处理的，而不是由开发者直接控制的。开发者主要关注的是如何使用数组来组织和操作数据，而引擎则会负责底层内存管理的细节。

7.1.4 Array.of()

数组元素传递给Array.of()，来创建并返回新数组。

Array.of()        // => []; 创建一个空数组
Array.of(10)      // => [10]; 
Array.of(1,2,3)   // => [1, 2, 3]

7.1.5 Array.from()

（1）类数组对象转数组

所谓类数组对象就是具有length属性的对象。

需要注意的是，对象中 “整数类型” 属性对应的值才能转为数组的元素。

let arrayLike = {
   
    0: 'a', '1': 'b', 'c': 'c', length: '5' }; 
// 转换为数组  
let arr = Array.from(arrayLike);

⚠️ ⚠️
1、类数组对象的length需要是数值或数值字符串( 例如 “5.8”,JavaScript会转化为整数5)

2、类数组对象的属性必须是整数或整数字符串才能转为数组元素。(例如: 属性"5"，JavaScript会将其转化为整数5) ；

3、Array.from转换时，如果length大于元素个数，JavaScript会将空位部分置为undefined；

例：

let obj = {
   
   
    1: 1,
    "2": function fun() {
   
    console.log("fun"); },
    "4": 4,
    "4.9": 4.9,  // 属性不是整数，不能转换为数组元素
    length: 5.8, // 转换为整数5
};
let arr = Array.from(obj);
console.log(arr);// [undefined, 1, ƒ, undefined, 4]

⚠️ Array.from()方法内部会使用length对数组进行裁剪（见下面的程序）,我们将obj中的length改为2，输出：[undefined, 1]，以length为准。

let obj = {
   
   
   ....
    length: 2,
};
let arr = Array.from(obj);
console.log(arr);// [undefined, 1]

🔗 通过设置length删除数组元素参考7.4节

（2）可迭代对象转数组

可迭代对象包括：1 字符串、2 数组、3 Set、4 Map

let arr =[];
// 1 字符串
arr = Array.from("abc");
console.log(arr);//  ['a', 'b', 'c']
// 2、数组
arr =Array.from([1,2,3]);
console.log(arr);//[1, 2, 3]

// 3、Set
let set = new Set().add(1).add(2).add(3);
arr =Array.from(set);
console.log(arr);//[1, 2, 3]

// 4、Map
let map = new Map().set("one",1).set("tow",2).set("three",3);
arr =Array.from(map);
console.log(arr);//[['one', 1],['tow', 2],['three', 3]

（3）Array.from()的第2个参数：处理函数

处理函数接收两个参数:（数组元素，索引）

let arr1 = [1,3,5,7,9];
let arr2 = Array.from(arr1,(e,i)=>{
   
   
	return e&