JavaScript数组操作函数汇总

js中数组操作函数还是非常多的,今天忽然想到来总结一下,也算是温故而知新吧。不过不会针对每个办法都进行一下总结,只是针对一些比较常用的做个备注一下。
这里总结到的 js 数组操作函数有:push,pop,join,shift,unshift,slice,splice,concat
(1)push 和 pop
这两个函数都是对数组从尾部进行压入或弹出操作。push(arg1,arg2,...)可以每次压入一个或多个元素,并返回更新后的数组长度。注意如果参数也是数组的话,则是将全部数组当做一个元素压入到原本的数组里面去。pop() 函数则每次只会弹出结尾的元素,并返回弹出的元素,若是是对空组数调用 pop() 则返回undefined。
示例:
var oldArr=[1,2,3];
alert(oldArr.push(4,[5,6]))//这里只会将[5,6]当做一个元素来策画,返回更新后的数组长度5
此时 oldArr = [1,2,3,4,[5,6]]
oldArr.pop()//这里弹出最后一个元素[5,6],而不是6
此时 oldArr = [1,2,3,4]
oldArr.pop()-->4
oldArr.pop()-->3
oldArr.pop()-->2
oldArr.pop()-->1
alert(oldArr.pop())-->undefined(空数组弹出)

(2)unshift 和 shift
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。
请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。另外在 Internet Explorer 浏览器中 unshift() 无法执行!
如下示例,我们将创建一个数组,并把一个元素添加到数组的开头,并返回数组的新长度:

<script type="text/javascript">
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
4
William,George,John,Thomas
shift() 用于将数组的第一个元素从原数组中删除,并返回第一个元素的值(即被删除的元素的值)。
注意:若数组是空的,那么 shift() 将不进行任何操纵,直接返回 undefined 值。另外该方法也不创建新数组,而是直接修改原有的 arrayObject。
示例:在本例中,我们将创建一个数组,并删除数组的第一个元素:

<script type="text/javascript">
var arr = new Array
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
George
John,Thomas

(3)join()
作用是将数组各个元素是通过指定的分隔符进行连接成为一个字符串。其作用和toString()相同。
语法
arrayObject.join(separator)
参数 separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
示例:

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

输出
George,John,Thomas

(4)slice()
该方法可从已有的数组中返回选定的元素
语法
arrayObject.slice(start,end)
返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
注意:您可使用负值从数组的尾部选取元素。如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
示例:

<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join() + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr.join())
</script>

输出:
George,John,Thomas
John,Thomas
George,John,Thomas

(5)splice()
该方法用于插入、删除或替换数组的元素。
语法
arrayObject.splice(index,howmany,element1,.....,elementX)
返回值
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
说明
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。需要注意的是 splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
示例:
例子 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.join() + "<br />")
arr.splice(2,0,"William")
document.write(arr.join() + "<br />")
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
例子 2
在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:

<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.join() + "<br />")
arr.splice(2,1,"William")
document.write(arr.join())
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
例子 3
在本例中我们将删除从 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.join() + "<br />")
arr.splice(2,3,"William")
document.write(arr.join())
</script>

输出:
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

(6)contact()
该方法用于连接两个或多个数组。它不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,......,arrayX)
示例:
例子 1
在本例中,我们将把 concat() 中的参数连接到数组 a 中:

<script type="text/javascript">
var a = [1,2,3];
document.write(a.concat(4,5));
</script>

输出:
1,2,3,4,5
例子 2
在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

<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>

输出:
George,John,Thomas,James,Adrew,Martin
例子 3
在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

<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>

