数组常用方法总结:

 下面我只总结了es3中常用的数组方法,一共有11个。es5中新增的9个数组方法,后续再单独总结。

1个连接数组的方法:concat()

2个数组转换为字符串的方法:join()、toString()

6个增删数组元素的方法:pop()、push()、shift()、unshift()、slice()、splice()

2个数组排序方法:reverse()、sort()

连接数组的方法:

1、concat()

作用:连接两个数组,合并为一个新数组。

用法:arr1.concat(arr2,arr2...)

示例:

<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

数组转换为字符串的方法:

1、join()

作用:用于把数组中的所有元素放入一个字符串。并通过指定的分隔符进行分隔。

用法:arrayObject.join(separator)

示例:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr.join("."))

</script>

输出:

George.John.Thomas

注意:返回值为一个字符串。如果没有分隔符,默认以逗号分隔。

2、toString()

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

用法:arrayObject.toString()

示例:

<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

返回值与没有参数的 join() 方法返回的字符串相同。数组中的元素之间用逗号分隔。

增删数组元素的方法:

1、pop()

作用:用于删除并返回数组的最后一个元素。

用法:arrayObject.pop()

pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。

示例:

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

</script>

输出:

George,John,Thomas

Thomas

George,John

2、push()

作用:可向数组的末尾添加一个或多个元素,并返回新的长度。

用法:arrayObject.push(newelement1,newelement2,....,newelementX)

它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

示例:

<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

3、shift()

作用:用于把数组的第一个元素从其中删除,并返回第一个元素的值。

用法:arrayObject.shift()

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject。

示例:

<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

4,unshift()

作用:可向数组的开头添加一个或更多元素,并返回新的长度。

用法:arrayObject.unshift(newelement1,newelement2,....,newelementX)

unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。unshift() 方法无法在 Internet Explorer 中正确地工作!

示例:

<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,slice()

作用:可从已有的数组中返回选定的元素。

用法:arrayObject.slice(start,end)

start

必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。

该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。

<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

6,splice()

作用:向/从数组中添加/删除项目,然后返回被删除的项目。

用法:arrayObject.splice(index,howmany,item1,.....,itemX)

index

必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany

必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX

可选。向数组添加的新项目。

该方法会改变原始数组。

示例:

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

输出:

George,John,Thomas,James,Adrew,Martin

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

数组元素排序:

1、reverse()

作用:用于颠倒数组中元素的顺序。

用法:arrayObject.reverse()

该方法会改变原来的数组,而不会创建新的数组。

示例:

<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

2,sort()

作用:用于对数组的元素进行排序。

用法:arrayObject.sort(sortby)

Sortby:可选,按规定是顺序排序。必须是函数。

相对于其他方法来说复杂了一点。

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

  • 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
  • 若 a 等于 b,则返回 0。
  • 若 a 大于 b,则返回一个大于 0 的值。
<script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}
var arr = new Array(6) arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + "<br />") document.write(arr.sort(sortNumber)) </script>

输出:

10,5,40,25,1000,1

1,5,10,25,40,1000

上面这个例子是让数组元素从小到大排序,如果想实现从大到小排序,只需要将sortNumber函数中的a-b改为b-a即可。

<script type="text/javascript">

function sortNumber(a,b)

{

return b - a;

}

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

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

document.write(arr.sort(sortNumber))

</script>

输出:

10,5,40,25,1000,1

1000,40,25,10,5,1

补充:

数组对象的属性:

属性

描述

constructor

返回对创建此对象的数组函数的引用。

length

设置或返回数组中元素的数目。

prototype

使您有能力向对象添加属性和方法。

 

以下这个例子展示了如何使用constructor属性

<script type="text/javascript">

var test=new Array();

if (test.constructor==Array)

{

document.write("This is an Array");

}

if (test.constructor==Boolean)

{

document.write("This is a Boolean");

}

if (test.constructor==Date)

{

document.write("This is a Date");

}

if (test.constructor==String)

{

document.write("This is a String");

}

</script>

输出:

This is an Array

length 属性可设置或返回数组中元素的数目。数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素,而且以元素 0 开始的常规数组而言,属性 length 声明了数组中的元素的个数。设置 length 属性可改变数组的大小。如果设置的值比其当前值小,数组将被截断,其尾部的元素将丢失。如果设置的值比它的当前值大,数组将增大,新的元素被添加到数组的尾部,它们的值为 undefined。

获取数组的长度:arrayObject.length

