Array类型

今天总结一下array类型。 js中的数组是有着非常强大的功能。具有很大的灵活性,有两个方面的特点

1、数组的每一项可以保存任何的数据类型;2、数组大小可以动态的调整;看下面的例子:

           var one=new Array();      //空数组
var two=new Array(5) //length为5的数组
var three=new Array("double",3) //包含double和3的数组 var four=[] //用[]表示
var five=[1,2,3,4]
console.log(five[0]) //1 数组的索引从0开始,length-1
console.log(five.length) //4 数组大小length为4
five.length=10
console.log(five[4]) //索引从4到9都是undefined

检测类型

前面谈过,对于引用类型,可以用instanceof来检测,可以得到对象是不是数组,这只适合于只有一个全局环境。对于具有几个全局环境,可以用ES5新增的Array.isArray()方法

          var one=[]
if(one instanceof Array){
console.log("true")
} if(Array.isArray(one)){
console.log("true") IE9支持
}

转换方法

我们所知道的,所有对象都有toString()、toLocaleString()、valueOf()的方法

对于数组而言:valueOf()返回的是数组本身;toString()返回数组中每个值得字符串形式拼接而成的一个有逗号分隔开的字符串(数组的每一项都会调用toString()方法)

          var one=[1,"2","great"];
var two=one.toString(); //数组每一项都调用toString()方法,组成的字符串
var three=one.valueOf(); //返回数组本身
var four=one.toLocaleString() //数组的每一项都调用toLocaleString()方法,组成字符串 console.log(typeof two) //string
console.log(typeof two[0]) //string
console.log(Array.isArray(three)) //true
console.log(typeof four) //string
console.log(typeof four[0]) //string var first=[1,2,3,4]
console.log(first.join("||")) //join()方法主要是连接,默认还是逗号的

补充一下关于toString()和toLocaleString()之间的区别,主要体现在日期和数字上

         1、日期上的区别,locale代表的是国际化和本土化中的概念
var date=new Date();
console.log(date.toString()) //默认的日期 Mon Jan 29 2018 16:01:34 GMT+0800 (中国标准时间)
console.log(date.toLocaleString()) //本地化日期 2018/1/29 下午4:01:34 2、数字超过3位数的区别
var num1=100;
var num2=1000000;
console.log(num1.toString()) //
console.log(num1.toLocaleString()) //
console.log(num2.toString()) //
console.log(num2.toLocaleString()) //1,000,000 每3个0都会有逗号

操作数组的方法

栈方法(后进先出):push(),推入和pop(),弹出两种

         var one=[1,2]
one.push(3,4) //在末尾添加3,4
console.log(one) //1,2,3,4
var two=one.pop() //删除并返回末尾数
console.log(one) //1,2,3
console.log(two) //

队列方法(先进后出):shift(),移除和unshift(),增加两种

         var one=[1,2]
one.unshift(3,4) //在开头添加3,4
console.log(one) //3,4,1,2
var two=one.shift() //删除并返回第一数
console.log(one) //2,3,4
console.log(two) //

重新排序方法:reverse()和sort()方法,他们的返回值是排序后的数组

        //reverse()方法
var one=[1,2,3,4]
console.log(one.reverse()) //4,3,2,1 翻转数组项的顺序 //sort()方法
var two=[0,5,10,15]
console.log(two.sort()) //0,10,15,5 sort方法默认是升序排列,先回把每一项调用toString()方法,按照string的规则进行排序 //sort接受比较函数
//普通的比较
var three=[0,5,10,15]
var threes=three.sort(rank1) //调用比较函数
function rank1(num1,num2){
if(num1<num2){
return -1
}
if(num1>num2){
return 1
}
else{
return 0
}
}
function rank2(num1,num2){ //或者这样
return num1-num2 //num1-num2为升序;num2-num1为降序
}
console.log(threes) //0,5,10,15 //对象的比较
var objectList=[]
function person(name,age){
this.name=name;
this.age=age;
}
objectList.push(new person("double",5))
objectList.push(new person("single",15))
objectList.push(new person("another",10)) objectList.sort(function rank(a,b){ //比较函数进行排序
return a.age-b.age
}) for(var i=0;i<objectList.length;i++){ //遍历一遍
console.log("name"+objectList[i].name+" age"+objectList[i].age)
}