输出:
George,John,Thomas,James,Adrew,Martin,William,Franklin

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js数组操作学习总结

    shift:删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefinedvar a = [1,2,3,4,5];var b = a.shift(); 结果 a:[2,3,4,5]     b:1 unshift:将参数添加到原数组开头,并返回数组的长度var a = [1,2,3,4,5];var b = a.unshift(-2,-1); 结果 a:[-2,-1,1,2,3,4,5]      b:7 注:在IE6.0下测试返回值总为undefined,FF2.0下测试返回值为7

  • JavaScript中的数组操作介绍

    JavaScript中的数组对象自带了一些方法,可以通过使用这些方法来对数组进行操作. join() 可以使用join()方法将数组中的成员合并到一个字符串中: 复制代码 代码如下: var o = [1,2,3]; console.log(o.join());//1,2,3 console.log(o.join(" "));//1 2 3 var emptyArray = new Array(10); console.log(emptyArray.join("-"

  • JS数组操作中的经典算法实例讲解

    冒泡排序 <script type="text/javascript"> var arr = [3,7,6,2,1,5]; 定义一个交换使用的中间变量 var temp = 0; for(i=0;i<arr.length;i++){ for(j=0;j<arr.length;j++){ 如果下一个元素小于当前元素 if(arr[j]>arr[j+1]){ 互换 temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = tem

  • js数组操作方法总结(必看篇)

    判断数值数组中各个数字出现的奇偶次数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>数组操作</title> </head> <body> <script type="text/javascript"> var arr=[3,1,2,2,1,3,1

  • js数组操作常用方法

    在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像JSON数据是以数组的形式出现的,查阅了下相关JS中数组的操作一试果然很爽. 记录下来. 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不

  • JavaScript数组操作详解

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规

  • js常用数组操作方法简明总结

    //javascript 中的数组分割 var colors = ["red","green","blue"]; //alert(colors.toString()); alert(colors.join("|")); //返回结果是red|green|blue var colors = ["red","green","blue",null]; alert(color

  • javascript 数组操作详解

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长

  • Javascript数组操作函数总结

    其实平时用的比较多的应该是push和pop,不过还是都记下来,以便后面使用. shift :删除原数组第一项,并返回删除元素的值:如果数组为空则返回undefined 复制代码 代码如下: var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift :将参数添加到原数组开头,并返回数组的长度 复制代码 代码如下: var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); //a:[-2,-

  • JavaScript数组操作函数汇总

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

  • 27个JavaScript数组常见方法汇总与实例说明

    1. push() 概括:数组末位增加 参数:需要增加的数据 返回值:数组更新后的长度 let arr = [1,2,3] arr.push(1) // 返回新增后的数组长度 4 arr.push() // 不传参数默认不新增 4 arr.push(1,2,3) // 新增多条数据时,返回新增完成后的数组长度 7 2. pop() 概括:数组末位删除 参数:无 返回值:删除的数据 let arr = [3] arr.pop() // 返回已删除的数据 3 arr.pop() // 当数组数据为空

  • javascript数组去重方法汇总

    javascript数组去重方法汇总 Array.prototype.unique1 = function () { var n = []; //一个新的临时数组 for (var i = 0; i < this.length; i++) //遍历当前数组 { //如果当前数组的第i已经保存进了临时数组,那么跳过, //否则把当前项push到临时数组里面 if (n.indexOf(this[i]) == -1) n.push(this[i]); } return n; }; Array.pro

  • 20个常见的JavaScript数组操作总结

    目录 声明数组 1. 常规方式 2. 简洁方式 3. 字面 Array 对象方法 1. forEach 2. map 3. concat 4. push 5. unshift 6. pop 7. shift 8. splice 9. slice 10. join 11. every 12. filter 13. indexOf 14. reduce 15. reverse 16. sort 17. toString 18. at 19. find 20. some JavaScript中的Arr

  • JavaScript数组操作总结

    目录 1.定义 2.数组的本质 3.数组的length 4. in 5. for…in 6.数组的空位 7.类数组(伪数组) 总结 1.定义 数组是按次序依次排列的一组值 任何数据类型都可以放入数组 数组可以嵌套形成多维数组 const arr = [0,'1',{},function(){}]; //二维数组 const arr1 = [1,2,[3,4,5],6]; 2.数组的本质 数组是一种特殊的对象,数组的key是正整数字符串,我们一般使用数字键操作数组,会自动转换成字符串 const

  • JavaScript常用工具函数汇总(浏览器环境)

    前端业务中比较常用的JavaScript工具函数,浏览器环境常用,可直接拷贝在项目里使用.这里统一整理,方便查阅,本文章会持续更新. 一.file转为base64 /** * file转为base64 * @param {*} file file对象 * @param {*} callback */ export const fileToDataURL = (file, callback) => { let freader = new FileReader(); freader.readAsDa

  • JavaScript数组操作之旋转二维数组

    目录 一.题目描述​ 二.思路与实现 三.总结 一.题目描述​ 给定一个 n × n 的二维矩阵 matrix 表示一个图像.请你将图像顺时针旋转 90 度. 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要 使用另一个矩阵来旋转图像. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出:[[7,4,1],[8,5,2],[9,6,3]] 示例 2: 输入:matrix = [[5,1,9,11],[2,4,8,10],[13,3,

  • javascript数组操作(创建、元素删除、数组的拷贝)

    1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以

  • javascript数组操作总结和属性、方法介绍

    一.数组的操作 1.数组的创建 复制代码 代码如下: var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);//创建一个数组并赋值 要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了

随机推荐