JavaScript学习笔记（五）

---

1. 什么是数组？

一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

数组属于的数据类型：Object（或者说引用数据类型）

ECMAScript 数组提供了 push() 和 pop() 方法，以实现类似栈的行为。

ECMAScript 数组也提供了shift() 和 push()，实现类似队列的行为，
通过使用 unshift() 和 pop()，可以在相反方向上模拟队列。

---

2. 创建数组

2.1) 使用 Array 构造函数

//创建一个名为 arr 空数组
let arr1 = new Array(); 

//创建一个初始 length 为 20 的数组
let arr2 = new Array(20); 

let arr3 = new Array("milk", "tea");
//也可以省略 new 操作符，
let arr11 = Array();
let arr22 = Array(20);
let arr33 = Array("milk", "tea");

ES6 新增用于创建数组的静态方法: from() 和 of()

from()用于将类数组结构转换为数组实例

Array.from()的第一个参数是一个类数组对象
(即任何可迭代的结构，或者有一个 length 属性和可索引元素的结构)

let arr = Array.from("array");
console.log(); //["a", "r", "r", "a", "y"]

//转换带有必要属性的自定义对象
const arrayLikeObject = { 
    0: 1, 
    1: 2, 
    2: 3, 
    3: 4, 
    length: 4
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4] 

Array.from()还接收第二个可选的映射函数参数，这个函数可以直接增强新数组的值。
还可以接收第三个可选参数，用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。

const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16]

Array.of()可以把一组参数转换为数组。

let arr = Array.of(1, 2, 3, 4);
console.log(arr); // [1, 2, 3, 4] 

2.2) 使用数组字面量表示法

//数组字面量是在中括号中包含以逗号分隔的元素列表
let arr1 = [];
let arr2 = ["milk", "tea"];

2.3) 判断一个对象是不是数组

Array.isArray()

let arr = ["milk", "tea"];
console.log((Array.isArray(arr)));  //true

---

3. 数组空位

使用数组字面量初始化数组时，可以使用一串逗号来创建空位
ECMAScript 会将逗号之间相应索引位置的值当成空位

let options = [,,,,,]; // 创建包含 5 个元素的数组
console.log(options.length); // 5 
console.log(options); // [,,,,,]

由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。
如果确实需要空位，则可以显式地用 undefined 值代替

---

4.  数组索引

要取得或设置数组的值，需要使用中括号并提供相应值的数字索引

let arr = ["milk", "tea"]; // 定义一个字符串数组
console.log(arr[0]); // milk
colors[1] = "hot-tea"; // 修改第二项
colors[2] = "coffee"; // 添加第三项

如果索引小于数组包含的元素数，则返回存储在相应位置的元素。
如果把一个值设置给超过数组最大索引的索引，如 arr[2]，则数组长度会自动扩展到该索引值加 1。

数组中元素的数量保存在 length 属性中，这个属性始终返回 0 或大于 0 的值。

数组 length 属性的独特之处在于，它不是只读的。
通过修改 length 属性，可以从数组末尾删除或添加元素。

---

5.  迭代器方法

在 ES6 中，Array 的原型上暴露了 3 个用于检索数组内容的方法：

• keys()：返回数组索引的迭代器
• values()：返回数组元素的迭代器
• entries()：返回索引 / 值对的迭代器

let arr = ["milk", "tea", "coffee"];

let arrKeys = Array.from(arr.keys());
let arrValues = Array.from(arr.values());
let arrEntries = Array.from(arr.entries());

console.log(arrKeys); //[0, 1, 2]
console.log(arrValues); //["milk", "tea", "coffee"]
console.log(arrEntries); //[[0, "milk"], [1, "tea"], [2, "coffee"]]

---

6. 数组的填充和复制

6.1) 填充数组方法 fill()

使用 fill()方法可以向一个已有的数组中插入全部或部分相同的值。
开始索引用于指定开始填充的位置，它是可选的。
如果不提供结束索引，则一直填充到数组末尾。
负值索引从数组末尾开始计算。

let zeroes = [0, 0, 0, 0, 0]; 

// 用 5 填充整个数组
zeroes.fill(5); 
console.log(zeroes); // [5, 5, 5, 5, 5] 
zeroes.fill(0); // 重置

// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3); 
console.log(zeroes); // [0, 0, 0, 6, 6] 
zeroes.fill(0); // 重置

// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3); 
console.log(zeroes); // [0, 7, 7, 0, 0]; 
zeroes.fill(0); // 重置

// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length = 4) 
zeroes.fill(8, -4, -1); 
console.log(zeroes); // [0, 8, 8, 8, 0];

6.2) 批量复制方法 copyWithin()

copyWithin() 会按照指定范围浅复制数组中的部分内容，然后将它们插入到指定索引开始的位置。

let ints, reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; 
reset(); 

// 从 ints 中复制索引 0 开始的内容，插入到索引 5 开始的位置
// 在源索引或目标索引到达数组边界时停止
ints.copyWithin(5); 
console.log(ints); // [0, 1, 2, 3, 4, 0, 1, 2, 3, 4] 
reset(); 

// 从 ints 中复制索引 5 开始的内容，插入到索引 0 开始的位置
ints.copyWithin(0, 5); 
console.log(ints); // [5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset(); 

// 从 ints 中复制索引 0 开始到索引 3 结束的内容
// 插入到索引 4 开始的位置
ints.copyWithin(4, 0, 3); 
console.log(ints); // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9] 

---

7. 排序方法

数组有两个方法可以用来对元素重新排序：

• reverse()：将数组元素反向排列
• sort()：默认情况下，会按照升序重新排列数组元素
  (默认情况下，sort() 会在每一项上调用 String() 转型函数，然后比较字符串来决定顺序)

reverse()和 sort()都返回调用它们的数组的引用。

sort() 可以接收一个比较函数，用于判断哪个值应该排在前面。

比较函数接收两个参数
如果第一个参数应该排在第二个参数前面，就返回负值；
如果两个参数相等，就返回0；
如果第一个参数应该排在第二个参数后面，就返回正值。

function compare(value1, value2) { 
    if (value1 < value2) { 
        return -1; 
    }
    else if (value1 > value2) { 
        return 1; 
    }
    else { 
        return 0; 
    } 
}

let values = [0, 5, 10, 1, 15];

console.log(values); // [0, 5, 10, 1, 15]
values.sort(compare); 
console.log(values); // [0, 1, 5, 10, 15]

这个比较函数还可简写为一个箭头函数

values.sort((a, b) => a < b ? -1 : a > b ? 1 : 0); 

如果数组的元素是数值，或者是其 valueOf()方法返回数值的对象，比较函数还可以这么写

function compare(value1, value2) { 
	return value1 - value2; 
} 

console.log(values); // [0, 5, 10, 1, 15]
values.sort(compare); 
console.log(values); // [0, 1, 5, 10, 15]