JavaScript中的数组操作介绍

 更新时间:2014年12月30日 08:56:57   投稿:junjie  
这篇文章主要介绍了JavaScript中的数组操作介绍,本文讲解了join()、reverse()、sort()、concat()、slice()、splice()等几个函数的操作实例,需要的朋友可以参考下

JavaScript中的数组对象自带了一些方法,可以通过使用这些方法来对数组进行操作。

 

join()

 

可以使用join()方法将数组中的成员合并到一个字符串中:


复制代码 代码如下:

var o = [1,2,3];
console.log(o.join());//1,2,3
console.log(o.join(" "));//1 2 3
var emptyArray = new Array(10);
console.log(emptyArray.join("-"));//----------


从上面的例子中可以看到,如果join()方法不带参数,那么JavaScript会用逗号作为分隔符将所有的成员合并到一个字符串中;如果join()方法接受参数,那么这个参数会作为分隔符来使用。

reverse()

可以使用reverse()方法将数组中的成员顺序进行颠倒:


复制代码 代码如下:

//reverse()
o.reverse();
console.log(o);//[3,2,1]


可以看到,调用reverse()语句后,数组自身将发生改变。

执行reverse()语句的返回结果为发生改变后的数组对象。

sort()

可以使用sort()方法对数组中的成员进行排序(默认以字母顺序排列)。与reverse()语句一样,sort()语句会对数组自身进行修改并返回修改后的数组对象:


复制代码 代码如下:

var a = ["Phone", "Mobile",,,"Canon"];
a.sort();
console.log(a);//["Canon", "Mobile", "Phone", undefined, undefined]
var b = [33,44,111];
console.log(b.sort());//[111, 33, 44]
console.log(b.sort(function(a,b){return a-b}));//[33, 44, 111]


可以看到,sort()语句还接受一个function作为参数来实现自定义排序。

concat()

可以使用concat()方法对数组进行拼接:


复制代码 代码如下:

var c = [1,2,3];
console.log(c.concat(4));//[1, 2, 3, 4]
console.log(c.concat(5,6));//[1, 2, 3, 5, 6]
console.log(c.concat([7,8]));//[1, 2, 3, 7, 8]
console.log(c.concat([9,10], [11,12]));//[1, 2, 3, 9, 10, 11, 12]
console.log(c.concat([42,43,[44,45]]));//[1, 2, 3, 42, 43, [44, 45]]
console.log(c);//[1, 2, 3]


可以看到,与reverse()和sort()不同,concat()语句仅仅只是返回拼接后的结果而已,对数组自身不会产生任何修改。

slice()

可以使用slice()语句来获取数组中的子数组(sub-array):

复制代码 代码如下:

var d = [1,2,3,4,5,6];
console.log(d.slice(0,3));//[1,2,3]
console.log(d.slice(3,1));//[]

与concat()一样,slice()语句仅仅只是返回操作后的结果而已,对数组自身不会产生任何修改。对于slice()语句中的两个参数,JavaScript遵循“前包括后不包括”的原则:第一个参数所指定的数组成员会出现在子数组中,而第二个参数所指定的数组成员则不会出现。

splice()

可以使用splice()语句来对数组进行插入和敲除操作。其第一个参数指定插入或敲除的位置(位置成员),第二个参数指定敲除成员的数目(从位置成员开始敲除),从第三个参数开始,所有的参数都会被插入到数组中(从位置成员之前进行插入)。splice()语句返回的结果为被敲除的数组成员所组成的数组。与concat()和slice()不同,splice()会对数组自身产生修改。


复制代码 代码如下:

var e = [1,2,3,4,5,6,7];
console.log(e.splice(1,2));//[2,3]
console.log(e);//[1,4,5,6,7]
console.log(e.length);//5
e.splice(1,0,2,3,[4,5]);
console.log(e);//[1, 2, 3, [4, 5], 4, 5, 6, 7]

相关文章

  • 写了个XML+Tree无穷树js版

    写了个XML+Tree无穷树js版

    写了个XML+Tree无穷树js版...
    2007-09-09
  • 微信小程序iOS下拉白屏晃动问题解决方案

    微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • javascript省市区三级联动下拉框菜单实例演示

    javascript省市区三级联动下拉框菜单实例演示

    这篇文章主要为大家详细介绍了javascript实现省市区三级联动下拉框菜单很详细的代码,解决了大家实现javascript省市区三级联动下拉框菜单的问题,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • js通过八个点 拖动改变div大小的实现方法

    js通过八个点 拖动改变div大小的实现方法

    本篇文章主要是对js通过八个点 拖动改变div大小的实现方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript合并两个数组并去除重复项的方法

    JavaScript合并两个数组并去除重复项的方法

    这篇文章主要介绍了JavaScript合并两个数组并去除重复项的方法,涉及javascript操作数组的合并与去重的相关技巧,需要的朋友可以参考下
    2015-06-06
  • js 时间格式与时间戳的相互转换示例代码

    js 时间格式与时间戳的相互转换示例代码

    很多的新手朋友们对js中的时间格式与时间戳的转换比较陌生,下面就为大家详细介绍下具体的转换步骤,感兴趣的朋友可以参考下
    2013-12-12
  • 用javascript实现截取字符串包含中文处理的函数

    用javascript实现截取字符串包含中文处理的函数

    一直不知道js可以截取中文字符,呵呵,原理用正则表达式,匹配中文的长度,中文算两个,因为算一个,是个好东西,推荐大家收藏
    2008-04-04
  • JS HTML5实现拖拽移动列表效果

    JS HTML5实现拖拽移动列表效果

    这篇文章主要为大家详细介绍了JS HTML5实现拖拽移动列表效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • JS在Canvas元素内绘制钟表

    JS在Canvas元素内绘制钟表

    这篇文章介绍了JS在Canvas元素内绘制钟表的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 详解JavaScript中数组的reduce方法

    详解JavaScript中数组的reduce方法

    js函数中有三个在特定场合很好用的函数:reduce(),map(),filter()。而数组经常用到的方法有push、join、indexOf、slice等等,但是有一个经常被我们忽略的方法:reduce,这个方法简直强大的不要不要的。下面通过这篇文章来一起学习学习吧。
    2016-12-12

最新评论