JavaScript数组函数unshift、shift、pop、push使用实例

如何声明数组

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函数操作都会在数组本身上修改。

赞 (0)

相关推荐

  • Js数组的操作push,pop,shift,unshift等方法详细介绍

    js中针对数组操作的方法还是比较多的,今天突然想到来总结一下,也算是温故而知新吧.不过不会针对每个方法进行讲解,我只是选择其中的一些来讲. 首先来讲一下push和pop方法,这两个方法只会对数组从尾部进行压入或弹出,而且是在原数组进行操作,任何的改动都是会影响到操作的数组.push(args)可以每次压入多个元素,并返回更新后的数组长度.pop()函数每次只会弹出最后一个结尾的元素,并返回弹出的元素,如果是对空组数调用pop()则返回undefined. 如果参数是数组则是将整个数组当做一个元素

  • Javascript数组中push方法用法分析

    本文实例讲述了Javascript数组中push方法用法.分享给大家供大家参考,具体如下: 看下面代码: var o = { 1:'a' ,2:'b' ,length:2 ,push:Array.prototype.push }; o.push('c'); Q:o现在内部的值是什么样子? 我的第一反应是排斥,为什么要研究不合理情况下[解释引擎]的行为?但是这种推论有时候又很吸引人,于是我回来的时候仔细思考了下,发现其实很简单. 对于push这个方法,我条件反射地想到的就是栈,[数据结构的经典栈]

  • 关于JS数组追加数组采用push.apply的问题

    关于JS数组追加数组采用push.apply的问题

    复制代码 代码如下: a = new Array();b = new Array(125624);                     a.push.apply(a, b); 以上的代码在mac的chrome下抛出了如下的异常 复制代码 代码如下: Uncaught RangeError: Maximum call stack size exceeded 如果把数组改为b = new Array(125623);小一个元素居然就好了,测试了一下其他浏览器也都有大数组才出错的问题,但不同浏览器

  • js 数组操作之pop,push,unshift,splice,shift

    复制代码 代码如下: <script>    Array.prototype.pop=function(){         if(this.length!=0)this.length--;         return this;         } pop 方法   移除数组中的最后一个元素并返回该元素. arrayObj.pop( ) 必选的 arrayObj 引用是一个 Array 对象. 说明   如果该数组为空,那么将返回 undefined. 复制代码 代码如下: var a=[

  • javascript使用数组的push方法完成快速排序

    排序的方法有很多,本节介绍的是使用数组的push方法完成快速排序 function quickSort(arr){ if(arr.length <= 1) return arr;//判断是否有效数组 var cut = Math.floor(arr.length/2);//取中间下标 var left = [],right = []; var num = arr.splice(cut,1)[0];//取基准值 for(var i = 0;i < arr.length;i ++){ if(arr

  • JavaScript使用push方法添加一个元素到数组末尾用法实例

    本文实例讲述了JavaScript使用push方法添加一个元素到数组末尾的用法.分享给大家供大家参考.具体如下: 下面的代码演示了JS数组通过push方法添加一个元素到数组末尾 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to add a new element to the array. </p> <button onclick="

  • JS数组合并push与concat区别分析

    本文实例讲述了JS数组合并push与concat区别.分享给大家供大家参考,具体如下: 注意 concat 拼写,二者功能很相像,但有两点区别. 先看代码: var arr = []; arr.push(1); arr.push([2, 3]); arr.push(4, 5); arr = arr.concat(6); arr = arr.concat([7, 8]); arr = arr.concat(9, 10); arr.each(function(index, value){ alert

  • JavaScript数组函数unshift、shift、pop、push使用实例

    如何声明数组 s中数组的声明可以有几种方式声明 复制代码 代码如下: var tmp = [];  // 简写模式 var tmp = new Array(); // 直接new一个 var tmp = Array();  // 或者new也可以 在new数组的时候可以传入一个参数,表示数组的初始化长度 复制代码 代码如下: // new的时候传入一个参数表示初始化数组长度 var tmp = new Array(3);   alert(tmp.length);  // 3 但如果你想创建一个只

  • JavaScript 常用函数

    javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认对话框,包括OK.Cancel按钮. (3)escape函数:将字符转换成Unicode码. (4)eval函数:计算表达式的结果. (5)isNaN函数:测试是(true)否(false)不是一个数字. (6)parseFloat函

  • 简介JavaScript中的unshift()方法的使用

    JavaScript数组的 unshift()方法将一种或多种元素添加到数组的开头,并返回该数组的新长度. 语法 array.unshift( element1, ..., elementN ); 下面是参数的详细信息: element1, ..., elementN : 元素添加到数组的前面. 返回值: 返回新数组的长度.这将返回undefined(未定义)在IE浏览器.  例子: <html> <head> <title>JavaScript Array unshi

  • JS数组push、unshift、pop、shift方法的实现与使用方法示例

    JS数组push、unshift、pop、shift方法的实现与使用方法示例

    本文实例讲述了JS数组push.unshift.pop.shift方法的实现与使用方法.分享给大家供大家参考,具体如下: 尾部添加(push) push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度. 从解释中可以看出,push方法只要将要添加的元素依次放到数组的最后即可,不会改变原有数组元素的索引.所以循环参数列表,将新元素依次放到数组的最后即可. Array.prototype._push = function(...value) { for (var i = 0; i <

  • javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)

    本文实例讲述了javascript数组对象常用api函数.分享给大家供大家参考,具体如下: 1. concat() 连接两个或多个数组,并返回结果 var a = [1,2,3]; var b = a.concat(6,7); console.log(a); //[1,2,3] console.log(b); //[1,2,3,6,7] 2. join(str) 把数组的所有元素用str分隔,默认逗号分隔 var a = [1,2,3] var b = a.join('|'); console.

  • JavaScript数组操作函数汇总

    js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧.不过不会针对每个办法都进行一下总结,只是针对一些比较常用的做个备注一下. 这里总结到的 js 数组操作函数有:push,pop,join,shift,unshift,slice,splice,concat (1)push 和 pop 这两个函数都是对数组从尾部进行压入或弹出操作.push(arg1,arg2,...)可以每次压入一个或多个元素,并返回更新后的数组长度.注意如果参数也是数组的话,则是将全部数组当做一个元素压

  • JavaScript原生数组函数实例汇总

    在JavaScript中,创建数组可以使用Array构造函数,或者使用数组直接量[],后者是首选方法.Array对象继承自Object.prototype,对数组执行typeof操作符返回object而不是array.然而,[] instanceof Array也返回true.也就是说,类数组对象的实现更复杂,例如strings对象.arguments对象,arguments对象不是Array的实例,但有length属性,并能通过索引取值,所以能像数组一样进行循环操作. 在本文中,我将复习一些数

  • javascript数组中的reduce方法和pop方法

    javascript数组中的reduce方法和pop方法

    目录 一.reduce方法 1直接vs打开 2代码部分 3运行结果 二.pop方 1直接vs打开 2代码部分 3运行结果 前言: 在我们的日常开发中 不免会有很多需要处理数据的方法 本节主要说一说foreach和pop方法的使用​​不多说把代码编辑器打开​​ 一.reduce方法 1直接vs打开 2代码部分 var geyao=[1,3,5]     let sum = arr.reduce(function(prev, cur, index, arr) {     console.log(pr

  • 一文掌握JavaScript数组常用工具函数总结

    目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

  • JavaScript数组push方法使用注意事项

    js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意: 引自 MDN 返回值 当调用该方法时,新的 length 属性值将被返回. var sports = ["soccer", "baseball"]; var total = sports.push("football", "swimming"); console.log(sports); // ["soccer",

随机推荐