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 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
图片按比例缩放函数
2006/06/26 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Python单链表简单实现代码
2016/04/27 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
Python3中的bytes和str类型详解
2019/05/02 Python
基于Python函数和变量名解析
2019/07/19 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
做一个有道德的人活动实施方案
2014/08/23 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
2016年国陪研修感言
2015/11/18 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
高中信息技术教学反思
2016/02/16 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS