JS数组方法使用步骤详解

来源：动视网责编：小采时间：2020-11-27 19:46:47

JS数组方法使用步骤详解

JS数组方法使用步骤详解:这次给大家带来JS数组方法使用步骤详解，JS数组方法使用的注意事项有哪些，下面就是实战案例，一起来看一下。1.join作用：将数组通过指定字符拼接成字符串。语法： string arr.join([separator = ',']);参数： separator可选，如果

推荐度：

点击下载本文 文档为doc格式

导读JS数组方法使用步骤详解:这次给大家带来JS数组方法使用步骤详解，JS数组方法使用的注意事项有哪些，下面就是实战案例，一起来看一下。1.join作用：将数组通过指定字符拼接成字符串。语法： string arr.join([separator = ',']);参数： separator可选，如果

这次给大家带来JS数组方法使用步骤详解，JS数组方法使用的注意事项有哪些，下面就是实战案例，一起来看一下。

1.join

作用：将数组通过指定字符拼接成字符串。
语法： string arr.join([separator = ',']);
参数： separator可选，如果省略的话，默认为一个逗号。如果 seprator 是一个空字符串，那么数组中的所有元素将被直接连接。
返回值：拼接后的字符串。

<script>
 var arr=[2,3,4,5];
 console.log(arr.join());//"2,3,4,5"
 console.log(arr.join(""));//"2345"
 console.log(arr.join("+"));//"2+3+4+5"
 console.log(arr);//[2,3,4,5]
</script>

2.push

作用：往数组的末尾添加一个或者多个元素。
语法：number arr.push(element1, ..., elementN);
参数：elementN，一个或多个元素。
返回值：新数组的length。
注意：会修改原数组。

 <script>
 var att=[1,2,3,4];
 console.log(att.push("a","b"));//6
 console.log(att);//[1,2,3,4,"a","b"];
 </script>

3.unshift

作用：往数组的头部添加一个或者多个元素。
语法：number arr.push(element1, ..., elementN);
参数：elementN，一个或多个元素。
返回值：新数组的length。
注意：会修改原数组。

 <script>
 var att=[1,2,3,4];
 console.log(att.unshift("a","b"));//6
 console.log(att);//["a","b",1,2,3,4];
 </script>

4.pop

作用: 删除数组最后一个元素。
语法: mixed arr.pop();
返回值：被删除的那一个元素。
注意：会修改原数组。

<script>
 var arr=[1,2,3,4];
 console.log(arr.pop());//4
 console.log(arr);//[1,2,3]
</script>

5.shift

作用: 删除数组第一个元素。
语法: mixed arr.pop();
返回值：被删除的那一个元素。
注意：会修改原数组。

<script>
 var arr=[1,2,3,4];
 console.log(arr.shift());//1
 console.log(arr);//[2,3,4]
</script>

6.concat

作用: 将传入的数组或非数组值与原数组合并,组成一个新的数组并返回.
语法: array array.concat(value1, value2, ..., valueN);
参数: valueN是指需要与原数组合并的数组或非数组值.
返回值: 合并后的数组
注意：不会修改原数组的内容。

<script>
 var att=[1,2,3];
 var attO=["a","b"];
 var attT=[5,true];
 console.log(att.concat(10,attO,attT));//[1,2,3,10,"a","b",5,tru]
 console.log(att);//[1,2,3]
</script>

7.reverse

作用:颠倒数组中元素的位置.
语法: array arr.reverse()
返回值: 颠倒顺序后的数组
注意：会改变原数组.

<script>
 var arr = [1,2,3,6,5,4];
 var res = arr.reverse();
 res.push( "a" );
 console.log( res );//[4,5,6,3,2,1,"a"]
 console.log( arr );//[4,5,6,3,2,1,"a"]
</script>

8.slice

作用:截取**数组中一部分，并返回这个新的数组.
语法: array arr.slice([begin[,end]]);
返回值: 截取后的新的数组
注意：包含起始位置，不包含结束位置，不会改变原数组.
什么都不传入，则是原数组。

<script>
 var arr = ["a","b","c","d"];
// var res = arr.slice( 1,3 );//["b","c"]
// var res = arr.slice( 3,1 );//[]
 var res = arr.slice( -3,-1 );//["b","c"]
 var res = arr.slice();//["a","b","c","d"]
 console.log( res );
 console.log( arr );//["a","b","c","d"]
</script>

9.splice

作用：用新元素替换旧元素，以此修改数组的内容
语法：array array.splice(start, deleteCount[, item1[, item2[, ...]]])
参数：

 - start 起始位置
 - deleteCount 删除长度
 - item 添加的内容

返回值：由被删除的元素组成的一个数组
注意：修改了原数组的内容。

<script>
 var att="Liangzhifang".split("");
 console.log(att.splice(2,4,["a"]));//["a","n","g","z"]
 console.log(att);//["L","i",["a"],"h","i","f","a","n","g"]
</script>

10.sort

作用：对数组的元素进行排序。
语法： array arr.sort([compareFunction]);
参数: compareFunction可选。用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
返回值: 排序后的数组.

<script>
 //当什么都不传入的时候，sort（）默认由小到大排列。
 var attr=[9,5,4,3,2];
 console.log(attr.sort());//[2, 3, 4, 5, 9]
 //传入function的时候，sort（）内的function返回值大于0，由小到大排列。
 var attrO=[9,5,4,3,2];
 console.log(attrO.sort(function () {
 return 1;
 }));//[2, 3, 4, 5, 9]
 //传入function的时候，sort（）内的function返回值小于或者等于0，数组序列不变。
 var attrT=[9,5,4,3,2];
 console.log(attrT.sort(function () {
 return -1;
 }));// [9, 5, 4, 3, 2]
 //由于sort内部是随机抽取两个值，我们在利用function函数的返回值，大于0的时候，交换位置。小于或者等于0的时候不变，来排序。
 //以下是由小到大排序
 var attrTh=[9,5,4,3,2];
 console.log(attrTh.sort(function (a,b) {
 return a-b;
 }));// [2, 3, 4, 5, 9]
 //以下是由大到小排序
 var attrF=[9,5,4,3,2];
 console.log(attrF.sort(function (a,b) {
 return b-a;// [9, 5, 4, 3, 2]
 }));
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！