跳到主要内容

JS 数组常用方法

关于 JS 的一些总结, 持续更新中……

文章主要包含以下内容：

  • 数组常用方法
  • 字符串常用方法
  • 常用遍历方法&高阶函数
  • 常用正则表达式
  • 数学知识
  • JS 小技巧
  • 常用方法封装

一、数组常用方法​

1.push()​

在尾部追加，类似于压栈，原数组会变。

const arr = [1, 2, 3];
arr.push(8);
console.log(arr); // [1, 2, 3, 8]

2.pop()​

在尾部弹出，类似于出栈，原数组会变。数组的 push & pop 可以模拟常见数据结构之一：栈。

const arr = [1, 2, 3];
const popVal = arr.pop();
console.log(popVal); // 3
console.log(arr); // [1, 2]

// 数组模拟常见数据结构之一：栈
const stack = [0, 1];
stack.push(2); // 压栈
console.log(stack); // [0, 1, 2]

const popValue = stack.pop(); // 出栈
console.log(popValue); // 2
console.log(stack); // [0, 1]

3.unshift()​

在头部压入数据，类似于入队，原数组会变。

const arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]

4.shift()​

在头部弹出数据，原数组会变。数组的 push（入队） & shift（出队） 可以模拟常见数据结构之一：队列。

const arr = [1, 2, 3];
const shiftVal = arr.shift();
console.log(shiftVal); // 1
console.log(arr); // [2, 3]

// 数组模拟常见数据结构之一：队列
const queue = [0, 1];
queue.push(2); // 入队
console.log(queue); // [0, 1, 2]

const shiftValue = queue.shift(); // 出队
console.log(shiftValue); // 0
console.log(queue); // [1, 2]

5.concat()​

concat会在当前数组尾部拼接传入的数组，然后返回一个新数组，原数组不变。

const arr = [1, 2, 3];
const arr2 = arr.concat([7, 8, 9]);
console.log(arr); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 7, 8, 9]

6.indexOf()​

在数组中寻找该值，找到则返回其下标，找不到则返回-1。

const arr = [1, 2, 3];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(0)); // -1

7.includes()​

在数组中寻找该值，找到则返回true，找不到则返回false。

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

8.join()​

将数组转化成字符串，并返回该字符串，不传值则默认逗号隔开，原数组不变。

const arr = [1, 2, 3];
console.log(arr.join()); // ‘1, 2, 3’
console.log(arr); // [1, 2, 3]

9.reverse()​

翻转原数组，并返回已完成翻转的数组，原数组改变。

const arr = [1, 2, 3];
console.log(arr.reverse()); // [3, 2, 1]
console.log(arr); // [3, 2, 1]

10.slice(start，end)​

从start 开始截取到end，但是不包括end

const arr = [1, 2, 3, 4, 5];
console.log(arr.slice(1, 4)); // [2, 3, 4]
console.log(arr); // [1, 2, 3, 4, 5]

11.splice(start, deleteCount, item1, item2……)​

  • start参数 开始的位置
  • deleteCount要截取的个数
  • 后面的items为要添加的元素
  • 如果deleteCount为0，则表示不删除元素，从start位置开始添加后面的几个元素到原始的数组里面。
  • 返回值为由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。
  • 这个方法会改变原始数组，数组的长度会发生变化
const arr3 = [1, 2, 3, 4, 5, 6, 7, "f1", "f2"];
const arr4 = arr3.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
console.log(arr4); // [3, 4, 5];
console.log(arr3); // [1, 2, 6, 7, "f1", "f2"]; 原始数组被改变

const arr5 = arr3.splice(2, 0, "wu", "leon");
// 从第2位开始删除0个元素，插入"wu","leon"
console.log(arr5); // [] 返回空数组
console.log(arr3); // [1, 2, "wu", "leon", 6, 7, "f1", "f2"]; 原始数组被改变

const arr6 = arr3.splice(2, 3, "xiao", "long");
// 从第 2 位开始删除 3 个元素，插入"xiao", "long"
console.log(arr6); // ["wu", "leon", 6]
console.log(arr3); //[ 1, 2, "xiao", "long", 7, "f1", "f2"]

const arr7 = arr3.splice(2); // 从第三个元素开始删除所有的元素
console.log(arr7); // ["xiao", "long", 7, "f1", "f2"]
console.log(arr3); // [1, 2]

12.sort()​

  • 对数组的元素进行排序，并返回数组。
  • 默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的。
  • 由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。
const arr = [1, 2, 3];
arr.sort((a, b) => b - a);
console.log(arr); // [3, 2, 1]

13.toString()​

将数组转化成字符串，并返回该字符串，逗号隔开，原数组不变。

const arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // ‘1, 2, 3, 4, 5’
console.log(arr); // [1, 2, 3, 4, 5]

14.from()​

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有 length 属性的对象。

// 将类数组对象转换为真正数组
const likearr = {
  1: 11,
  2: 22,
  3: 33,
  4: 44,
  5: 55,
};
const newArr = arr.from();
console.log(newArr); // [11,22,33,44,55]

// 数组每一项都加1
console.log(newArr, (s) => s + 1); // [12, 23, 34, 45, 56]

// 字符串转数组
const str = "hello world";
console.log(str.from()); // ['h','e','l','l','o','','w','o','r','l','d'];

// 从set生成数组，随后数组去重
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set); // [ "foo", "bar", "baz" ]

// 从类数组对象（arguments）生成数组
function f() {
  return Array.from(arguments);
}

f(1, 2, 3); // [ 1, 2, 3 ]

15.of()​

Array.of() 方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。

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

16.flat()​

Array.flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

depth 参数，默认为 1，代表提取数组的结构深度

let arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]

let arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]

let arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]

//使用 Infinity，可展开任意深度的嵌套数组
let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

// 移除数组中的空项
let arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]

17. some()​

检测数组中是否有至少一个元素满足指定条件，返回 true 或 false

// 1、检查数组中是否存在大于 10 的元素
const numbers = [5, 8, 12, 3, 9];
const hasGreaterThan10 = numbers.some((element) => element > 10);
console.log(hasGreaterThan10); // true

// 2、检查数组中是否存在满足复杂条件的元素
const students = [
  { name: "Alice", score: 85 },
  { name: "Bob", score: 92 },
  { name: "Charlie", score: 76 },
];
const hasPassingScore = students.some((student) => student.score >= 80);
console.log(hasPassingScore); // true

18. every()​

检测数组中是否所有元素都满足指定条件，返回 true 或 false

// 1、检查数组中的所有元素是否都是偶数
const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every((element) => element % 2 === 0);
console.log(allEvenNumbers); // true

// 2、检查数组中的所有字符串是否都以大写字母开头
const words = ["Apple", "Banana", "Cherry", "Durian"];
const allUpperCaseStart = words.every((element) => /^[A-Z]/.test(element));
console.log(allUpperCaseStart); // true

19. 数组乱序​

function shuffle(arr) {
  return arr.sort(() => Math.random() - 0.5);
}
// test
let arr2 = [1, 2, 3, 4, 5, 6, 7, 8];
shuffle(arr2);
// [ 3, 2, 7, 8, 5, 1, 4, 6]