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控制左右箭头滚动图片列表的实例
May 20 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
js实现简单的倒计时
Jan 28 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数据采集的详解
2013/06/02 PHP
PHP设计模式之观察者模式(Observer)详细介绍和代码实例
2014/04/08 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
基于javascript的异步编程实例详解
2017/04/10 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
对django layer弹窗组件的使用详解
2019/08/31 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
中专生自荐信
2013/10/12 职场文书
结婚典礼证婚词
2014/01/08 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
大学开学感言
2015/08/01 职场文书
无故旷工检讨书
2015/08/15 职场文书
反邪教学习心得体会
2016/01/15 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
springboot如何初始化执行sql语句
2021/06/22 Java/Android
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Python requests用法和django后台处理详解
2022/03/19 Python