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 相关文章推荐
jQuery1.6 使用方法二
Nov 23 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
Node.js connect ECONNREFUSED错误解决办法
Sep 15 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
vue 递归组件的简单使用示例
Jan 14 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向socket服务器收发数据的方法
2015/01/24 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
浅析vue-router原理
2018/10/19 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
2019/10/10 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python 提取文件的小程序
2009/07/29 Python
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
python基础教程之lambda表达式使用方法
2014/02/12 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python二元表达式用法
2019/12/04 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
Java语言程序设计测试题判断题部分
2013/01/06 面试题
资料员岗位职责
2013/11/17 职场文书
新年寄语大全
2014/04/12 职场文书
2015年客服工作总结范文
2015/04/02 职场文书
实习单位意见
2015/06/04 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
保外就医申请书范文
2015/08/06 职场文书
导游词之太原天龙山
2020/01/02 职场文书