JavaScript基础进阶之数组方法总结的更多相关文章

  1. JavaScript回调函数及数组方法测试

    JavaScript回调函数及数组方法测试 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. JavaScript基础进阶之常用字符串方法总结

    前面三篇文章简单的把JavaScript基础内容过了一遍,我们已经可以用JavaScript写一些简单的代码了. 今天主要总结一下JavaScript中String对象中自带的一些方法,来帮助我们处理 ...

  3. javascript 原生常用api 数组方法大全

     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. JavaScript学习笔记之 数组方法一 堆栈 和队列

    数组的方法 以及 堆栈的操作的方法 JavaScript是一种弱类型语言,不像其它程序语言需要严格定义数据类型.在JavaScript中数组可以任意修改变动,这样也就出现了一个问题,如果边遍历数组边操 ...

  5. 【Javascript 基础】使用数组

    Javascript 数组的工作方式与大多数编程语言的数组类似. <!DOCTYPE html> <html lang="en"> <head> ...

  6. javascript(基础)_对数组的遍历方法总结(find, findIndex, forEach,)

    一.前言                                                                                                ...

  7. JavaScript基础知识(数组的方法)

    数组的方法(15个) 对象数据类型: 数组成员有一个与之对应的索引 length : 代表数组成员的个数: 操作改变数组一些方法:这些数组的方法都是内置的: // 1. 方法作用: // 2. 方法的 ...

  8. JavaScript基础12——js的方法重载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. JavaScript基础学习(三)—数组

    一.数组简介     JavaScript数组的每一项都可以保存任何类型的数据,也就是说数组的第一个位置保存字符串,第二个位置可以保存数值,第三个位置可以保存对象,而且数组的大小是可以动态调整的,即可 ...

随机推荐

  1. Linux进程管理四大工具ps \dstat\ top\ htop

    Linux进程管理之“四大名捕” 一.四大名捕 四大名捕,最初出现于温瑞安创作的武侠小说,是朝廷中正义力量诸葛小花的四大徒弟,四人各怀绝技,分别是轻功暗器高手“无情”.内功卓越的高手“铁手”.腿功惊人 ...

  2. asp.net web api 跨域,带cookie

    官网上有一个介绍 http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api 但是只支 ...

  3. JAVA虚拟机的生命周期

    一个运行时的Java虚拟机实例的天职是:负责运行一个java程序.当启动一个Java程序时,一个虚拟机实例也就诞生了.当该程序关闭退出,这个虚拟机实例也就随之消亡.如果同一台计算机上同时运行三个Jav ...

  4. 实习小结(五)--- SSM框架搭建(Maven项目)

    之前分享了一个普通的SSM框架的搭建方法,感觉还是过于老套,现在都流行使用Maven来管理项目,在这分享一个使用Maven搭建的SSM(SpringMVC+Spring+MyBatis) 1.首先ma ...

  5. Spring boot 入门四:spring boot 整合mybatis 实现CRUD操作

    开发环境延续上一节的开发环境这里不再做介绍 添加mybatis依赖 <dependency> <groupId>org.mybatis.spring.boot</grou ...

  6. 用python写桌面天气预报,自己的学习曲线。

    自从接触python,就被他优雅而简洁的代码所吸引. 举个例子: arr , , , , , , , , , , , , , ] ] 如果用其他语言来写的吗,不会这么简洁,美观.   python还有 ...

  7. 51Nod1584 加权约数和

    这题其实就是反演一波就好了(那你还推了一下午+一晚上),不过第一次碰到\(O(n\log n)\)预处理分块和式的方法-- 不知为啥我跟唐教主的题解推的式子不太一样--(虽然本质上可能是相同的吧) 那 ...

  8. nginx的启动和关闭

    nginx的启动和关闭nginx -h 查看帮助信息nginx -v 查看Nginx的版本号nginx -V 显示Nginx的版本号和编译信息start nginx 启动Nginxnginx -s s ...

  9. C语言各类型大小,结构体大小 sizeof(struct A)

    C语言类型大小总览 编译器pack指令 #pragma pack(n)——定义n字节对齐 C++固有类型的对齐取编译器对齐与自身大小中较小的一个 32位C++默认8字节对齐.gcc编译器默认4字节对齐 ...

  10. html单元格导出excel图形环境问题

     现象:报表页面端展现正常,点击导出excel,选择完是否分页后页面没有反应,后台润乾日志中错误信息: runqianReportLogger : [ERROR]  - Error: at com ...