参考手册
JAVASCRIPT 教程
JavaScript 数组
JavaScript 数组排序

JavaScript 数组方法

JavaScript 数组的真正作用在数组方法中，包括转换、拼接、剪切、合并等方法。

把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>toString()</h2>
  9. <p>toString() 方法以逗号分隔的字符串返回数组：</p>
  11. <p id="demo">
  13. <script>
  14. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  15. document.getElementById("demo").innerHTML = fruits.toString();
  16. </script>
  18. </body>
  19. </html>
运行一下

join() 方法也可将所有数组元素通过分隔符连接成为一个字符串。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>join()</h2>
  9. <p>join() 方法将数组元素连接成一个字符串。</p>
  11. <p>在这个例子中我们使用“*”作为元素之间的分隔符：</p>
  13. <p id="demo">
  15. <script>
  16. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  17. document.getElementById("demo").innerHTML = fruits.join(" * ");
  18. </script>
  20. </body>
  21. </html>
运行一下

Popping 和 Pushing

在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：从数组中取出，或向数组推入元素。

Popping

pop() 方法从数组中取出并删除最后一个元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>pop()</h2>
  9. <p>pop() 方法从数组中取出并删除最后一个元素。</p>
  11. <p>pop() 方法的返回值是已删除的项目。</p>
  13. <p id="demo1">
  14. <p id="demo2">
  15. <p id="demo3">
  17. <script>
  18. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  19. document.getElementById("demo1").innerHTML = fruits;
  20. document.getElementById("demo2").innerHTML = fruits.pop();
  21. document.getElementById("demo3").innerHTML = fruits;
  22. </script>
  24. </body>
  25. </html>
运行一下

Pushing

push() 方法（在数组结尾处）向数组添加一个新的元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>push()</h2>
  9. <p>push() 方法将新元素追加到数组的最后一个位置。</p>
  11. <button onclick="myFunction()">试一试</button>
  13. <p id="demo">
  15. <script>
  16. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  17. document.getElementById("demo").innerHTML = fruits;
  19. function myFunction() {
  20.   fruits.push("西瓜");
  21.   document.getElementById("demo").innerHTML = fruits;
  22. }
  23. </script>
  25. </body>
  26. </html>
运行一下

位移元素方法

shift() 位移与 Pop() 等同，但是处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素依次“位移”到更前的索引。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>shift()</h2>
  9. <p>shift() 方法删除数组的第一个元素（并将所有其他元素“移位”到左侧），并返回位移元素：</p>
  11. <p id="demo1">
  12. <p id="demo2">
  13. <p id="demo3">
  15. <script>
  16. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  17. document.getElementById("demo1").innerHTML = fruits;
  18. document.getElementById("demo2").innerHTML = fruits.shift();
  19. document.getElementById("demo3").innerHTML = fruits;
  21. </script>
  23. </body>
  24. </html>
运行一下

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>unshift()</h2>
  9. <p>unshift() 方法将新元素添加到数组的开头。</p>
  11. <button onclick="myFunction()">试一试</button>
  13. <p id="demo">
  15. <script>
  16. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  17. document.getElementById("demo").innerHTML = fruits;
  19. function myFunction() {
  20.   fruits.unshift("柠檬");
  21.   document.getElementById("demo").innerHTML = fruits;
  22. }
  23. </script>
  25. </body>
  26. </html>
运行一下

通过索引号来追加和更改元素

数组索引（下标）以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <p>使用索引号访问数组元素：</p>
  9. <p id="demo1">
  10. <p id="demo2">
  12. <script>
  13. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  14. document.getElementById("demo1").innerHTML = fruits;
  15. fruits[0] = "柠檬";
  16. document.getElementById("demo2").innerHTML = fruits;
  17. </script>
  19. </body>
  20. </html>
运行一下

length 属性提供了向数组追加新元素的简易方法：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <p>length 属性提供了一种在不使用 push() 方法的情况下将新元素附加到数组的简便方法。</p>
  9. <button onclick="myFunction()">试一试</button>
  11. <p id="demo">
  13. <script>
  14. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  15. document.getElementById("demo").innerHTML = fruits;
  17. function myFunction() {
  18.   fruits[fruits.length] = "柠檬";
  19.   document.getElementById("demo").innerHTML = fruits;
  20. }
  21. </script>
  23. </body>
  24. </html>
运行一下

删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <p>删除元素会在数组中留下未定义的孔。</p>
  9. <p id="demo1">
  10. <p id="demo2">
  12. <script>
  13. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  14. document.getElementById("demo1").innerHTML =
  15. "第一种水果是：" + fruits[0];
  16. delete fruits[0];
  17. document.getElementById("demo2").innerHTML =
  18. "第一种水果是：" + fruits[0];
  19. </script>
  21. </body>
  22. </html>
运行一下

使用 delete 会在数组留下未定义的空洞。所以请使用 pop() 或 shift() 取而代之。

拼接数组

splice() 方法可用于向数组添加新项：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>splice()</h2>
  9. <p>splice() 方法将新元素添加到数组中。</p>
  11. <button onclick="myFunction()">试一试</button>
  13. <p id="demo1">
  14. <p id="demo2">
  15. <p id="demo3">
  17. <script>
  18. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  19. document.getElementById("demo1").innerHTML = "原数组：<br>" + fruits;
  20. function myFunction() {
  21.   var removed = fruits.splice(2, 0, "柠檬", "西瓜");
  22.   document.getElementById("demo2").innerHTML = "新数组：<br>" + fruits;
  23.   document.getElementById("demo3").innerHTML = "已删除项：<br> " + removed;
  24. }
  25. </script>
  27. </body>
  28. </html>
