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


Posted in Javascript onSeptember 04, 2017

数组常用方法总结:

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

Javascript 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
js倒计时小程序
Nov 05 Javascript
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
Three.js学习之网格
Aug 10 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
JS沙箱模式实例分析
Sep 04 #Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 #Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 #Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 #Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 #Javascript
node-sass安装失败的原因与解决方法
Sep 04 #Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 #Javascript
You might like
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
JS的get和set使用示例
2014/02/20 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
python如何写出表白程序
2020/06/01 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
承办会议欢迎词
2014/01/17 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
会议通知格式范文
2015/04/15 职场文书
活动经费申请报告
2015/05/15 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript
cypress测试本地web应用
2022/06/01 Javascript