以JS数组原型扩展为例，深入剖析函数运行机制

2023-05-16 02:25:51

揭秘 JavaScript 数组原型的幕后运作机制

JavaScript 数组原型提供了强大的函数库，可帮助开发者轻松高效地操纵数组数据。从添加、删除到修改，这些函数的底层运作机制至关重要。本文将深入剖析 push、pop、shift、unshift、slice 和 splice 这几个关键函数，揭开它们的运作奥秘。

Array.prototype.push

push 函数的作用是将一个或多个元素添加到数组末尾，并返回数组的新长度。其语法如下：

push(...items)

当调用 push 时，它首先检查数组的长度。然后，它将传入的元素附加到数组的末尾。最后，它返回修改后的数组长度。

Array.prototype.pop

pop 函数的作用是删除并返回数组最后一个元素。其语法如下：

pop()

pop 函数的工作原理与 push 相似。它首先检查数组的长度。如果没有元素，它会返回 undefined。否则，它会删除数组最后一个元素并返回它。

Array.prototype.shift

shift 函数的作用是删除并返回数组第一个元素。其语法如下：

shift()

与 pop 类似，shift 函数也会先检查数组长度。如果没有元素，它会返回 undefined。否则，它会删除并返回数组第一个元素。

Array.prototype.unshift

unshift 函数的作用是将一个或多个元素添加到数组开头，并返回数组的新长度。其语法如下：

unshift(...items)

unshift 函数与 push 的工作原理类似。它首先检查数组长度，然后将传入元素添加到数组开头。最后，它返回修改后的数组长度。

Array.prototype.slice

slice 函数的作用是创建并返回一个包含数组指定范围元素的新数组。其语法如下：

slice(start, end)

slice 函数首先检查数组长度。然后，它创建新数组，并将从 start 到 end （不包括 end）的元素复制到其中。最后，它返回新创建的数组。

Array.prototype.splice

splice 函数的功能更加强大。它可以删除指定范围的元素并可选地插入新元素。其语法如下：

splice(start, deleteCount, ...items)

splice 函数首先检查数组长度。然后，它删除从 start 到 end （不包括 end）的元素。最后，它将传入的新元素插入到删除元素的位置。

代码示例

为了更好地理解这些函数的用法，让我们看一些代码示例：

const arr = [1, 2, 3, 4, 5];

// 使用 push 添加元素
arr.push(6); // [1, 2, 3, 4, 5, 6]

// 使用 pop 删除并返回最后一个元素
const lastElement = arr.pop(); // lastElement = 6; arr = [1, 2, 3, 4, 5]

// 使用 shift 删除并返回第一个元素
const firstElement = arr.shift(); // firstElement = 1; arr = [2, 3, 4, 5]

// 使用 unshift 添加元素到数组开头
arr.unshift(0); // [0, 2, 3, 4, 5]

// 使用 slice 创建新数组
const newArr = arr.slice(1, 3); // newArr = [2, 3]

// 使用 splice 删除并插入元素
arr.splice(2, 1, 'a', 'b'); // arr = [0, 2, 'a', 'b', 5]