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 相关文章推荐
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
Prototype源码浅析 Enumerable部分(二)
Jan 18 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
js实现文本框中焦点在最后位置
Mar 04 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
原生js实现选项卡功能
Mar 08 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
JS实现水平遍历和嵌套递归操作示例
Aug 15 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
php&mysql 日期操作小记
2012/02/27 PHP
PHP的异常处理类Exception的使用及说明
2012/06/13 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
2015/09/17 Javascript
jquery实现拖动效果
2016/08/10 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
React组件refs的使用详解
2018/02/09 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python实现猜数字游戏
2020/03/25 Python
如何基于python操作excel并获取内容
2019/12/24 Python
django admin 添加自定义链接方式
2020/03/11 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
办公室主任职责范本
2014/03/07 职场文书
爱情寄语大全
2014/04/09 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
中秋节晚会开场白
2015/05/29 职场文书
班级联欢会主持词
2015/07/03 职场文书