视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
详解JavaScript数组操作函数方法的示例代码
2020-11-27 20:23:53 责编:小采
文档

1、concat() 连接两个或更多的数组

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
例如:

1 <script type="text/javascript">
2 var arr = [1, 2, 3];
3 var arr1 = [11, 22, 33];
4 document.write(arr.concat(4, 5, arr1));
5 </script>

输出结果:

1,2,3,4,5,11,22,33

2、join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

例如:

1 <script type="text/javascript">
2 var arr = ['item 1', 'item 2', 'item 3'];
3 var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
4 </script>

list结果:

‘<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>’

这是迄今为止最快的方法!使用原生代码(如 join()),不管系统内部做了什么,通常比非原生快很多。——James Padolsey, james.padolsey.com

3、pop() 删除并返回数组的最后一个元素

pop()方法将删除数组的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。

如果数组已经为空,则pop()不改变数组,并返回undefined值

例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.pop() + "<br/>");
5 document.write(arr);
6 </script>

输出结果:

George,John,Thomas
Thomas
George,John

4、push() 向数组的末尾添加一个或更多元素,并返回新的长度

例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.push("James") + "<br/>");
5 document.write(arr);
6 </script>

输出结果:

George,John,Thomas
4
George,John,Thomas,James

5、unshift() 向数组的开头添加一个或更多元素,并返回新的长度

例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.unshift("James") + "<br/>");
5 document.write(arr);
6 </script>

输出结果:

George,John,Thomas
4
James,George,John,Thomas

6、reverse() 颠倒数组中元素的顺序

例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.reverse());
5 </script>

输出结果:

George,John,Thomas
Thomas,John,George

7、shift() 删除并返回数组的第一个元素

例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.shift() + "<br/>");
5 document.write(arr);
6 </script>

输出结果:

George,John,Thomas
George
John,Thomas

8、slice(start,end) 从某个已有的数组返回选定的元素

请注意,该方法并不会修改数组,而是返回一个子数组

例如:

1 <script type="text/javascript">
2 var arr = ["George", "John", "Thomas"];
3 document.write(arr + "<br/>");
4 document.write(arr.slice(1) + "<br/>"); // 从第一个元素开始截取到 数组结尾
5 document.write(arr);
6 </script>

输出结果:

George,John,Thomas
John,Thomas
George,John,Thomas

9、sort() 对数组的元素进行排序

对数组的引用。请注意,数组在原数组上进行排序,不生成副本

该方法默认是按照字符编码(ASCII)的顺序进行排序的

例如:

1 <script type="text/javascript">
2 var arr = new Array(6);
3 arr[0] = "John";
4 arr[1] = "George";
5 arr[2] = "Thomas";
6 document.write(arr + "<br/>");
7 document.write(arr.sort());
8 </script>

输出结果:

John,George,Thomas
George,John,Thomas

再来看一个例子:

 1 <script type="text/javascript">
 2 var arr = new Array(6);
 3 arr[0] = 10
 4 arr[1] = 5
 5 arr[2] = 40
 6 arr[3] = 25
 7 arr[4] = 1000
 8 arr[5] = 1
 9 document.write(arr + "<br/>");
10 document.write(arr.sort());
11 </script>

输出结果:

10,5,40,25,1000,1
1,10,1000,25,40,5

我们可以看到,并非是按照我们认为的按数字大小排序,如果想按照数字大小排序,则需要改变默认的排序方式,自行指定排序规则。
如下:

 1 <script type="text/javascript">
 2 var arr = new Array(6);
 3 arr[0] = 10
 4 arr[1] = 5
 5 arr[2] = 40
 6 arr[3] = 25
 7 arr[4] = 1000
 8 arr[5] = 1
 9 document.write(arr + "<br/>");
10 document.write(arr.sort(function (a, b) {return a - b;}));// 从大到小
11 </script>

输出结果:

10,5,40,25,1000,1
1,5,10,25,40,1000

如果想要降序排列呢?

将排序规则改为:

function (a, b) {return b – a;}

就OK了

10、splice() 删除元素,并向数组添加新元素

splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改

(1)删除指定范围的数组元素:

 1 <script type="text/javascript">
 2 var arr = new Array(6);
 3 arr[0] = "George"; 
 4 arr[1] = "John";
 5 arr[2] = "Thomas";
 6 arr[3] = "James";
 7 arr[4] = "Adrew";
 8 arr[5] = "Martin";
 9 
10 document.write(arr + "<br/>");
11 arr.splice(2, 3); // 删除第三个元素以后的三个数组元素(包含第三个元素)
12 document.write(arr);
13 </script>

输出结果:

George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2)从指定下标开始插入指定元素(元素个数不限):

 1 <script type="text/javascript">
 2 var arr = new Array(6);
 3 arr[0] = "George";
 4 arr[1] = "John";
 5 arr[2] = "Thomas";
 6 arr[3] = "James";
 7 arr[4] = "Adrew";
 8 arr[5] = "Martin";
 9 
10 document.write(arr + "<br/>");
11 arr.splice(2, 0, "William","JACK"); // 在第三个元素之前插入"William","JACK"
12 document.write(arr);
13 </script>

输出结果:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3)删除指定范围的数组元素,并用指定元素替换(元素个数不限):

 1 <script type="text/javascript">
 2 var arr = new Array(6);
 3 arr[0] = "George";
 4 arr[1] = "John";
 5 arr[2] = "Thomas";
 6 arr[3] = "James";
 7 arr[4] = "Adrew";
 8 arr[5] = "Martin";
 9 
10 document.write(arr + "<br/>");
11 arr.splice(2,3,"William","JACK"); // 删除第三个元素以后的三个数组元素(包含第三个元素),并用"William","JACK"进行替换
12 document.write(arr);
13 </script>

输出结果:

George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

下载本文
显示全文
专题