运行一下

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“柠檬”，“西瓜”）定义要添加的新元素。

removed 则接受到 splice() 方法返回一个包含已删除项的数组：

使用 splice() 来删除元素

通过参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>splice()</h2>
  9. <p>splice() 方法可用于删除数组元素。</p>
  11. <button onclick="myFunction()">试一试</button>
  13. <p id="demo">
  15. <script>
  16. var fruits = ["香蕉", "橘子", "苹果", "芒果"];
  17. document.getElementById("demo").innerHTML = fruits;
  18. function myFunction() {
  19.   fruits.splice(0, 1);
  20.   document.getElementById("demo").innerHTML = fruits;
  21. }
  22. </script>
  24. </body>
  25. </html>
运行一下

第一个参数（0）定义新元素应该被添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>concat()</h2>
  9. <p>concat() 方法用于合并（连接）数组：</p>
  11. <p id="demo">
  13. <script>
  14. var myGirls = ["Emma", "Isabella"];
  15. var myBoys = ["Jacob", "Michael", "Ethan"];
  16. var myChildren = myGirls.concat(myBoys);
  18. document.getElementById("demo").innerHTML = myChildren;
  19. </script>
  21. </body>
  22. </html>
运行一下

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>concat()</h2>
  9. <p>concat() 方法用于合并（连接）数组：</p>
  11. <p id="demo">
  13. <script>
  14. var arr1 = ["Emma", "Isabella"];
  15. var arr2 = ["Jacob", "Michael", "Ethan"];
  16. var arr3 = ["Joshua", "Daniel"];
  18. var myChildren = arr1.concat(arr2, arr3);
  20. document.getElementById("demo").innerHTML = myChildren;
  21. </script>
  23. </body>
  24. </html>
运行一下

concat() 方法也可以将值作为参数，与数组直接合并：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>concat()</h2>
  9. <p>concat() 方法也可以将值合并到数组：</p>
  11. <p id="demo">
  13. <script>
  14. var arr1 = ["Emma", "Isabella"];
  15. var myChildren = arr1.concat(["Jacob", "Michael", "Ethan"]);
  16. document.getElementById("demo").innerHTML = myChildren;
  17. </script>
  19. </body>
  20. </html>
运行一下

剪切数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （"Orange"）开始切出一段数组：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>slice()</h2>
  9. <p>此例从数组元素 1（“橘子”）开始切出数组的一部分：</p>
  11. <p id="demo">
  13. <script>
  14. var fruits = ["香蕉", "橘子", "柠檬", "苹果", "芒果"];
  15. var citrus = fruits.slice(1);
  16. document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
  17. </script>
  19. </body>
  20. </html>
运行一下

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 （"Apple"）开始切出一段数组：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>slice()</h2>
  9. <p>此例从数组元素 3（“Apple”）开始切出数组的一部分：</p>
  11. <p id="demo">
  13. <script>
  14. var fruits = ["香蕉", "橘子", "柠檬", "苹果", "芒果"];
  15. var citrus = fruits.slice(3);
  16. document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
  17. </script>
  19. </body>
  20. </html>
运行一下

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>slice()</h2>
  9. <p>当给 slice() 方法赋予两个参数时，它从 <i>start</i> 参数中选择数组元素，直到（但不包括）<i>end</i> 参数：</p>
  11. <p id="demo">
  13. <script>
  14. var fruits = ["香蕉", "橘子", "柠檬", "苹果", "芒果"];
  15. var citrus = fruits.slice(1,3);
  16. document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
  17. </script>
  19. </body>
  20. </html>
运行一下

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>slice()</h2>
  9. <p>此例从数组元素 2（“Lemon”）开始切出数组的一部分：</p>
  11. <p id="demo">
  13. <script>
  14. var fruits = ["香蕉", "橘子", "柠檬", "苹果", "芒果"];
  15. var citrus = fruits.slice(2);
  16. document.getElementById("demo").innerHTML = fruits + "<br><br>" + citrus;
  17. </script>
  19. </body>
  20. </html>
运行一下

自动 toString()

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面例子两种方法将产生相同的结果：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. <h1>JavaScript 数组方法</h1>
  7. <h2>toString()</h2>
  9. <p>toString() 方法以逗号分隔的字符串返回数组：</p>
  11. <p id="demo1">
  12. <p id="demo2">
  14. <script>
  15. var fruits = ["香蕉", "橘子", "柠檬", "苹果", "芒果"];
  16. document.getElementById("demo1").innerHTML = fruits.toString();
  17. document.getElementById("demo2").innerHTML = fruits;
  18. </script>
  20. </body>
  21. </html>
运行一下

所有 JavaScript 对象都拥有 toString() 方法。

完整的数组参考手册

如需完整的参考手册，请访问本站完整的 JavaScript 数组参考手册。

JavaScript 数组
JavaScript 数组排序

分类导航

HTMLHTML5JAVASCRIPTCSSjQueryBootstrap 3 教程SassReactHTMl 颜色教程JSONXMLXPathTypeScriptAppML 教程XLinkXPointerXQueryXFormsXsltXML SchemaXSL-FOWeb ServiceWSDSOAPW3CSVGDHTMLTCP/IPjQuery Mobile 教程XHTML