JavaScript中的数组操作介绍


Posted in Javascript onDecember 30, 2014

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]
Javascript 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
js获取字符串最后一位方法汇总
Nov 13 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
浅谈JavaScript的计时器对象
Dec 26 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
jQuery中:first选择器用法实例
Dec 30 #Javascript
JavaScript中的类数组对象介绍
Dec 30 #Javascript
JavaScript中的方法调用详细介绍
Dec 30 #Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 #Javascript
JavaScript中的类(Class)详细介绍
Dec 30 #Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 #Javascript
jQuery实现ichat在线客服插件
Dec 29 #Javascript
You might like
PHP答题类应用接口实例
2015/02/09 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
详解vue-cli中使用rem,vue自适应
2019/05/06 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
浅析python 字典嵌套
2020/09/29 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
大学同学十年聚会感言
2014/02/21 职场文书
《画》教学反思
2014/04/14 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2016年元旦主持词
2015/07/06 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript