JavaScript 中的 Shift() 与 pop() 方法?

front end technologyjavascriptweb development

要使用 JavaScript 从数组中删除元素,请使用 shift() 和 pop() 函数。但是,它们之间略有区别。pop() 会从数组中删除最后一个元素,而 shift() 会从数组中删除第一个元素。

使用 shift() 方法时,在删除第零个位置的元素并将后续索引的值向下移动后,将返回已删除的值。如果 length 属性为 0,则返回值未定义。

修改数据的函数是 shift()。this 的内容和长度都会改变。如果您希望 this 的值保持不变但返回删除了第一个项目的新数组,请改用 arr.slice(1)。

Array.prototype.shift() 的通用性质允许将其调用或应用于类似于数组的对象。缺少表示最后一个连续的以零为基础的数值属性的长度属性的对象的行为可能毫无意义。

  • 如果数组为空,此函数将返回未定义,但 pop() 方法将已删除的元素重新转换为数组。如果数组为空,此函数的返回值未定义。

  • 这两种技术都用于将数组的长度减少 1。

  • 对象数组的内置函数是 shift() 和 pop()。

  • 这两种技术都会修改初始数组。

语法

shift()
array.shift()

返回值

数组的已删除元素;如果数组为空,则未定义。

Shift() 方法

示例 1

在此示例中,让我们了解 JavaScript 中的数组 shift() 方法。

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function myFunc() {
      
         // 原始数组
         let tutpoint = ["Tutorialspoint ", "has free Online", "Tutorials", "and Courses"];

         // 检查数组中的条件
         let result = tutpoint.shift();
         document.write(result);
         document.write("<br />");
         document.write(tutpoint);
      }
      myFunc();
   </script>
</body>
</html>

示例 2

.shift() 方法还允许我们从现有数组的开头删除一个数组、一个对象或两者。我们以取出开头的数组为例。

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let sports = [
         ["Football", " Cycling"],"Wrestling", " Shooting"," Hockey", " Badminton " ];
         let result = sports.shift();
         document.write(result +"<br>"); //output : [ "Football", "Cycling"]
         document.write(sports); //output: ["Wrestling","Shooting","Hockey", "Badminton"]
   </script>
</body>
</html>

pop() 方法

数组中的最后一个元素由 pop() 方法删除,然后返回被删除的元素。使用此技术可以改变数组的长度。数组中的最后一个元素由 pop() 方法删除,然后返回调用者被删除的值。如果对空数组调用 pop(),则返回 Undefined。Array.prototype。Pop() 和 shift() 的行为类似,尽管 shift() 仅影响数组的第一个条目。

使用 pop() 方法会发生变异。它的内容和长度都会改变。如果您希望返回一个删除了最后一个条目的新数组,同时保持它的当前值。Array.prototype.pop() 是一种可以调用或应用于类似于数组的对象的方法;这是故意为之。

没有 length 属性的对象的行为(该属性反映连续的、从零开始的数值特征字符串的最终值)可能毫无意义。

语法

pop()
array.pop()

返回值

被删除的数组元素;如果数组为空,则未定义。

示例 3

在此示例中,让我们了解如何使用 Array.pop() 函数从现有数组的末尾删除单个项目。

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      function myFunc() {
         var langArr = ['JavaScript', 'React JS', 'Angular', 'Tutorialspoint'];

         // You will see the last element will be popping from the array
         document.write(langArr.pop());
      }
      myFunc();
   </script>
</body>
</html>

示例 4

pop() 方法的工作原理与 shift() 方法类似,它会从现有数组的开头删除一个数组、一个对象或两者。在此示例中,我们将从数组的末尾取出一个对象。

<!DOCTYPE html>
<html>
<title>Shift() vs pop() methods in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>
      let sports = [ 'Football', ' Cycling',' Wrestling', ' Shooting',['Hockey',' Badminton'] ];
      let result = sports.pop();
      document.write(result +'<br>'); //output: {'H':'Hockey','B':'Badminton'}
      document.write(sports); //output: [ 'Football', 'Cycling','Wrestling', 'Shooting' ]
   </script>
</body>
</body>
</html>

简介

使用 Array.shift() 方法可以快速删除任何数组的第一个元素。该方法修改起始数组的长度并返回被删除项的值。可以使用此技术使用任何数据类型的数组。该方法通常在循环中使用,以提供最佳结果。但是,在将其用于大型数组时必须采取预防措施,因为如果您不了解方法执行的概念,它可能会大大降低程序的生产力。

使用数组的技术之一是 pop()。删除数组的最后一个元素,修改原始数组,然后返回被删除的元素。这是它的三个关键特性。可以多次使用 pop() 方法,以至少填充一个条目。否则,将出现"未定义"错误。


相关文章