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 jsFiddle JSBin在线调试器
Mar 14 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
vuex存储token示例
Nov 11 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
html实现随机点名器的示例代码
Apr 02 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源码之 ext/mysql扩展部分
2009/07/17 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python利用IPython提高开发效率
2016/08/10 Python
Python 数据结构之队列的实现
2017/01/22 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
Django 用户认证组件使用详解
2019/07/23 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
家长会演讲稿
2014/04/26 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
党小组意见范文
2015/06/08 职场文书