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入门教程(2) JS基础知识
Jan 31 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
微信小程序开发常见问题及解决方案
Jul 11 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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/08/06 PHP
PHP使用数组实现队列
2012/02/05 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
javascript add event remove event
2008/04/07 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
dess中一个简单的多路委托的实现
2010/07/20 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
jqgrid 表格数据导出实例
2013/11/21 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
在PyCharm中批量查找及替换的方法
2019/01/20 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
小学毕业感言300字
2014/02/19 职场文书
幼儿园优秀班主任事迹材料
2014/05/14 职场文书
党员个人公开承诺书
2014/08/29 职场文书
2015年药房工作总结
2015/04/25 职场文书
工作收入证明模板
2015/06/12 职场文书
医德医风学习心得体会
2016/01/25 职场文书