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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
谈一谈javascript闭包
Jan 28 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 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 自定义错误处理函数trigger_error()
2013/03/26 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
PDO::quote讲解
2019/01/29 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
jquery异步请求实例代码
2011/06/21 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
python如何实现异步调用函数执行
2019/07/08 Python
pytorch 模型可视化的例子
2019/08/17 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
大学军训感言800字
2014/02/27 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
网聊搭讪开场白
2015/05/28 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技