`

js中操作数组的几个常用方法

    博客分类:
  • js
 
阅读更多

1. Array.shift()------删除并返回第一个元素

作用:从数组中删除第一个元素(即下标为0的元素),并返回该元素。

注意:1)删除元素之后,数组的长度-1。2)如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。

示例: 

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)

</script>

 结果: 

George,John,Thomas
George
John,Thomas
 

 2.Array.pop()------删除并返回最后一个元素

作用:从数组中删除最后一个元素(即下标为length-1的元素),并返回该元素。

注意:1)删除元素之后,数组的长度-1。2)如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。

示例: 

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.pop() + "<br />")
document.write(arr)

</script>

 结果:  

George,John,Thomas
Thomas
George,John
 

3. Array.push(param1[,param2,...paramN])------尾部添加元素

作用:在数组的尾部添加一个元素,并返回新数组的长度。

注意:1)它是直接修改该数组,而不是重新创建一个数组。2)它和pop是一对相反的先进后出的栈功能方法。3)它可以同时给一个数组添加多个元素。

示例:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

</script>
  结果: 
George,John,Thomas
4
George,John,Thomas,James

 

4. Array.unshift(newElement1[,newElement2,...newElementN])------头部添加元素

作用:在数组的头部添加一个或多个元素,并返回新数组的长度。

注意:1)它是直接修改该数组,而不是重新创建一个数组。2)IE浏览器不支持该方法。

示例:

<script type="text/javascript">

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

</script>
  结果: 
George,John,Thomas
4
William,George,John,Thomas

  

5.Array.join([separator])------转换成字符串

作用:把数组的所有元素放入到一个字符串中。

注意:1)参数separator表示字符串中元素的分隔符,可以为空,默认为半角逗号。2)该方法并不修改数组。

示例: 

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.join(.) + "<br />")
document.write(arr.join() + "<br />")
document.write(arr)

</script>

 结果:  

George,John,Thomas
George,John,Thomas
George,John,Thomas
George.John.Thomas
 

 6. Array.contact(array1[,array2,...arrayN])------连接数组

作用:将两个或两个以上的数组连接成一个数组,并返回连接后的数组。

注意:1)该方法并不会改变现有的数组,而是返回被连接的多个数组的一个副本。2)如果多个数组里有值相同的元素,那也不会重复出现,而不会把重复的元素过滤掉。

示例1:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))

</script>
 结果1: 
George,John,Thomas,James,Adrew,Martin

示例2:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3))

</script>

 结果2: 

George,John,Thomas,James,Adrew,Martin,William,Franklin

 

7.Array.reverse()------反转数组

作用:把数组的所有元素顺序反转。

注意:1)该方法会直接修改数组,而不会创建新的数组。

示例: 

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())

</script>

 结果:  

George,John,Thomas
Thomas,John,George
 

8. Array.slice(start[, end])------截取数组

作用:截取数组中指定位置的元素,并返回一个新的子数组。

注意:1)该方法并不会改变现有的数组,而是原数组的一个子数组。2)参数start是必选,表示开始下标,如果start为负数,表示从末尾开始,-1表示最后一个元素,依次类推。3)end是可选表示结束下标,如果没有指定,表示到结尾元素。

示例:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)

</script>
 结果: 
George,John,Thomas
John,Thomas
George,John,Thomas

 

9.Array.splice()------删除指定元素

作用:从数组指定位置删除指定数量的元素,并返回被删除的元素。

注意:1)该方法会直接修改数组。2)splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改,而slice只是截取原数组的一部分后返回一个子数组,并不会修改原数组。

示例1: 向指定位置插入一个元素

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

 结果1:  

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

 示例2: 删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

结果2:  

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

  

10. Array.toString()------转换成字符串

作用:数组转换为字符串,并返回该字符串。

注意:1)该方法和不带参数的join()方法效果一样。

示例: 

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toString())

</script>

 结果: 

George,John,Thomas

 

 

 

 

 

分享到:
评论

相关推荐

    JavaScript 批量创建数组的方法

    JavaScript有许多批量创建数组的方法,为了衡量它们的性能,我分别使用...以下为常用的几个创建数组的方法以及它们所耗费的时间: 使用join和split 该方法把大量时间耗费在了map操作上,去掉map后只需要2ms 使用apply

    JavaScript实现删除数组重复元素的5种常用高效算法总结

    本文实例讲述了JavaScript实现删除数组重复元素的5种常用高效算法。分享给大家供大家参考,具体如下: 这里就 js 如何实现数组去重整理出5种方法,并附上演示Demo 以及 源码。 1.遍历数组法 最简单的去重方法, 实现...

    JS常用的几种数组遍历方式以及性能分析对比实例详解

    这一篇与上一篇 JS几种变量交换方式以及性能分析对比 属于同一个系列,本文继续分析JS中几种常用的数组遍历方式以及各自的性能对比 起由 在上一次分析了JS几种常用变量交换方式以及各自性能后,觉得这种方式挺好的,...

    javascript实现数组去重的方法

    数组去重是一个比较常见的算法考察点,实现去重的方式无非就是唯一性或者非唯一性,简而言之,就是选出唯一的或者去掉不唯一的,下面总结了几种方法。 方法一:利用双层for循环通过原数组去重,就是遍历数组,把数组...

    javascript数组去重常用方法实例分析

    本文实例讲述了javascript数组去重常用方法。分享给大家供大家参考,具体如下: 数组去除重复值是面试常考内容,也是很容易用到的一个技巧,下面就几种去重的方法进行介绍。 首先是最常见的方法,也就是添加一个临时...

    JS合并数组的几种方法及优劣比较

    我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点. 我们先来看看具体的场景: 代码如下: var q = [ 5, 5, 1, 9, 9, 6, 4, 5, 8]; var b = [ “tie”, “mao”, “csdn”, “ren”, “fu”, ...

    JavaScript几种数组去掉重复值的方法推荐

    数组去重复是一个常见的需求,我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法,网上基本都有,这里只是简单地总结一下。 思路: 1.遍历数组,一一比较,比较到相同的就删除后面的 2.遍历...

    Javascript获取数组中的最大值和最小值的方法汇总

    比较数组中数值的大小是比较常见的操作,比较大小的方法有多种,比如可以使用自带的sort()函数,下面来介绍如下几种方法,代码如下: 方法一: //最小值 Array.prototype.min = function() { var min = this[0]; var...

    javascript删除数组元素的七个方法示例

    前面调侃了几句,回归正题,这里要总结7个在JavaScript中删除Array元素的方法,分别是利用length属性、delete关键字、pop()栈方法、shift()队列方法、splice()操作方法、forEach()或filter()迭代方法和prototype原型...

    js 数组详细操作方法及解析合集

    在开发中,数组的使用场景非常多,平日中也涉及到很多数组的api/相关操作,一直也没有对这块内容进行一块整理总结,很多时候就算用过几次这个api,在开发中也很容易忘记,还是要谷歌一下。所以就希望对这块内容有一...

    JavaScript原生数组Array常用方法

    在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), sort(), reverse(), 而concat()和slice()不属于变异方法. 在这里就复习一下Array所提供的这几个方法的使用

    javascript入门笔记

    Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史: 1、1992年 Nombas 开发...

    JavaScript数组排序的六种常见算法总结

    开发中,遇到数组排序的需求很频繁,这篇文章会介绍几个常见排序思路。 一、希尔排序(性能最好) 如果要从大到小排列,则 while(arr[n] &gt; arr[n – interval] && n &gt; 0) 。 // 希尔排序算法 function xier(arr){ ...

    js克隆对象、数组的常用方法介绍

    以下几种方法都是复制一个新的对象或者数组,但是如果直接通过parent【iframe情况】的方式去父窗口的对象的时候会有问题,感兴趣的朋友可以了解下

    Android解析json数组对象的方法及Apply和数组的三个技巧

    json是种常用的数据传输格式,在android开发中,如何借助java语言实现对json数组对象的解析呢,请参阅下面的关键代码: import org.json.JSONArray; import org.json.JSONObject; //jsonData的数据格式:[{ id: 27...

    Zhangmou77#Blog-JavaScript#JavaScript专题之如何求数组的最大值和最小值1

    前言取出数组中的最大值或者最小值是开发中常见的需求,但你能想出几种方法来实现这个需求呢?JavaScript 提供了 Math.max 函数返回一组数中的最大值

    javascript数组去重小结

    最近为了换工作,准备下面试,开始回顾复习JavaScript相关的知识,昨天下午想到了数组去重的相关方法,干脆整理出几篇JavaScript算法文章,以备后用,此系列文章不定篇数,不定时间,想到哪写到哪,不保证正确性,不...

    107个常用javascript语句

    107个常用javascript语句 -7.焦点 .focus(); -6.捕获对象通用方法 function $(obj) {return document.getElementById(obj);} ("") %&gt; -5.字符串赋值数组var array=new Array(); array=tdrczpdata.split('&lt;BR&gt;'); ...

    wats1020-arrays-functions:一项旨在练习在 Javascript 中使用数组和函数的作业

    在这个作业中,我们将探索使用函数来封装逻辑,我们将使用数组来帮助我们处理文本。 场景是这样的:你在一个网站上工作,我们需要一个允许我们“截断”文本的 Javascript 函数。 截断是缩短某些内容的过程,我们在...

    前端Javascript相关面试基础问答整理md

    从“原始值和引用值类型及区别”到“EventLoop事件循环&宏任务和微任务 ”,整理了Javascript学习和面试中遇到的一些基础和常见的问题。 总共包含33个问答,部分问题带有代码解答。 1. 原始值和引用值类型及区别 2. ...

Global site tag (gtag.js) - Google Analytics