将数组以逗号拼接_javascript-数组

11fe79c8ba10e063ea633e3d4e799fa1.png

Array类型

除了Object之外,Array类型恐怕也是ECMAScript中最常见的类型了,而且,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别。虽然ECMAScript数组与其他语言中的数组都是数据的有序列表,但与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据。也就是说,可以用数组的第一个位置来保存字符串,用第二位置来保存数值,用第三个位置来保存对象等等。而且ECMAScript数组的大小实可以动态调整的,即可以随着数据的添加自动增长以纳新增数据。

创建数组的基本方式有两种。第一种是使用Array构造函数

var colors = new Array();
var colors = new Array(10);
var colors = new Array("red","blue","green");

注:在此种情况之下,经测试发现,new Array()中参数为字符串创造的数组都是单项,想要包含多项必须为number类型

第二种方式:

var colors = ["red","blue","green"]
var colors = [1,2,];
var colors = [ ];
var colors = [,,,,]

注:以[,,,]这种方式创建的数组创建成功之后会自动把最后一个逗号后面的那一项省略掉
注:数组的length属性很有特点,它不是只读的,可以设置这个属性,可以从数组的末尾移除或者向数组中添加新项,例:

var colors = ["red","blue","green","white"]
colors.length = 3
colors[3] // undefined

注:数组的中的某一项值为undefined,但这一项是存在的只是不是empty,empty项和值为undefined项的输出都是undefined,但他们的含义不同

1f3d2a9882b9dc4f8093e0ddeb4df9c9.png
undefined和empty项区别与示例效果图

检测数组

自从ECMAScript3做出规定后,就出现了确定某个对象是不是数组的经典问题。对于一个网页,或者一个全局作用域而言,使用instanceof操作符就能得到满意的结果:

if(value instanceof Array){
// 对数组执行某些操作
}

instanceof操作符的问题在于,它假定单一的全局执行环境。如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数

为了解决这个问题,ECMAScript5新增了Array.isArray()方法,这个方法的目的是最终确定某个值到底是不是数组,而不管它是在哪个全局执行环境中创建的。

转换方法

所有对象都具有toLocaleString(),toString(),valueOf()方法。其中,调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串,而调用valueOf()返回的还是数组。实际上,为了创建这个字符串会调用数组每一项的toString()方法

var colors = ["red","blue","green"]
colors.toSting(); // "red,blue,green"
colors.valueOf(); // ["red","blue","green"]
colors; // ["red","blue","green"]

另外,toLocaleSting()方法经常也会返回与toString()和valueOf方法相同的值,但也不总是如此,当调用数组的toLocaleString()方法时,它也会创建一个数组的以逗号分隔的字符串。而与前两个方法唯一的不同之处在于,这一次为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString方法。

基本数据类型:按值访问,可操作保存在变量中的实际的值。基本类型值指的是简单的数据段

基本数据类型由五种:undefined,null,String,Number,Boolean

引用类型:当复制保存着对象的某个变量时,操作的是对象的引用,但在为对象添加属性时,操作的是实际的对象,引用类型值指那些可能为多个值构成的对象。

引用类型包括:object,Array,RegExp,Date,Function,特殊的基本包装类型(String,Number,Boolean)以及单体内置对象(Global,Math)

19fa65508fc6804fc00175168b3e998f.png
数组的toString和toLocaleString效果

ef341bd7c6560cb6dcdc8ce4a7db9692.png
日期类型的toString,toLocaleString,valueOf效果

854051ae684376ad725450c2d4da10ea.png
math值的toString,toLocaleString,valueOf效果

其他引用类型效果略

总结:toString就比较官方的转为字符串,而toLocalString可能是比较符合本地阅读习惯使用的方法,valueOf则始终返回其原始值

栈方法

push():可以接收任意数量的参数,把他们逐个添加到数组的末尾,并返回修改后的数组长度。

var arr = ["one","two","three"]
arr.push("four","five"); // 5
arr // ["one","two","three","four","five"]

