JavaScript基础进阶之数组方法总结(推荐)

数组常用方法总结:

下面我只总结了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基础进阶之数组方法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • JavaScript之数组(Array)详解

    ECMAScript的数组与其他语言中的数组有着相当大的区别.虽然ECMAScript中的数组也是有序列表,但是它数组你的每一项可以保存任何类型的数据.ECMAScript数组的大小是可以动态调整的.     创建数组的基本方式有两种.第一种是使用Array构造函数,如下所示: 复制代码 代码如下: var colors = new Array(); 如果知道数组要保存的项目数量,也可以给构造函数传递参数,而该参数会自动变成length属性的值,如下: 复制代码 代码如下: var colors

  • 谈谈JavaScript数组常用方法总结

    在JavaScript中,我们需要时常对数组进行操作,现在特将常用方法总结如下: 1.增加数据 在JavaScript为数组增加数据主要分为两种方式. 从数组末尾增加内容:push方法 从数组的前端增加内容:unshift方法 这两种方法的返回值都是数组的长度 var arr=[1,2,3]; //从末尾增加 arr.push(4); console.log(arr);//[1,2,3,4] //从前端增加 arr.unshift(0); console.log(arr);//[0,1,2,3,

  • 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

  • JavaScript基础进阶之数组方法总结(推荐)

    数组常用方法总结: 下面我只总结了es3中常用的数组方法,一共有11个.es5中新增的9个数组方法,后续再单独总结. 1个连接数组的方法:concat() 2个数组转换为字符串的方法:join().toString() 6个增删数组元素的方法:pop().push().shift().unshift().slice().splice() 2个数组排序方法:reverse().sort() 连接数组的方法: 1.concat() 作用:连接两个数组,合并为一个新数组. 用法:arr1.concat

  • JavaScript数组方法大全(推荐)

    数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建 JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy&

  • javascript基础进阶_深入剖析执行环境及作用域链

    执行环境 执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象. 变量对象 环境中定义的所有变量和函数都保存在这个对象中. 全局执行环境 全局执行环境是最外围的一个执行环境.在web浏览器中,全局执行环境被认为是Window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的. 每个函数都有自己的执行环境. 作用域链 当代码在一个环境中执行,会创建变量对象的一个作用域链. 用途:保证对执行环境有权访问的所有变量和函数有序访问.

  • Javascript基础教程之数组 array

    字符串,数值,布尔值都属于离散值(scalar),如果某个变量是离散的,那么任何时候它只有一个值. 如果想使用变量存储一组值,就需要使用数组(array). 数组是由多个名称相同的树值构成的集合,集合中每个数组都是数组的元素(element),可以使用变量team存储团队里每个成员的名字. 在JavaScript中,数组使用关键字 Array声明创建,同事还可以声明变量的长度length.例如 复制代码 代码如下: var aTeam = new Array(12);//声明变量的长度 在无法预

  • JavaScript中array.reduce()数组方法的四种使用实例

    目录 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 Array.prototype.reduce() 是数组中最强大的方法之一,也是 JavaScript 函数式编程中一个吸引人的特性.但不幸的是,我发现很多朋友不习惯使用它 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.

  • 详解JavaScript es6的新增数组方法

    目录 1. forEach() 2. arr.filter() 3. arr.every() 4. arr.map() 5. arr.some() 总结 1. forEach() 遍历数组,无return 即使有return,也不会返回任何值,并且会影响原来的数组 callback的参数 value --当前索引的值 index --索引 arr --原数组 let arr = ["a", "b", "c", 1, 2, 3]; arr.forE

  • JavaScript 数组- Array的方法总结(推荐)

    JavaScript中的Array类型是经常用到的,Array类型也提供了很多方法能实现我们需求,下面我们来总结一下 一.创建Array的方法 var colors=new Array(); var colors=new Array(3);//创建一个长度为3的数组 var colors=new Array("red","blue")//创建一个数组["red","blue"] 当然,上面的new可以省略不写,如 var co

  • JavaScript基础知识点归纳(推荐)

    定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

  • JavaScript比较两个数组的内容是否相同(推荐)

    今天意外地发现JavaScript是不能用==或===操作符直接比较两个数组是否相等的. alert([]==[]); // false alert([]===[]); // false 以上两句代码都会弹出false. 因为JavaScript里面Array是对象,==或===操作符只能比较两个对象是否是同一个实例,也就是是否是同一个对象引用.目前JavaScript没有内置的操作符判断对象的内容是否相同. 但是惯性思维让人以为数组也是值,是可以比较的. 如果要比较数组是否相等,就只能遍历数组

  • JavaScript学习笔记之数组求和方法

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 通过最近学习,越来越感觉JavaScript的强大与魅力之处,仅数组一个知识点就让我这样的初学者折腾了很久.折腾是折腾,但还是很有效果的,这几天的学习到的一些基本知识,就在自己的业务就用到了.顿感自信心爆棚,我也有一天能学会JavaScript. 别的不多说了,咱们今天一起来玩数组的求和,看看有哪些方法可以实现数组的求和. 数组方法 JavaScript中数组有很多种方法,下图能更好的向你阐述JavaScript有多少种方法,作用是啥

随机推荐