创建数组

// 1. 使用 new Array 构造函数创建，new 可以省略
const arr = new Array();
const arr = Array(3).fill(0); // [0, 0, 0]

// 2. 使用数组字面量创建数组
const arr = [1, 2];

// 3. 从其他类型转换成数组 Array.from 方法
// const arr = Array.from(<arrayLike object>);

const arrayLikeObj = {
  0: "1", // 这些 key 必须是从 0 开始数
  1: "2",
  length: 2, // 必须有这个 length 才行
};

const arr = Array.from(arrayLike, (item) => item * 2); // 把伪数组转换成真实数组 [2, 4]

// Array.from(arrayLike, mapFn)
const dp = Array.from({ length: m }, () => Array(n).fill(0));

检测数组

1️⃣ arr instanceof Array

2️⃣ Array.isArray(arr)

迭代器方法

Array 的原型上暴露了 3 个用于检索数组内容的方法：keys()、values() 和 entries()

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

数组直接调用这 3 个方法，返回的是一个迭代器，返回值可以直接使用 for...of 语句遍历，也可以直接用 Array.from() 方法转换成数组

Object.keys(arr) 和 Object.values()的返回值是数组，Object.entries() 的返回值是二维数组

const arr = ["foo", "bar", "baz"];

console.log(arr.keys()); // Object [Array Iterator] {}

Array.from(arr.keys()); // [0, 1, 2]
Array.from(arr.values()); // ["foo", "bar", "baz"]
Array.from(arr.entries()); // [[0, "foo"], [1, "bar"], [2, "baz"]]

for (const [key, value] of arr.entries()) {
  console.log(key);
  console.log(value);
}

复制和填充方法

1️⃣ arr.fill(value, start, end)

• 用固定值填充数组

• 参数：

  • value: 要填充的值
  • start: 开始填充的起始索引（可选，默认为 0）
  • end: 结束填充的索引（可选，默认为数组长度）

• 返回修改后的数组（原数组被修改）

• 示例：

  const arr = [1, 2, 3, 4, 5];
  arr.fill(0); // [0, 0, 0, 0, 0]
  
  const arr2 = [1, 2, 3, 4, 5];
  arr2.fill(0, 1, 3); // [1, 0, 0, 4, 5] - 从索引1到索引2填充0
  
  const arr3 = [1, 2, 3, 4, 5];
  arr3.fill(0, 2); // [1, 2, 0, 0, 0] - 从索引2到末尾填充0

2️⃣ arr.copyWithin(target, start, end)

• 将数组的一部分复制到同一数组中的另一个位置

• 参数：

  • target: 要复制到的目标索引位置
  • start: 开始复制的起始索引（可选，默认为 0）
  • end: 结束复制的索引（可选，默认为数组长度）

• 返回修改后的数组（原数组被修改）

• 示例：

  const arr = [1, 2, 3, 4, 5];
  arr.copyWithin(0, 3); // [4, 5, 3, 4, 5] - 从索引3开始复制到索引0
  
  const arr2 = [1, 2, 3, 4, 5];
  arr2.copyWithin(1, 3, 5); // [1, 4, 5, 4, 5] - 从索引3到索引4复制到索引1
  
  const arr3 = [1, 2, 3, 4, 5];
  arr3.copyWithin(2, 0, 2); // [1, 2, 1, 2, 5] - 从索引0到索引1复制到索引2

栈和队列方法 (4)

会改变原数组

const arr = [1, 2, 3];

// 1.push() 在数组结尾添加元素，返回新数组的长度
arr.push("hello"); // 4

// 2.pop() 在数组结尾删除一个元素，返回被删除的元素
arr.pop(); // 3

// 3.shift() 在数组开头删除一个元素，返回被删除的元素
arr.shift(); // 1

// 4.unshift() 在数组开头添加一个元素，返回新数组的长度
arr.unshift("hello"); // 4

排序方法 (2)

会改变原数组

默认的排序方法会将数组元素转换为字符串，然后比较字符串中字符的 UTF-16 编码顺序来进行排序

// 1.sort() 对数组排序，返回排序后的数组（会改变原数组，默认升序）
const a = arr.sort(); // a 指向 arr 的地址，当 arr 再发生变化时，a 也会跟着变化

const arr = [3, 15, 8, 29, 102, 22];
arr.sort();
console.log(arr); // [102, 15, 22, 29, 3, 8]

// sort() 方法可以接收一个比较函数，用于判断哪个值应该排在前面。比较函数接收两个参数，如果第一个参数应该排在第二个参数前面，就返回负值；如果两个参数相等，就返回 0；如果第一个参数应该排在第二个参数后面，就返回正值

arr.sort((a, b) => a - b); // 升序
arr.sort((a, b) => b - a); // 降序
arr.sort((a, b) => 0.5 - Math.random()); // 随机排序

// 2.reverse() 反转数组，返回反转后的数组
arr.reverse(); // [3, 2, 1]

操作方法 (3)

1️⃣ arr.concat()

// concat() 连接两个数组，返回连接后的数组；不改变原数组(可以实现浅拷贝)

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

2️⃣ arr.slice()

// slice(start, end) 用于创建一个包含原有数组中一个或多个元素的新数组 (裁剪数组)
// 左闭右开 end 可取负值(可以实现浅拷贝)
// 当数组里面的值是基本类型时为深拷贝；当数组里面的值是引用类型时为浅拷贝 concat 同理

