ES 基础知识之Array 系列一

239 阅读3分钟

1,描述

在 JavaScript 中,数组扮演者很重要的角色,虽然它不是基本类型,而是具有以下核心特征的 Array 对象:

  • JavaScript 数组是可调整大小的,并且可以包含不同的数据类型。(当不需要这些特征时,可以使用类型化数组。)
  • JavaScript 数组不是关联数组,因此,不能使用任意字符串作为索引访问数组元素,但必须使用非负整数(或它们各自的字符串形式)作为索引访问。
  • JavaScript 数组的索引从 0 开始:数组的第一个元素在索引 0 处,第二个在索引 1 处,以此类推,最后一个元素是数组的 length 属性减去 1 的值。
  • JavaScript 数组复制操作创建浅拷贝。(所有 JavaScript 对象的标准内置复制操作都会创建浅拷贝,而不是深拷贝)。

2,创建数组

// 使用数组字面量创建的 'fruits' 数组。
const fruits = ["Apple", "Banana"];
console.log(fruits.length); // 2

// 使用 Array() 构建函数创建的 'fruits2' 数组。
const fruits2 = new Array("Apple", "Banana");
console.log(fruits2.length); // 2

// 使用 String.prototype.split() 方法创建的 'fruits3' 数组。
const fruits3 = "Apple, Banana".split(", ");
console.log(fruits3.length); // 2

3,Array.isArray()

Array.isArray()静态方法用于确定传递的值是否是一个Array

console.log(Array.isArray([1, 3, 5]));
// Expected output: true

console.log(Array.isArray('[]'));
// Expected output: false

console.log(Array.isArray(new Array(5)));
// Expected output: true

console.log(Array.isArray(new Int16Array([15, 33])));
// Expected output: false

console.log(Array.isArray(null))
// Expected output: false

console.log(Array.isArray(undefined))
// Expected output: false

4,Array.prototype.at()

at()方法接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。

const array1 = [5, 12, 8, 130, 44];

// 正数从前往后找
let index = 2;

console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// Expected output: "Using an index of 2 the item returned is 8"

// 负数从后往前找
index = -2;

console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
// Expected output: "Using an index of -2 item returned is 130"

5,Array.prototype.concat()

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

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

// 对象是前拷贝合并
const arr1 = [{a: 1}];
const arr2 = [{b: 2}];
const arr3 = arr1.concat(arr2);
console.log(arr1, arr3) // [{a: 1}]  [{a: 1}, {b: 2}]

arr1[0].a = 5;
console.log(arr1, arr3) // [{a: 5}]  [{a: 5}, {b: 2}]

6,Array.prototype.copyWithin()

copyWithin()方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

// 方法声明
// target 目标位置
// start  开始位置
// end    结束为止,如果不传,就从开始位置直到数组结尾
function copyWithin(target: number, start: number, end?: number)

// 例子
const array1 = ['a', 'b', 'c', 'd', 'e'];

// Copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// Expected output: Array ["d", "b", "c", "d", "e"]

// Copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// Expected output: Array ["d", "d", "e", "d", "e"]

7,Array.prototype.entries()

entries()方法返回一个新的数组迭代器 (en-US)对象,该对象包含数组中每个索引的键/值对。

// 声明,返回一个迭代器
entries(): IterableIterator<[number, T]>;

// 例子
const array1 = ['a', 'b', 'c'];

const iterator1 = array1.entries();

console.log(iterator1.next().value);
// Expected output: Array [0, "a"]

console.log(iterator1.next().value);
// Expected output: Array [1, "b"]

8, Array.prototype.keys()

keys()方法返回一个新的数组迭代器 (en-US)对象,其中包含数组中每个索引的键。

// 声明,返回一个迭代器
/**
  * Returns an iterable of keys in the array
  */
keys(): IterableIterator<number>;

// 例子
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// Expected output: 0
// Expected output: 1
// Expected output: 2

9, Array.prototype.values()

values()方法返回一个新的数组迭代器 (en-US)对象,该对象迭代数组中每个元素的值。

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();

for (const value of iterator) {
  console.log(value);
}

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

10, Array.prototype.join()

join()方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。

// 声明
// separator 如果不传,就默认 ','
join(separator?: string): string;

// 例子
const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// Expected output: "Fire,Air,Water"

console.log(elements.join(''));
// Expected output: "FireAirWater"

console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"