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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
webpack学习--webpack经典7分钟入门教程
Jun 28 Javascript
vue项目中实现的微信分享功能示例
Jan 21 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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 CURL获取邮箱地址的详解
2013/06/03 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
js window.event对象详尽解析
2009/02/17 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
基于windows下pip安装python模块时报错总结
2018/06/12 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python实现人像动漫化的示例代码
2020/05/17 Python
python与pycharm有何区别
2020/07/01 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
2020/08/11 HTML / CSS
大学生军训广播稿
2014/01/24 职场文书
文明村创建实施方案
2014/03/27 职场文书
销售代理协议书
2014/09/30 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
邀请书格式范文
2015/02/02 职场文书
辞职信如何写
2015/02/27 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
Vue router配置与使用分析讲解
2022/12/24 Vue.js