JavaScript数组操作函数汇总


Posted in Javascript onAugust 05, 2016

js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧。不过不会针对每个办法都进行一下总结,只是针对一些比较常用的做个备注一下。
这里总结到的 js 数组操作函数有:push,pop,join,shift,unshift,slice,splice,concat
(1)push 和 pop
这两个函数都是对数组从尾部进行压入或弹出操作。push(arg1,arg2,...)可以每次压入一个或多个元素,并返回更新后的数组长度。注意如果参数也是数组的话,则是将全部数组当做一个元素压入到原本的数组里面去。pop() 函数则每次只会弹出结尾的元素,并返回弹出的元素,若是是对空组数调用 pop() 则返回undefined。
示例:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))//这里只会将[5,6]当做一个元素来策画,返回更新后的数组长度5
此时 oldArr = [1,2,3,4,[5,6]]
oldArr.pop()//这里弹出最后一个元素[5,6],而不是6
此时 oldArr = [1,2,3,4]
oldArr.pop()-->4
oldArr.pop()-->3
oldArr.pop()-->2
oldArr.pop()-->1
alert(oldArr.pop())-->undefined(空数组弹出)

(2)unshift 和 shift
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。另外在 Internet Explorer 浏览器中 unshift() 无法执行!
如下示例,我们将创建一个数组,并把一个元素添加到数组的开头,并返回数组的新长度:

<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
4
William,George,John,Thomas
shift() 用于将数组的第一个元素从原数组中删除,并返回第一个元素的值(即被删除的元素的值)。
注意:若数组是空的,那么 shift() 将不进行任何操纵,直接返回 undefined 值。另外该方法也不创建新数组,而是直接修改原有的 arrayObject。
示例:在本例中,我们将创建一个数组,并删除数组的第一个元素:

<script type="text/javascript">
var arr = new Array
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
George
John,Thomas

(3)join()
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。其作用和toString()相同。
语法
arrayObject.join(separator)
参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
示例:

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())

输出
George,John,Thomas

(4)slice()
该方法可从已有的数组中返回选定的元素
语法
arrayObject.slice(start,end)
返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
注意:您可使用负值从数组的尾部选取元素。如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
示例:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
John,Thomas
George,John,Thomas

(5)splice()
该方法用于插入、删除或替换数组的元素。
语法
arrayObject.splice(index,howmany,element1,.....,elementX)
返回值
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
说明
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。需要注意的是 splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
示例:
例子 1
在本例中,我们将创建一个新数组,并向其添加一个元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,0,"William")
document.write(arr.join() + "<br />")
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
例子 2
在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,1,"William")
document.write(arr.join())
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
例子 3
在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:

<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.join() + "<br />")
arr.splice(2,3,"William")
document.write(arr.join())
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

(6)contact()
该方法用于连接两个或多个数组。它不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
示例:
例子 1
在本例中,我们将把 concat() 中的参数连接到数组 a 中:

<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>

输出:
1,2,3,4,5
例子 2
在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>

输出:
George,John,Thomas,James,Adrew,Martin
例子 3
在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>

输出:
George,John,Thomas,James,Adrew,Martin,William,Franklin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
javascript读写json示例
Apr 11 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
有关jquery与DOM节点操作方法和属性记录
Apr 15 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Jquery获取当前城市的天气信息
Aug 05 #Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 #Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 #Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 #Javascript
同步文本框内容JS代码实现
Aug 04 #Javascript
JS打印组合功能
Aug 04 #Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 #Javascript
You might like
ajax 的post方法实例(带循环)
2011/07/04 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
webpack多页面开发实践
2017/12/18 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
2018/01/03 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
详解Django 时间与时区设置问题
2019/07/23 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
小区推广策划方案
2014/06/06 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
新郎结婚保证书
2015/02/26 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Vue如何清空对象
2022/03/03 Vue.js