首页 / JAVASCRIPT / JS数组方法使用步骤详解

JS数组方法使用步骤详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS数组方法使用步骤详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4200字，纯文字阅读大概需要7分钟。

内容图文

这次给大家带来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网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JS数组方法使用步骤详解全部内容，希望文章能够帮你解决JS数组方法使用步骤详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/289576.html

来源：【匿名】

【上一篇】自定义搭建前端脚手架【下一篇】javascript 怎么调用php方法

更多 ►

【JS数组方法使用步骤详解】教程文章相关的互联网学习教程文章

JS数组之操作方法【代码】【图】

操作方法1. concat() 拼接数组使用此方法可以拼接元素，并组成新数组，结果返回新数组的副本。（不会影响原数组）// concat() 连接元素返回新元素副本 var arr = ["zero",1,"two",3,"four",5,"six",7,"eight"]; // 连接一个元素 console.log(arr.concat(9)); // 返回新数组的副本 console.log(arr.concat("9")); console.log(arr); // 依然是原数组，这就证明此方法返回的是一个副本 // 还能连接对象 console.log(arr.concat({"nam...

JS数组定义及详解【代码】

1、什么是数组数组就是一组数据的集合其表现形式就是内存中的一段连续的内存地址数组名称其实就是连续内存地址的首地址 2、关于js中的数组特点数组定义时无需指定数据类型数组定义时可以无需指定数组长度数组可以存储任何数据类型的数据（比如说一个元素保存整型，一个元素保存字符串型，这个在JS中是可以的）创建数组的语法：var arr=[值1,值2,值3]; //隐式创建var arr=new Array(值1,值2,值3); //直接实...

js数组去重

