025_JavaScript数组方法

1. 把数组转换为字符串

1.1. toString()方法

1.1.1. toString()方法把数组转换为数组值(逗号分隔)的字符串, 并返回结果。

1.1.2. 语法

arrayObject.toString()

1.2. 自动toString()

1.2.1. JavaScript可通过引用数组名来访问完整数组, 实际上进行了自动toString():

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 以下两个输出结果相同
document.write(fruits);
document.write(fruits.toString());

1.3. join()方法

1.3.1. join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。它的行为类似toString()。

1.3.2. 语法

arrayObject.join(separator)

1.3.3. 参数

1.3.4. join()方法返回一个字符串。该字符串是通过把arrayObject的每个元素转换为字符串, 然后把这些字符串连接起来, 在两个元素之间插入separator字符串而生成的。

1.3.5. 实例

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.write(fruits.join(" | "));

1.4. 例子

1.4.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>把数组转换为字符串</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + '<br />'); document.write(fruits.toString() + '<br />'); document.write(fruits.join(" * "));</script></body>
</html>

1.4.2. 效果图

2. 添加和删除数组元素

2.1. pop()方法

2.1.1. pop()方法从数组中删除最后一个元素, 返回值是"被弹出"的值。

2.1.2. 语法

arrayObject.pop()

2.1.3. pop()方法将删除arrayObject的最后一个元素, 把数组长度减1, 并且返回它删除的元素的值。如果数组已经为空, 则pop()不改变数组, 并返回undefined值。

2.2. push()方法

2.2.1. push()方法可向数组的末尾添加一个或多个元素, 并返回新的长度。

2.2.2. 语法

arrayObject.push(newelement1, newelement2, ...., newelementX)

2.2.3. 参数

2.2.4. push()方法可把它的参数顺序添加到arrayObject的尾部。它直接修改arrayObject, 而不是创建一个新的数组。push()方法和pop()方法使用数组提供的先进后出栈的功能。

2.3. 例子

2.3.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>添加和删除数组元素</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + '<br />'); var fruits1 = fruits.pop();  document.write(fruits1 + '<br />'); document.write(fruits + '<br />'); var fruits2 = fruits.push("Pear");         document.write(fruits2 + '<br />');document.write(fruits + '<br />'); var fruits3 = fruits.push("Peach", "pineapple");document.write(fruits3 + '<br />');document.write(fruits + '<br />'); </script></body>
</html>

2.3.2. 效果图

3. 位移数组元素

3.1. shift()方法

3.1.1. shift()方法会删除首个数组元素, 并把所有其他元素"位移"到更低的索引, 方法返回被移出的元素。

3.1.2. 语法

arrayObject.shift()

3.1.3. 如果数组是空的, 那么shift()方法将不进行任何操作, 返回undefined值。请注意, 该方法不创建新数组, 而是直接修改原有的arrayObject。

3.2. unshift()方法

3.2.1. unshift()方法在开头向数组添加新元素, 并"反向位移"旧元素, 方法返回新数组的长度。

3.2.2. 语法

arrayObject.unshift(newelement1, newelement2, ...., newelementX)

3.2.3. 参数

3.2.4. unshift()方法将把它的参数插入arrayObject的头部, 并将已经存在的元素顺次地移到较高的下标处, 以便留出空间。该方法的第一个参数将成为数组的新元素0, 如果还有第二个参数, 它将成为新的元素1, 以此类推。

3.3. 例子

3.3.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>位移数组元素</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + '<br />'); var fruits1 = fruits.shift();      document.write(fruits1 + '<br />'); document.write(fruits + '<br />');var fruits2 = fruits.unshift("Pear");       document.write(fruits2 + '<br />');document.write(fruits + '<br />');var fruits3 = fruits.unshift("Peach", "pineapple");document.write(fruits3 + '<br />');document.write(fruits + '<br />'); </script></body>
</html>

3.3.2. 效果图

4. delete删除数组元素

4.1. 因为数组是对象, 所以可以使用delete关键字来删除数组元素, 元素改为undefined, 因此数组会留下未定义的空洞。

4.2. 例子

4.2.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>delete删除数组元素</title></head><body><script type="text/javascript">var fruits = ["Banana", "Orange", "Apple", "Mango"];document.write(fruits + '<br />'); delete fruits[0];document.write(fruits + '<br />');document.write(fruits[0]);</script></body>
</html>

4.2.2. 效果图

5. 指定数组位置添加和删除元素

5.1. splice()方法既可以向数组中添加项目, 同时又可以从数组中删除项目, 然后返回被删除的项目。

5.2. 语法

arrayObject.splice(index, howmany, item1, ....., itemX)

5.3. 参数

5.4. 返回值

5.5. 实例