concat()方法:基于当前数组中的所有项创建一个新数组(先创建当前数组的一个副本,将接受到的参数添加到该数组的末尾),对原数组没有影响

slice()方法:基于当前数组中的一项或多项创建一个新的数组,规则比较多,对原数组没有影响

这两种方法值得注意,对原数组没有影响;而其他方法是基于原数组的操作

       var one=[1,2,3]
var two=one.concat(4,5,[6,7])
console.log(one) //[1,2,3] 创建了副本
console.log(two) //[1,2,3,4,5,6,7] var one=[1,2,3,4,5] console.log(one.slice()) //截取整个数组
console.log(one.slice(3)) //4,5 索引3开始到结束
console.log(one.slice(0,3)) //1,2,3 不包括索引3
console.log(one.slice(1,-1)) //出现负数,-1为倒数第一,-2为倒数第二
console.log(one.slice(-4,-1)) //都加上length再说,2,3,4

修改数组项的万能大法:splice()方法

删除:指定2个参数,要删除的第一项位置和删除的项数

插入:指定3个参数,起始位置,0(要删除的项数),要插入的项

替换:指定3个参数,起始位置,要删除的项,要插入的任意数量的项

       var one=["a","b","c","d"]
one.splice(3,1) //d
console.log(one) //a,b,c
one.splice(2,0,"e","f")
console.log(one) //a,b,e,f,c 添加是在前面添加
one.splice(2,1,"g","h")
console.log(one) //a,b,g,h,f,c

位置方法

indexOf()和lastIndexOf()方法,要查找的项和(可选的)表示查找起点位置的索引;indexOf从数组的开头开始向后查找,lastIndexOf从数组前面查找

都返回要查找项在数组中的位置,找不到就返回-1,会使用全等操作符

      var one=[1,2,3,2,4]
console.log(one.indexOf(1)) //0 返回的是要查找项的索引值
console.log(one.indexOf("1")) //-1 因为比较使用的是全等操作符,所以找不到直接返回-1
console.log(one.indexOf(4,2)) //5 从索引为2开始查找
console.log(one.lastIndexOf(2)) //

迭代方法

es5规定的5种迭代方法,接受两个参数:每一项上运行的函数和(可选)运行该函数的作用域对象——影响this值

函数接受三个参数:item数组中的每个元素;index数组中每个元素的索引;array数组本身;item为必选,其他为可选

      every和some是数组的逻辑判定,对数组应用指定的函数判断,返回布尔值
every传入的函数每一项都返回true才返回true,相当于&&
而some传入的函数的任意一项返回true就会返回true,相当于||
var one=[1,2,3,4,5]
var everyResult=one.every(function(item,index,array){
return item>4
})
console.log(everyResult) //flase 不是每一项都大于4 var someResult=one.some(function(item,index,array){
return item>4
})
console.log(someResult) //true 存在大于4的项
      filter返回一个数组,该数组的元素为指定检查数组中满足函数条件的所有元素
var one=[1,2,3,4,5,6]
var filterResult=one.filter(function(item,index,array){
return item>4
})
console.log(filterResult) //5,6 返回满足条件的数组 map返回一个数组,该数组的元素为传入函数的结果的集合
var one=[1,2,3,4]
var mapResult=one.map(function(item,index,array){
return item*4
})
console.log(mapResult) //4,8,12,16 返回经过函数的结果的数组
     forEach用于调用数组中每一个元素,将元素返回给回调函数,没有返回值;本质上和使用for循环迭代数组是一样的

     var one=[1,2,3,4,5,6]
one.forEach(function(item,index,array){
console.log(item) //1——6的迭代
}) var two=[1,2,3,4]
var sum=0
two.forEach(function(item,index,array){
sum+=item //累加
})
console.log(sum) // two.forEach(function(item,index,array){
two[index]=item+1 //元素自加
})
console.log(two) //2,3,4,5

并归方法

reduce()和reduceRight()这两个方法都会迭代数组的所有项,然后构建一个最终返回的值,reduce从数组第一项开始遍历,reduceRight从数组最后一个遍历;

    基本语法为array.reduce(function,initialValue)