const arr = [1, 2, 3, 4, 5];
const newArr = arr.slice(2, 4); // [3, 4] 不改变原数组

3️⃣ arr.splice() 会改变原数组

// splice() 在数组指定位置添加或删除元素
// 返回被删除的元素组成的数组（如果没有删除元素，则返回空数组）

arr.splice(index, howmany, ...items);
// index       表示从哪里开始添加或删除元素，包含这个位置的元素
// howmany     表示删除多少个元素，如果未规定则删除之后所有元素
// ...items    表示需要添加的元素们
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits); // ["Banana", "Orange", "Lemon","Kiwi", "Mango"]

搜索和位置方法

1️⃣ arr.indexof()

// indexOf() 返回数组中指定元素的第一个索引号，找不到则返回 -1（同理有 lastIndexOf() 从后往前找）
const arr = ["a", "b", "c"];
const index = arr.indexOf("b"); // 1

2️⃣ arr.lastIndexof()

3️⃣ arr.includes()

// arr.includes(item) 表示数组中是否包含某个元素，返回布尔值
const arr = ["a", "b", "c"];
const isTrue = arr.includes("a"); // true

4️⃣ arr.find()

// arr.find((item, index, array) => {}) 用于找出【第一个】符合条件的数组成员，如果没有找到则返回 undefined
const arr = [
  { id: 1, name: "张三" },
  { id: 2, name: "李四" },
];
const target = arr.find((item, index) => item.id == 2); // { id: 2, name: '李四' }

5️⃣ arr.findIndex()

// arr.findIndex((item, index, array) => {} ) 用于找出【第一个】符合条件的数组成员的索引，如果没有找到则返回 -1
const arr = [10, 20, 50];
const index = arr.findIndex((item) => item > 15); // 1

其他属性和方法

const arr = [1, 2, 3];
/* ********** 其他数组的方法 ********** */
// length属 性，返回数组长度
arr.length; // 3

// toString() 以逗号分隔的字符串返回数组
const a = arr.toString(); // "1,2,3"  等同于 arr.join()

// join() 把数组中的所有元素转换一个字符串，默认输出以逗号分隔，可传入分隔符参数；不改变原数组
const arr1 = [1, 2, 3];
const arr2 = arr1.join("*"); // "1*2*3"

// delete 运算符 删除数组某个元素，返回是否删除成功的布尔值；该方法会在数组中留下 undefined
let arr = [1, 2, 3];
a = delete arr[1]; // ture     sarr = [1, undefined, 3]

数组迭代和归并

数组迭代 (5)

1️⃣ Array.forEach()

// Array.forEach(callback(item, index, array))
// 对数组每一项都运行传入的函数，没有返回值

const arr = [1, 2, 3];

arr.forEach((item，index) => {
  console.log(index); // 0, 1, 2
	console.log(item); // 1, 2, 3
});

实现一个自己的 forEach

Array.prototype.myForEach = function (callback) {
  // 1. 保存数组长度
  const length = this.length;

  // 2. 判断 callback 是否为函数
  if (typeof callback !== "function") {
    throw new TypeError(callback + " is not a function");
  }

  // 3. 遍历数组
  let k = 0;

  /**
   * 辅助函数，判断对象是否存在某个属性
   * 确保只处理实际存在的数组元素，跳过稀疏数组中的空位
   */
  function _hasProperty(obj, key) {
    const desc = Reflect.getOwnPropertyDescriptor(obj, key);
    // {
    //   value: '1',
    //   writable: true,
    //   enumerable: true,
    //   configurable: true
    // }
    return !!desc;
  }

  while (k < length) {
    const pk = String(k);
    if (_hasProperty(this, pk)) {
      const kValue = this[pk];
      callback.call(this, kValue, k, this);
    }
    k++;
  }
};

2️⃣ Array.map()

// Array.map(callback(item, index, array))
// 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组，需要 return

const newArr = arr.map((item) => item + 1); // arr2 = [2, 3, 4]

const newArr = arr.map(Number); // 将字符串数组转换成数字数组，非数字 NaN

3️⃣ Array.filter()

// Array.filter(callback(item, index, array))
// 对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回

const newArr = arr.filter((value) => value > 2);

4️⃣ Array.every()

// Array.every(callback(item, index, array))
// 对数组每一项都运行传入的函数，如果对每一项函数都返回 true，则这个方法返回 true
// 检查所有数组值是否通过测试，返回布尔值

const isTrue = arr.every((value) => value > 2); // false

5️⃣ Array.some()

// Array.some(callback(item, index, array))
// 对数组每一项都运行传入的函数，如果有一项函数返回 true，则这个方法返回 true
// 检查是否有数组值是否通过测试，返回布尔值

const isTrue = arr.every((value) => value > 2); // false

数组归并 (2)

1️⃣ Array.reduce()

// Array.reduce(callback(prev, item, index, array), init)
// 对数组每一项都运行传入的函数，以生成单个值
// prev 表示上一次调用回调函数的返回值；item 表示当前元素；index 表示当前元素索引；array 表示原数组
// init 表示初始化时 prev 的值，如果不指定则是默认第一个元素，item 从 1 开始；如果指定了，item 就从 0 开始

const sum = arr.reduce((prev, item) => prev + item); // 数组元素求和

2️⃣ Array.reduceRight()

for 语句

// for...in 遍历数组的 key
for (const key in arr) {
  console.log(arr[key]);
}

// for...of 遍历数组的 value
for (const val of arr) {
  console.log(val);
}