pop():从数组末尾移除最后一项,然后返回移除的项

var arr = ["one","two","three","four","five"]
arr.pop(); // “five”
arr // ["one","two","three","four"]

队列方法

栈数据结构的访问规则是LIFO(后进先出),而队列数据结构的访问规则是FIFO(First0-In-First-Out,先进先出)。队列在列表的末端添加项,从列表的前端移除项。由于push()是向数组末端添加项的方法,因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作数组方法就是shift(),它能够移除数组中的第一个项并返回该项,同时将数组长度减1。

shift():它能够移除数组中的第一个项并返回该项

unshift():它能在数组前端添加任意个项并返回新数组的长度

var arr = ["one","two","three","four"]
arr.shift() // "one"
arr // ["two","three","four"]

var arr = ["one","two","three"]
arr.unshift("start") // 4
arr // ["start","one","two","three"]

重排序方法:

reverse():反转指定数组项的顺序
sort():按升序排列数组项,sort方法会调用每个数组项的toString转型方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort方法比较的也是字符串
但这种排序方式在很多情况下都不是最佳方案,因此sort方法接受一个比较函数作为参数

d7d4af6c029d3562615ec5f942e33e2d.png
sort()和reverse()效果

其他操作方法:

  1. contact():在没有给contact方法传递参数的情况下,他只是复制当前数组并返回副本。如果传递给concat()方法的是一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中。如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾。
  2. slice():接受一到两个参数,即要返回项的起始和结束位置。在只有一个参数情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项,但不包括结束位置的项。
    1. 注:slice()方法不会影响原始数组。
    2. 如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置
  3. splice():这个方法恐怕要算是最强大的数组方法了,它由很多种用法。splice的主要用途是向数组的中部插入项,但使用这种方法的方式则有如下三种
    1. 删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。例如:splice(0,2)会是删除数组中的前两项
    2. 插入:向指定位置插入任意数量的项,需要提供桑额参数:起始位置,0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四,第五,以致任意多个项。
    3. 替换:可以向指定位置插入任意熟数量的项,且同事删除任意数量的项,需要三个参数,将2中第二个参数替换指定数量即可
    4. splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)
  4. indexOf():从数组的开后开始向后查找,返回要查找的项在数组中的位置,没找到则返回-1,两个参数:要查找的项和起点位置的索引,在对比的时候会使用全等操作符
  5. lastIndexOf():从数组的末尾开始向前查找,返回要查找的项在数组中的位置,没找到则返回-1,两个参数:要查找的项和起点位置的索引,在对比的时候会使用全等操作符
  6. every():对数组中的每一项运行给定函数,如果每一项都返回true,则返回true
  7. filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
  8. forEach():对数组中的每一项运行给定函数。这个方法没有返回值
  9. map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
  10. some():对数组中的每一项运行给定函数,如果该函数对任意一项返回true,则返回true。
  11. 缩小方法:reduce(),reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终返回值,其中reduce()方法从数组的第一项开始,逐个遍历到最后,而reduceRight()则从数组的最后一项开始,向前遍历到第一项。这两个方法都接收两个参数,一个在每一项上调用的函数和作为缩小基础的出初始值。给reduce()和reduceRight()的函数接收4个参数:前一个值,当前值,项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

注:其中,迭代方法every,filter,forEach,map,some都不会修改数组中的包含的值

28b3d91ef8bf2321cd88072662560f76.png
concat()操作方法效果

87b072dd4a1c406708e3d35caf2715bf.png
slice()操作方法预览

3a0a1a5834e40291bf48fbfb39933810.png
splice()操作方法效果预览

b7e6b0730822e411d0005404ae19b11b.png
indexOf()位置方法预览

d2012104650fa62ce17a1f1e38373369.png
数组迭代方法效果一览

b5a516f99654e9ec29211f86a8eb6019.png
缩小方法效果一览
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值