函数接受四个参数:pre,cur,index,array
如果有初始值,pre就是初始值,没有则pre为数组第一项,cur为数组第二项 var one=[1,2,3,4]
var sum=one.reduce(function(pre,cur,index,array){
return pre+cur
},0)
console.log(sum) //10 pre为0,cur为1 pre为pre和cur之和1,cur为2 ……一直遍历结束 对于reduceRight来说,没有初始值,pre就是最后一项,cur为倒数第二项;有初始值则cur为最后一项

最后:ES5中的新方法具有极强功能,代替原来用for循环遍历的种种,下次再用实际项目总结

引用类型之数组array最全的详解的更多相关文章

  1. JavaScript中数组Array.sort()排序方法详解

    JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编 ...

  2. HTML video 视频标签全属性详解

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  3. HTML-▲▲video 视频标签全属性详解▲▲

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  4. Kubernetes YAML 文件全字段详解

    Kubernetes YAML 文件全字段详解 Deployment yaml 其中主要参数都在podTemplate 中,DaemonSet StatefulSet 中的pod部分一样. apiVe ...

  5. Sqlmap全参数详解

    sqlmap全参数详解 sqlmap是在sql注入中非常常用的一款工具,由于其开源性,适合从个人到企业,从学习到实战,各领域各阶段的应用,我们还可以将它改造成我们自己独有的渗透利器.这款工具中,大大小 ...

  6. Java学习之二维数组定义与内存分配详解

    二维数组:就是元素为一维数组的一个数组. 格式1: 数据类型[][] 数组名 = new 数据类型[m][n]; m:表示这个二维数组有多少个一维数组. n:表示每一个一维数组的元素有多少个. 注意: ...

  7. java基础(十五)----- Java 最全异常详解 ——Java高级开发必须懂的

    本文将详解java中的异常和异常处理机制 异常简介 什么是异常? 程序运行时,发生的不被期望的事件,它阻止了程序按照程序员的预期正常执行,这就是异常. Java异常的分类和类结构图 1.Java中的所 ...

  8. Log4J 配置文件全属性详解

    第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 1 log4j.rootCategory=INFO, stdou ...

  9. JavaScript中Array.prototype.sort()的详解

    摘抄来源:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort sor ...

随机推荐

  1. 四种常见的App弹窗设计,你有仔细注意观察吗?

    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...

  2. core dump gdb调试

    core dump又叫核心转储, 当程序运行过程中发生异常, 程序异常退出时, 由操作系统把程序当前的内存状况存储在一个core文件中, 叫core dump. (linux中如果内存越界会收到SIG ...

  3. org.apache.solr.client.solrj.impl.HttpSolrServer$RemoteSolrException: Internal Server Error 错误

    Solr报错: { "responseHeader": { "status": 500, "QTime": 11 }, "erro ...

  4. 使用RESTClient插件数据模拟(GET,POST)提交

    1:在Firefox下载RESTClient插件安装 2:安装界面后, 3:点击设置头文件:(设请求地址有头部文件) 4:设置界面,当然有非常多选择.依据你的须要.一般在输入的时候有智能提示,我这里以 ...

  5. Go语言实现列出排列组合

    今天,隔壁坐的小朋友给我一串数字: 1 6 21 55 让我观察规律,然后帮他推导公式. 尼玛,当我是神呢?!! 想了半天没看出个原委, 于是看了他那边具体需要才发现他那边是对N个数字进行5个数字的组 ...

  6. 读Zepto源码之属性操作

    这篇依然是跟 dom 相关的方法,侧重点是操作属性的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2. ...

  7. 使用Jenkins进行持续集成ionic3项目

    Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.  网上大多数是关于.net web网站以及 ...

  8. 什么是MVC ?

    记得第一次面试phper(php是对我来说可以快速上手的另一web开发语言),人家问我MVC,我只知道m就是model,v就是view,c就是Controller,具体把其它的认识我是一无所知,结果我 ...

  9. C++11 实现生产者消费者模式

    代码都类似,看懂一个,基本都能理解了. 共有代码: #include <cstdlib>#include <condition_variable>#include <io ...

  10. 巡风安装配置 -windows

    巡风是一款适用于企业内网的漏洞快速应急.巡航扫描系统,通过搜索功能可清晰的了解内部网络资产分布情况,并且可指定漏洞插件对搜索结果进行快速漏洞检测并输出结果报表. 其主体分为两部分:网络资产识别引擎,漏 ...