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 相关文章推荐
window.event快达到全浏览器支持了,以后使用就方便了
Nov 30 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
js实现功能比较全面的全选和多选
Mar 02 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
原生js 实现表单验证功能
Feb 08 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
vue-router传参用法详解
2019/01/19 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
基于Python的关键字监控及告警
2017/07/06 Python
Django 如何获取前端发送的头文件详解(推荐)
2017/08/15 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
python实现批量修改文件名
2020/03/23 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python中实现输入一个整数的案例
2020/05/03 Python
Python是怎样处理json模块的
2020/07/16 Python
利用Python实现斐波那契数列的方法实例
2020/07/26 Python
numba提升python运行速度的实例方法
2021/01/25 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
无财产离婚协议书范本
2014/10/28 职场文书
2014年租房协议书范本
2014/10/30 职场文书
新生入学欢迎词
2015/01/26 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技