下面主要汇总一下数组的方法

数组方法:

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数组方法汇总的更多相关文章

  1. JS数组方法汇总 array数组元素的添加和删除

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[ ...

  2. js 数组方法比较

    js 数组方法比较 table th:first-of-type { width: 80px; } table th:nth-of-type(2) { width: 120px; } table th ...

  3. js数组方法详解

    Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...

  4. 转载收藏(js数组方法大全)

    js数组方法大全 JavaScript中创建数组有两种方式 (一)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组var arr2 = new Arra ...

  5. JavaScript Array 数组方法汇总

    JavaScript Array 数组方法汇总 1. arr.push() 从后面添加元素,返回值为添加完后的数组的长度 var arr = [1,2,3,4,5] console.log(arr.p ...

  6. js数组方法大全(上)

    # js数组方法大全(上) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 join() reverse() sort() concat() slice( ...

  7. js数组方法大全(下)

    # js数组方法大全(下) 记录一下整理的js数组方法,免得每次要找方法都找不到.图片有点多,注意流量,嘻嘻! 本期分享 forEach() map() filer() every() some() ...

  8. 几个关于js数组方法reduce的经典片段

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...

  9. js数组方法详解(最新最全)

    数组是js中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响.本文所有的栗子都是在es7环境下测试的,如果有问题欢迎留言交流 ...

随机推荐

  1. MT7601 WG209模块驱动移植,并连接路由器

    驱动位置: https://github.com/Aplexchenfl/WG209_MT7601 下载之后,查看 Makefile 在这里,我修改了 kernel的位置以及编译器的版本 执行 mak ...

  2. 理解Java枚举类型

    (参考资料:深入理解java enum) 1.原理:对编译后的class文件javap反编译可以看出,定义的枚举类继承自java.lang.Enum抽象类且通过public static final定 ...

  3. spring data jpa 查询自定义字段,转换为自定义实体

    目标:查询数据库中的字段,然后转换成 JSON 格式的数据,返回前台. 环境:idea 2016.3.4, jdk 1.8, mysql 5.6, spring-boot 1.5.2 背景:首先建立 ...

  4. c#扩展函数

    分页 public static class IEnumerableExt { public static (IEnumerable<T> dataAfterPaging, Pageinf ...

  5. 上网爱快?EasyRadius FOR 爱快V2接口测试版正式推出,欢迎广大爱迷们测试噢

    …… …… 有些人问:为什么上面要打省略号?那些因为此处省略无数字,但是我还是要和大伙们谈谈EasyRadius支持爱快的故事 早在2013年的时候,我们内部就有发布爱快接口,但是由于当时V1的爱快, ...

  6. 仿迅雷播放器教程 -- C++界面制作方法的对比 (9)

        上一个教程对比的5个方向共7个界面框架,都是非常权威,应用很广泛的库,绝对是非常稳定,并且能够做出常见的界面出来,可以放心大胆的用在项目里.     但那7个界面框架再好,也总是没有绝对的优势 ...

  7. [Stats385] Lecture 03, Harmonic Analysis of Deep CNN

    大咖秀,注意提问环节大家的表情,深入窥探大咖的心态,很有意思. 之前有NG做访谈,现在这成了学术圈流行. Video: https://www.youtube.com/watch?v=oCohnBbm ...

  8. [React] 09 - Tutorial: components

    jsx变为js的过程:http://babeljs.io/repl/ youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg ...

  9. 基于IOS上MDM技术相关资料整理及汇总

    (转自:http://www.mbaike.net/special/1542.html) 一.MDM相关知识:MDM (Mobile Device Management ),即移动设备管理.在21世纪 ...

  10. 可访问性(Accessibility) => 无障碍功能

    了解无障碍功能及其范围和影响可令您成为更出色的网络开发者 复杂的一笔 https://developers.google.cn/web/fundamentals/accessibility/ ARIA ...