JavaScript数组函数unshift、shift、pop、push使用实例


Posted in Javascript onAugust 27, 2014

如何声明数组

s中数组的声明可以有几种方式声明

var tmp = [];  // 简写模式

var tmp = new Array(); // 直接new一个

var tmp = Array();  // 或者new也可以

在new数组的时候可以传入一个参数,表示数组的初始化长度
// new的时候传入一个参数表示初始化数组长度

var tmp = new Array(3); 

 

alert(tmp.length);  // 3

但如果你想创建一个只有一个元素3的数组,那么使用 new 方法是不能实现的,因为系统会把你传入的3当作数组的长度,除非你使用引号引起来当作字符串,如
var tmp = new Array('3'); 

alert(tmp);  // 3

我们可以使用简写模式创建数组,这样就可以创建只有一个数字元素3的数组
var tmp = [3]

alert(typeof tmp[0]);  // number

也可以初始多个元素,并且元素的值可以是任意类型
// 简约模式创建数组

// 数组的元素可以是任意一种数据类型

var tmp = [3,true,8.5,{'name':'lizhong'},['a','b']];

alert(tmp.length); // 5

一、unshift 在数组第一个元素前插入元素

// 使用unshift在数组第一个元素前插入元素

// 返回数组长度

var tmp = ['a','b'];

var len = tmp.unshift('c');

alert(len); // 3

alert(tmp); // c,a,b

也可以一次插入多个元素,顺序依次从左边排起
// 使用unshift在数组第一个元素前插入元素

// 返回数组长度

var tmp = ['a','b'];

var len = tmp.unshift('c','d');

alert(len); // 4

alert(tmp); // c,d,a,b

二、shift弹出数组第一个元素,返回被弹出的元素值

小实例:

// 使用shift弹出数组第一个元素

// 返回被弹出的元素值

var tmp = ['a','b','c'];

var val = tmp.shift();

alert(val); // a

alert(tmp); // b,c

如果是一个空数组:
// 使用shift弹出数组第一个元素

// 返回被弹出的元素值

var tmp = [];

var val = tmp.shift();

alert(val); // undefined

alert(tmp); // 空

三、push在数组末尾添加元素

跟unshift相反,push在数组末尾添加元素,返回添加元素以后的数组长度

// 使用push在数组末尾添加多个元素

// 返回数组最新长度

var tmp = ['a','b','c'];

var len = tmp.push('d');

alert(len); // 4

alert(tmp); // a,b,c,d

也可以一次添加多个元素
// 使用push在数组末尾添加多个元素

// 返回数组最新长度

var tmp = ['a','b','c'];

var len = tmp.push('d','e','f');

alert(len); // 6

alert(tmp); // a,b,c,d,e,f

四、pop函数删除数组末尾元素

跟shift相反,pop弹出的是数组末尾元素,返回被弹出的元素值

// 使用pop弹出数组末尾元素

// 返回被弹出的元素值

var tmp = ['a','b','c'];

var val = tmp.pop();

alert(val); // c

alert(tmp); // a,b

如果数组为空,返回undefined
// 使用pop弹出数组末尾元素

// 返回被弹出的元素值

var tmp = [];

var val = tmp.pop();

alert(val); // undefined

alert(tmp); // 空

 
利用以上四个函数,我们可以做一些队列处理,具体案例就不写代码了。
push功能其实也可以这么实现
var tmp = ['a','b','c'];

tmp[tmp.length] = 'd';

alert(tmp); // a,b,c,d

注意:以上四个函数unshift、shift、pop、push函数操作都会在数组本身上修改。
Javascript 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
JavaScript的目的分析
Jan 05 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
JavaScript实现的in_array函数
Aug 27 #Javascript
JavaScript AJAX之惰性载入函数
Aug 27 #Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 #Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 #Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 #Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 #Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 #Javascript
You might like
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
2006/12/23 Javascript
jquery each()源代码
2011/02/14 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
详解Python的循环结构知识点
2019/05/20 Python
使用Pyhton集合set()实现成果查漏的例子
2019/11/24 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python数字类型math库原理解析
2020/03/02 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
家居饰品店创业计划书
2014/01/31 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
个人工作保证书
2015/02/28 职场文书
焦裕禄纪念馆观后感
2015/06/09 职场文书
导游词之河北邯郸
2019/09/12 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python