5.5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>指定数组位置添加和删除元素</title></head><body><script type="text/javascript">var arr = ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计", "JavaScript权威指南"];document.write('<b>原始数组:</b><br />' + arr + '<br /><br />'); // 从数组下标1的位置删除2个元素var arr1 = arr.splice(1, 2);document.write('<b>删除的元素数组:</b><br />' + arr1 + '<br /><br />'); document.write('<b>原始数组:</b><br />' + arr + '<br /><br />');// 从数组下标1的位置添加2个元素var arr2 = arr.splice(1, 0, "你不知道的JavaScript", "锋利的jquery");document.write('<b>只是向数组中添加元素, 没有返回值:</b><br />' + arr2 + '<br /><br />'); document.write('<b>原始数组:</b><br />' + arr + '<br /><br />');// 从数组下标2的位置删除1个元素, 然后再添加2个元素var arr3 = arr.splice(2, 1, "高性能JavaScript", "javascript高级程序设计");document.write('<b>删除的元素数组:</b><br />' + arr3 + '<br /><br />'); document.write('<b>原始数组:</b><br />' + arr + '<br /><br />');</script></body>
</html>

5.5.2. 效果图

6. 合并数组

6.1. concat()方法用于连接两个或多个数组。该方法不会改变现有的数组, 而仅仅会返回被连接数组的一个副本。

6.2. 语法

arrayObject.concat(arrayX, arrayX, ......, arrayX)

6.3. 参数

6.4. 返回一个新的数组。该数组是通过把所有arrayX参数添加到arrayObject中生成的。如果要进行concat()操作的参数是数组, 那么添加的是数组中的元素, 而不是数组。

6.5. 实例

6.5.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>合并数组</title></head><body><script type="text/javascript">var arr1 = ["JavaScript DOM编程艺术"];var arr2 = ['高性能JavaScript', 'javascript高级程序设计'];document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />'); // 向数组中添加多个值var arr3 = arr1.concat("JavaScript权威指南", "锋利的jquery");document.write('<b>向数组中添加多个值后的新数组:</b><br />' + arr3 + '<br /><br />'); document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />');// 向数组中添加数组var arr4 = arr1.concat(arr2);document.write('<b>向数组中添加数组后的新数组:</b><br />' + arr4 + '<br /><br />'); document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />');// 向数组中添加值和数组var arr5 = arr1.concat("JavaScript权威指南", "锋利的jquery", arr2);document.write('<b>向数组中添加值和数组后的新数组:</b><br />' + arr5 + '<br /><br />'); document.write('<b>原始数组:</b><br />' + arr1 + '<br /><br />');</script></body>
</html>

6.5.2. 效果图

7. 裁剪数组

7.1. slice()方法用数组的某个片段切出新数组。它不会从源数组中删除任何元素。

7.2. 语法

arrayObject.slice(start, end)

7.3. 参数

7.4. slice()方法有2个参数, 第一个参数是开始位置, 第二个参数是结束位置, 从开始参数选取元素, 直到结束参数(不包括)为止。

7.5. slice()方法如果结束参数被省略, 则会切出数组的剩余部分。

7.6. 实例

7.6.1. 代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><title>裁剪数组</title></head><body><script type="text/javascript">var arr = ["JavaScript DOM编程艺术", "高性能JavaScript", "javascript高级程序设计", "JavaScript权威指南", "你不知道的JavaScript"];var arr1 = arr.slice(1, 3);var arr2 = arr.slice(1);document.write('<b>原始数组:</b><br />' + arr + '<br /><br />'); document.write('<b>裁剪下标1~3(不包含下标3的位置)位置的元素, 返回的新数组:</b><br />' + arr1 + '<br /><br />'); document.write('<b>裁剪下标1到结束位置的元素, 返回的新数组:</b><br />' + arr2); </script></body>
</html>

7.6.2. 效果图

025_JavaScript数组方法相关推荐

ECMAScript3中数组方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
数组方法深入扩展（遍历forEach，filter，reduce等）
注:先写入数据API,并在html中创建了5个li,接下来的数组方法都是通过这个数组来应用,并通过模拟每个方法来明白其实现的原理. <ul><li></li>< ...
JavaScript学习笔记：检测数组方法
很多时候我们需要对JavaScript中数据类型( Function . String . Number . Undefined . Boolean 和 Object )做判断.在JavaScript ...
JavaScript 数组拼接打印_JavaScript 数组方法
JavaScript 数组方法 JS 数组 JS 数组排序 JavaScript 数组的力量隐藏在数组方法中. 把数组转换为字符串 JavaScript 方法 toString() 把数组转换为数组值 ...
数组方法关于任意数字类型的数组求最大值解决办法
每日一贴,今天的内容关键字为数组方法有两种思绪: 一种是重载方式(就是有几种数字数组就写几个重载方法,因为Arrays中的toString()方法就是这么干的(黄玉昆给的解释,很好),毕竟基本数据类 ...
给数组倒序_22个超详细的 JS 数组方法
作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...
JavaScript数组方法大全解
0 前言本文只讲解标准化方法,而不会讲解实验性方法,如at().groupBy().groupByMap()和toSource(). 数组中的部分方法需要提供区间范围begin/start和end, ...
22个超详细的 JS 数组方法
22个超详细的 JS 数组方法数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...
JavaScript数组方法大全(推荐)
数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建 JavaScript ...

025_JavaScript数组方法

025_JavaScript数组方法相关推荐

最新文章

热门文章