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 相关文章推荐
javascript tips提示框组件实现代码
Nov 19 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
支付宝小程序实现省市区三级联动
Jun 21 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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中截取字符串支持utf-8
2007/01/18 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
vue实现一拉到底的滑动验证
2019/07/25 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
前端vue如何使用高德地图
2020/11/05 Javascript
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
在pandas多重索引multiIndex中选定指定索引的行方法
2018/11/16 Python
Python 解决相对路径问题:"No such file or directory"
2020/06/05 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
商务英语专业毕业生求职信
2014/07/06 职场文书
社区务虚会发言材料
2014/10/20 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
2014年绿化工作总结
2014/12/09 职场文书
辞职离别感言
2015/08/04 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
施工安全责任协议书
2016/03/23 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL