前端八股总结JS分支-数组常用方法

总结一下数组的常用方法

参考CSDN：青松pine

简单属性：

一、构建数组及其长度

• 数组字面量方法：const fruits = ['apple', 'banana', 'cherry'];

• Array构造函数：

  • new Array(1, 2, 3)（ [ 1 , 2 , 3 ] ）

  • new Array(5)（长度为5的空数组）

• String.prototype.split()：const fruits3 = "Apple, Banana".split(", ");

（1）Array.from()

从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

1、从字符串构建

Array.from("foo");
// [ "f", "o", "o" ]

2、从Set构建

const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

3、从Map构建

const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

4、从类对象构建

function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [ 1, 2, 3 ]

5、箭头函数和 Array.from()

// 使用箭头函数作为映射函数去操作多个元素
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// 生成一个数字序列。因为数组在每个位置都使用 `undefined` 初始化，下面的 `v` 值将是 `undefined`
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

（2）Array.of()

比较独特的是使用构造函数创建的时候，只写一个数字会创建长度为它的空数组，而这个方法只会直接创建含有那个数字的数组。

Array.of();  //[]
Array.of(1,2,3,4);   //[1,2,3,4]
Array.of(5);   //[5]

（3）长度

🐣Array.length是一个小于2^32的非负整数

数组对象会观察 length 属性，并自动将 length 值与数组的内容同步。这意味着：

• 设置 length 小于当前长度的值将会截断数组——超过新 length 的元素将被删除。
• 设置超过当前 length 的任何数组索引（小于 232 的非负整数）将会扩展数组——length 属性增加以反映新的最高索引。
• 将 length 设置为无效值（例如负数或非整数）会引发 RangeError 异常。

当 length 被设置为比当前长度更大的值时，数组通过添加空槽来扩展，而不是实际的 undefined 值。空槽与数组方法有一些特殊的交互作用；详见数组方法和空槽。

二、按顺序排列的数组方法

（1）at()

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数（即index+array.length位置）

返回数组中与给定索引匹配的元素。如果 index < -array.length 或 index >= array.length，则总是返回 undefined，而不会尝试访问相应的属性。

🦃非数组对象也可以调用：

const arrayLike = {
  length: 2,
  0: "a",
  1: "b",
};
console.log(Array.prototype.at.call(arrayLike, -1)); // "b"

（2）concat()

concat 方法创建一个新数组。该数组将首先由调用它的对象中的元素填充

const num1 = [1, 2, 3];const num2 = [4, 5, 6];const num3 = [7, 8, 9];
const numbers = num1.concat(num2, num3);//[1, 2, 3, 4, 5, 6, 7, 8, 9]

const letters = ["a", "b", "c"];
const alphaNumeric = letters.concat(1, [2, 3]);//['a', 'b', 'c', 1, 2, 3]

const num1 = [[1]];const num2 = [2, [3]];
const numbers = num1.concat(num2);//[[1], 2, [3]]

在稀疏数组上调用，结果的数组也是稀疏的。

（3）every

every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。（是一种迭代方法，为数组中除空槽外所有元素调用callbackFn函数，直到返回一个假值）

示例：判断一个数组是否是另一个数组的子集

const isSubset=(array1,array2)=>array2.every(el=>array1.includes(el));

（4）fill()（是修改方法）

• fill(value)
• fill(value, start)
• fill(value, start, end) （区间左闭右开）

const array1 = [1, 2, 3, 4];

//位置2到4填充0
console.log(array1.fill(0, 2, 4));//[1, 2, 0, 0]

//从位置1填充5
console.log(array1.fill(5, 1)); //[1, 5, 5, 5]

console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]

• 如果 value 是个对象，那么数组的每一项都会引用这个元素。
• 负索引从数组的末端开始计算
• 超过数组范围的索引填充会被忽略
• 如果经标准化后，end 的位置在 start 之前或之上，没有索引被填充。
• 会填充稀疏数组的空槽

🦫如果 value 是个对象，那么数组的每一项都会引用这个元素。

// 一个简单的对象，被数组的每个空槽所引用
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

（4）filter()

传入一个callback函数，只有满足条件的才会被留下。

⚠️在callback中修改数组是真的会修改原数组。

// 修改每个单词
let words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];

const modifiedWords = words.filter((word, index, arr) => {
  arr[index + 1] += " extra";
  return word.length < 6;
});

console.log(modifiedWords);
// 注意，在长度为 6 以下有三个单词，但是由于它们已经被修改，所以返回一个单词
// ["spray"]

// 添加新单词
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const appendedWords = words.filter((word, index, arr) => {
  arr.push("new");
  return word.length < 6;
});

console.log(appendedWords);
// 只有三个符合条件，即使 `words` 本身现在有更多字符长度小于 6 的单词
// ["spray" ,"limit" ,"elite"]

// 删除单词
words = ["spray", "limit", "exuberant", "destruction", "elite", "present"];
const deleteWords = words.filter((word, index, arr) => {
  arr.pop();
  return word.length < 6;
});

console.log(deleteWords);
// 注意我们没有得到 'elite'，因为它在过滤器访问到它之前就已经从 'words' 弹出了
// ["spray" ,"limit"]

（5）find

find方法返回数组中满足提供测试函数的第一个元素的值。（没有找到则返回undifined）