js数组方法实例讲解
一、连接两个数组或多个数组-concat
不改变原始数组,需要用新的变量保存返回的新数组
var arr1=[1,2]; var arr2=[2,3]; arr1.concat(arr2); console.log(arr1,arr2); var arr3=arr1.concat(arr2); console.log(arr3); // [1, 2] (2) [2, 3] // [1, 2, 2, 3]
二、截取数组一部分-slice
arr.slice(startIndex,endIndex);截取的项包括数组开始的索引的项,不包括数组结束的索引的项
也不改变原始数组,需要用新的变量保存返回的新数组
var arr=[1,2,3]; arr.slice(0,1); console.log(arr); var sub=arr.slice(0,1); console.log(sub); // [1, 2, 3] // [1]
三、用不同的分隔符构建字符串-join
默认以','拼接,
var arr=[1,2,3]; var str1=arr.join(); var str2=arr.join("-"); console.log(str1,str2); //1,2,3 //1-2-3 // 根据数组拼接成html字符串 var arr=["HTML","CSS","JS"]; var html='<li>'+arr.join('</li><li>')+'</li>'; console.log(html); // HTML</li><li>CSS</li><li>JS</li>
四、数组的反转-reverse
var arr=[1,2,3,4,5]; arr.reverse(); // [5, 4, 3, 2, 1]
五、数组的排序-sort方法
这里只是通过出入比较函数给sort方法来保持正确的排序,对象也可以根据某一属性来进行正确的排序,这里暂不赘述。
var arr=[1,2,11,5,50]; arr.sort(); // [1, 11, 2, 5, 50] 按照uicode编码排序不是我们想要的结果 通过传入比较函数保证正确的排序 arr.sort(function(a,b){ if(a<b){ return -1; }else if(a>b){ return 1; }else{ return 0; } }) // [1, 2, 5, 11, 50]
六、数组的删除,替换,插入-splice方法
array.splice(index,howmany,item1,.....,itemX);
// 删除开始索引后的第几个元素 var arr=[1,2,3,4,5]; arr.splice(1,1); //[1, 3, 4, 5] // 删除开始索引后的第几个元素然后插入新的值 var arr1=[1,2,3,4,5]; arr1.splice(1,2,11,22); // [1, 11, 22, 4, 5]
七、栈方法
数组提供了一种让数组类似于其他数据结构的方法,栈是一种LIFO(Last-In-First-Out)后进先出的数据结构,也就是最新添加的最早被移除。
栈中的推入-push,接收任意变量的参数,把他们添加到数组的末尾,并返回修改后数组的长度
栈中的弹出-pop,从数组末尾移除最后一项,减少length值,然后返回移除的项都发生在同一位置-栈的顶部。
var arr=[1,2,3]; arr.push('a'); //4 返回数组的长度 arr // [1, 2, 3, "a"] var arr=[1,2,3]; arr.pop(); //3 返回数组最后一项的弹出值 arr (3) [1, 2]
八、队列方法
队列的数据结构是FIFO(First-In-First-Out),队列在数组的末端添加项,在列表的前端移除项。
末端添加项-push,
前端移除项-shift,移除数组中的第一项,并返回该项,同时将数组长度减1,
前端新增项-unshift,在数组前端新增一项并返回数组的新长度。
通过数组的unshift和pop方法可以从相反方向的来模拟队列
var arr=[1,2,3]; arr.push(4) //4 arr.shift(); //1 arr; //[2,3,4] arr.unshift("a"); //4 arr; //["a",1,2,3]
九、数组的位置方法-indexOf,lastIndexOf
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。
lastIndexOf() 方法可返回数组中从尾到头方向上的位置,找到返回第一次出现的位置,否则返回-1。
var arr=[1,2,3,1,4]; arr.indexOf(1); //0 arr.lastIndexOf(1); //3
十、数组的平铺(有些低版本浏览器不兼容)
方法会递归到指定深度将所有子数组连接,并返回一个新数组。arr.flat(depth);默认深度为1
var arr=[1,2,3,[4,5],[7,8]]; var arr2=arr.flat(); //等价于arr.flat(1) console.log(arr2); // [1, 2, 3, 4, 5, 7, 8]
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【一天一大 lee】分割等和子集 (难度:中等) - Day20201011
- 【一天一大 lee】寻找两个正序数组的中位数 (难度:困难) - Day20201003
- 【一天一大 lee】颜色分类 (难度:中等) - Day20201007
- 【一天一大 lee】树中距离之和 (难度:困难) - Day20201006
- 在Spring项目中以多线程的方式并发执行,异步处理任务。解决统计、累加类业务的例子。
- 【十分钟教会你汇编】MIPS编程入门
- 实践中如何优化MySQL(收藏)
- Framework掌握不全被面试官怼?Android字节跳动大牛的精编解析笔记带你系统学习!
- 路由策略中的IP-Prefix你了解多少?
- 路由策略——Route-policy
- 如何合理设置线程池大小
- 前端设计模式之责任链模式
- 项目实战|基础请求封装
- 一种TreeView组件分页异步加载的方法
- V8 最佳实践:从 JavaScript 变量使用姿势说起