function deleteRepeat(){//删除重复的 var _arr=[1,1,1,3,3,3,5,8,8,9,10]; //console.log(_arr); for(var i=0;i<_arr.length;i++){ for(var n=i+1;n<_arr.length;n++){ if(_arr[i]==_arr[n]){ _arr.splice(n,1); n--; } } ...

js数组方法的总结_js数组的常见方法（配上思维导图）【代码】【图】

这是再次看《JavaScript高级程序设计》后，想要记录点内容来帮助学习，毕竟好记性不如烂笔头嘛，这里没有详细的记录每个方法，就大概写了一下，具体详细的方法大家可以查看官方文档进行查看目录如下目录插入pushunshift移出popshiftslice(number1[,number2])不改变原数组一个参数（从当前到结束）两个参数（从第一个参数到第二个参数，不包含最后一个）splice(（起始位置[,要删除的数目，要插入的项]）)改变原数组一个参数两个参数...

JavaScript js 数组里面的对象根据对象值排序【代码】

JavaScript：　　　　　　let row=[　　　　　　　　　　{id:"1",name:"张三",age:"12"},　　　　　　　　　　{id:"2",name:"李四",age:"10"},　　　　　　　　　　{id:"3",name:"王五",age:"52"},　　　　　　　　　　{id:"4",name:"赵六",age:"32"}　　　　　　　　　]　　用下面这个函数直接自动排序row.sort(function (a,b){return a.age-b.age;})　let row=[　　　　　{id:"1",name:"李四",age:"10"},　　　　　{id:"2",name:...

js数组常用方法总结【代码】

最近工作中经常用到数组操作，每次都傻傻不知道怎么用，今天有时间整理了一下，希望对大家有帮助！这些基础的知识，要熟记于心。1、 join()功能：将数组中所有元素都转化为字符串并连接在一起。输入：分隔符，默认为逗号输出：分隔符分割的字符串1var a = [1,2,3]; 2 a.join(); // =>"1,2,3"3 a.join(";");// =>"1;2;3"2、 reverse()功能：将数组中的元素颠倒顺序。输入：无输出：逆序的数组1var a = [1,2,3]; 2 a.reverse().jo...

js数组去重算法【代码】

来来来，整理完数组排序，咱们再来看看数组去重。这个可以说有很多方式了。之前看过的算法方式太多，导致思路其实有时候真的很受限，不过也是整理来学习用的，如有雷同，纯属巧合啊，小婊贝们~　　首先呢，我们来看看思路比较直接的方法，基本思路就是声明一个新数组arr_n，将【0】这个成员压入arr;然后从【1】开始循环当前数组，设置一个变量a，给他一个初始值1；内层嵌套从【0】对arr_n数组的循环，用外层对当前数组循...

js数组合并（一个数组添加到另一个数组里面）方法【代码】【图】

js定义两个数组。var arrA=[1,2,3];var arrB=[4,5,6];要实现[1,2,3,4,5,6]，如果直接arrA.push(arrB); 则arrB只会作为了arrA的一个元素。执行如图：要合并或连接，则需要使用concat() 方法。concat(Array) 方法concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。array1.concat([item1[, item2[, . . . [, itemN]]]])说明concat 方法返回一个 Array 对象，其中包含了 array1 和提...

JS数组【代码】

var arr = new Array(1,2,3); document.write(arr.length+"<br/>"); // delete arr[0]; 去掉数组第一个元素，数组长度不变 // arr.pop(); 去掉数组最后一个，数组长度-1 // arr.shift(); 去掉数组第一个，数组长度-1// arr.push("我","是");//在数组尾部添加元素 // arr.unshift("我","是");//在数组头部添加元素 document.write(arr.length+" "+arr.toString()+"<br/>" );var arr1 = new Array(4,5,6);// concat连接数组生...

Js 数组——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()【代码】

转自: xiaohong_oathfilter(): var filteredArray = array.filter(callback[, thisObject]);参数说明：callback：要对每个数组元素执行的回调函数。thisObject ：在执行回调函数时定义的this对象。//过滤掉小于 10 的数组元素：//代码： function isBigEnough(element, index, array) {return (element >= 10); } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // 12, 130, 44 //结果：[12, 5, 8, 130, 44].filter(...

js数组遍历some,foreach,map,filter,every对比【代码】

1、 [...].some(ck)函数 ---- 某个一个为true，则为true对数组中每个元素执行一次ck函数，知道某个元素返回true，则直接返回true。如果都返回false,则返回false检查整个数组中是否有满足ck函数的元素。1、var result = [1,5,3,6].some( (v,i) => (v>10) ) //所有元素都不满足，返回result = false2、var result = [10,5,30,60].some( (v,i) => (v<10) ) //有一个(多个)满足，返回result = true 2、 ...

一个js数组操作题【代码】

JS 控制一串数组，每隔2两秒显示 7个数，要求自动拼接。列如：var nums=‘1,2,3,4,5,6,7,8,9‘; 第一次输出‘1,2,3,4,5,6,7’ 第二次输出‘8,9,1,2,3,4,5‘ 第三次输出‘6,7,8,9,1,2,3‘var array = [1,2,3,4,5,6,7,8,9];var dom = document.getElementById(‘a‘);function go(){var result = array.splice(0,7);array = array.concat(result);dom.innerHTML = result.join("");setTimeout(arguments.callee,3000);}go();原文：...

JS 数组去重学习日志#1【代码】【图】

5.10 JS 数组去重学习日志#1 参考文章1（Array.from()）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from 参考文章2 (Set)：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Set//问题：var arr=[1,1,1,2,3,4,5,6,12,341235,31,5]; //将此数组进行去重//解决代码 window.onload=function () {console.log(Array.from(new Set(arr))) } 第一步...

javascript-D3.js用数组替换tsv文件【代码】

我一直在尝试实现以下chart,而未从其他来源获取数据时使用d3.tsv. 按照其他类似的question中的说明,我尝试替换了这部分代码：d3.tsv("data.tsv", type, function(error, data) {if (error) throw error;var cities = data.columns.slice(1).map(function(id) {return {id: id,values: data.map(function(d) {alert(d.date);alert(id);return {date: d.date, temperature: d[id]};})};});带有：var data=[ {date:20111001,temperatu...

js数组操作代码集锦_基础知识

用 js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。这段时间做的一个项目，用到数组的地方很多，自以为js高手的自己居然无从下手，一下狠心，我学！呵呵。学了之后才知道，js数组的功能强大很，远比VB,C#强多了,大家慢慢看吧 1、数组的创建代码如下: var arrayObj = new Array();　//创建一个数组 var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度 var a...

首页 / JAVASCRIPT / JS数组方法使用步骤详解

JS数组方法使用步骤详解

内容导读

内容图文

1.join

2.push

3.unshift

4.pop

5.shift

6.concat

7.reverse

8.slice

9.splice

10.sort

内容总结

内容备注

内容手机端

【JS数组方法使用步骤详解】教程文章相关的互联网学习教程文章

数组 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程