js数组方法汇总
下面主要汇总一下数组的方法
数组方法:
1、检测是否为数组的方法:Array.isArrray();
var arr=[1,2,3,4,5];
var str='string';
console.log(Array.isArray(arr));//true
console.log(Array.isArray(str));//false
2、转换方法:toLocaleString()、toString()、valueOf()
valueOf():返回数组本身
toString():返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串
toLocaleString():调用的是每一项的toLocaleString()方法,而不是toString()方法,这三个方法通常返回同样的值,不过多讨论
var colors=["red","blue","green"];
console.log(colors.toString());//red,blue,green
console.log(colors.valueOf());//["red", "blue", "green"]
console.log(colors.toLocaleString());//red,blue,green
3、join()方法:用于将数组以指定符号分隔成字符串数组
var colors=["red","blue","green"];
console.log(colors.join());//red,blue,green
console.log(colors.join(','));//red,blue,green
console.log(colors.join('||'));//red||blue||green
4、栈方法 push()、pop()方法
push():接收任意数量的参数,把他没逐个添加到数组末尾,并返回修改后的数组长度!(不是修改后的数组);
pop():从数组末尾移除最后一项,返回移除的项
var colors=new Array();
var count=colors.push("red","green","blue");
console.log(colors)//["red", "green", "blue"]
console.log(count);//3 var item=colors.pop();
console.log(colors)//["red", "green"]
console.log(item);//blue
5、队列方法 shift()、unshift()
shift():与pop()方法对应,能够移除数组中的第一个项并且返回该项
unshift():与push()方法对应,能够在数组前面添加若干项
var colors=["red"];
var count=colors.unshift("green","blue");
console.log(colors)//["green", "blue", "red"]
console.log(count);//3 var item=colors.shift();
console.log(colors)//["blue", "red"]
console.log(item);//green
6、重排序方法 reverse()、sort()
reverse():会翻转数组项的顺序
sort():默认按字符编码的大小升序排列,通常我们会传入一个比较函数作为参数来对数字数组进行排序
var numberArr=[0,1,5,10,15];
numberArr.reverse();
console.log(numberArr);//[15, 10, 5, 1, 0] numberArr.sort();
console.log(numberArr);//[0, 1, 10, 15, 5] 按字符编码大小升序排序(此方法会先调用toString()方法) //定义一个比较函数
function compare(value1,value2){
if(value1<value2){
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}
numberArr.sort(compare);
console.log(numberArr);//[0, 1, 5, 10, 15]
// 若想降序排序,将大于号小于号颠倒即可
7、操作方法 concat()、slice()、splice()
concat():数组合并,此方法会将传递给它的一个或多个数组中的每一项添加到结果数组的后面
var colors=["red","blue","green"];
var colors2=colors.concat();
var colors3=colors.concat("black",["yellow","brown"]);
console.log(colors2);//["red", "blue", "green"]
console.log(colors3);//["red", "blue", "green", "black", "yellow", "brown"]
slice():截取数组,接收一或两个参数,返回索引之间的数组项组成的一个数组(包括开头不包括结尾)
当一个参数时是截取从此索引开始到末尾的数组
当两个参数时是截取两个索引之间的数组
当参数为负数时,可以用数组长度加上此参数,截取俩参数之间的项
var colors=["red", "blue", "green", "black", "yellow", "brown"];
var colors2=colors.slice(2);
var colors3=colors.slice(1,4);
var colors4=colors.slice(-2,-1);
console.log(colors2);//["green", "black", "yellow", "brown"]
console.log(colors3);//["blue", "green", "black"]
console.log(colors4);//["yellow"] 与slice(4,5)一样
splice():一个非常强大的方法,可以完成数组的删除、插入、替换工作、
接收两个或三个或更多参数:第一个参数指定开始的索引、第二个参数指定删除的长度、第三个参数及后面的参数指定插入的项,删除返回的项
var colors=["red", "blue", "green","yellow","brown"];
var colors2=colors.splice(0,1);//删除第一项
console.log(colors2);//["red"]
console.log(colors);//["blue", "green", "yellow", "brown"]
var colors3=colors.splice(1,0,"哈哈","恰恰");//在索引1并插入两项
console.log(colors3);//[]
console.log(colors);//["blue", "哈哈", "恰恰", "green", "yellow", "brown"]
var colors4=colors.splice(3,1,"替换");//替换索引为3的项
console.log(colors4);//["green"]
console.log(colors);// ["blue", "哈哈", "恰恰", "替换", "yellow", "brown"]
8、位置方法 indexOf()、lastIndexOf()
接收1或2个参数
indexof();从前向后查找匹配到的第一项,若有第二个参数,则从第二个参数指定的索引开始向后查找,返回匹配第一项所在的索引,没匹配到则返回-1
lastIndexOf():从后往前查找匹配到的第一项,若有第二个参数,则从第二个参数指定的索引开始想前查找,返回匹配到的第一项所在的索引,没匹配到返回-1
var numbers=[1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));//3
console.log(numbers.lastIndexOf(4));//5
console.log(numbers.indexOf(4,4));//5
console.log(numbers.lastIndexOf(4,4));//3
console.log(numbers.indexOf(6));//-1
console.log(numbers.lastIndexOf(6));//-1
9、迭代与归并方法 every()、filter()、forEach()、map()、some()、reduce()、reduceRight()
var numbers=[1,2,3,4,5,4,3,2,1];
var some=numbers.some(function(item,index,arr){
return (item>2);
})
console.log(some)//true 有一个返回true最终就返回true
var every=numbers.every(function(item,index,arr){
return (item>2);
})
console.log(every)//false 全部为true才是true
var filter=numbers.filter(function(item,index,arr){
return (item>2);
})
console.log(filter)//[3, 4, 5, 4, 3] 满足条件的项组成一个数组
var map=numbers.map(function(item,index,arr){
return (item*2)
})
console.log(map)// [2, 4, 6, 8, 10, 8, 6, 4, 2] 返回每个项执行的结果
var foreach=numbers.forEach(function(item,index,arr){
console.log(item)
})//相当于for循环 给每一个项执行一个函数 无返回值
var reduce=numbers.reduce(function(prev,cur,index,arr){
return prev+cur;
})
console.log(reduce)//25
var reduceright=numbers.reduceRight(function(prev,cur,index,arr){
return prev+cur;
})
console.log(reduceright)//25
js数组方法汇总的更多相关文章
- JS数组方法汇总 array数组元素的添加和删除
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...
- js 数组方法比较
js 数组方法比较 table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 120px; } table th ...
- js数组方法详解
Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...
- 转载收藏(js数组方法大全)
js数组方法大全 JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组var arr2 = new Arra ...
- JavaScript Array 数组方法汇总
JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...
- js数组方法大全(上)
# js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...
- js数组方法大全(下)
# js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...
- 几个关于js数组方法reduce的经典片段
以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...
- js数组方法详解(最新最全)
数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...
随机推荐
- 【iCore4 双核心板_FPGA】例程十六:基于双口RAM的ARM+FPGA数据存取实验
实验现象: 核心代码: int main(void) { /* USER CODE BEGIN 1 */ int i; int address,data; ; ]; ]; char *p; /* US ...
- 【Java】移动JDK路径后,修改环境变量不生效 Error: could not open `C:\Program Files\Java\jre1.8.0_131\lib\amd64\jvm.cfg'
场景: JDK原先装在C盘的,现在移动到了D盘,并在环境变量修改了%JAVA_HOME%的新路径,但是CMD中输入java后依然报错. Error: could not open `C:\Progra ...
- MySQL的binlog日志<转>
binlog 基本认识 MySQL的二进制日志可以说是MySQL最重要的日志了,它记录了所有的DDL和DML(除了数据查询语句)语句,以事件形式记录,还包含语句所执行的消耗的时间,MySQL的二进制日 ...
- vue与自定义元素的关系
你可能已经注意到 Vue.js 组件非常类似于自定义元素--它是 Web 组件规范的一部分.实际上 Vue.js 的组件语法参考了该规范.例如 Vue 组件实现了 Slot API 与 is 特性.但 ...
- iOS开发-- TFHpple抓取GB-2312编码的html页面,页面返回编码错误
今天用TFHpple解析html,发现老报错encoding error : input conversion failed due to input error, bytes I/O error ...
- SQL Server 2012 R2升级到SQL Server 2016无法正常启动数据库服务解决方案
原定周末把公司的TFS升级到2018,由于TFS 2018需要SQL Server至少是2016以上版本,所以还需要将原来的SQL Server 2012 R2一并升级.今天早上负责的同事告诉我升级失 ...
- 实验一:基于STM32F1的流水灯实验(库函数)
参考原子哥学习程序 条件:实验板STM32103ZET6:固件库STM32F10x_StdPeriph_Lib_V3.5.0:环境MDK5: 目的:了解STM32 的 IO 口如何作为输出使用 :以两 ...
- tsm 切记
切记不可删除节点,如果删除下面带的数据也会删除
- F#周报2018年第50期
新闻 Bolero: 用于WebAssembly的F#工具 Ionide-fsharp安装数量超过10万 WPF的Xaml.Behaviors类库开源 Visual Studio 2019预览版 .N ...
- autofac生命周期入门(如何避免内存泄漏)
如果你是一个IOC新手,那么生命周期可能会比较难以理解.以至于谈到这个问题时,一些老手也时常表示疑虑和害怕.一个令人不安的问题就是-对象没有在合适的时机被销毁.这样一来内存的使用率就会一直攀升,直到程 ...