JavaScript数组常用的方法总结

导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者数组,下面对常用的数组的使用方法进行总结,方便在开发中手到擒来!

目录

数组常用方法

​ concat() 方法

 join() 方法

 pop() 方法

push() 方法

reverse() 方法

shift() 方法

slice() 方法

 sort() 方法

splice() 方法

 toSource() 方法

toString() 方法

toLocaleString() 方法

unshift() 方法

valueOf() 方法


数组常用方法

 concat() 方法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

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))
//George,John,Thomas,James,Adrew,Martin,William,Franklin

 join() 方法

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

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

 pop() 方法

pop() 方法用于删除并返回数组的最后一个元素。

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

push() 方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"document.write(arr + "<br />")//George,John,Thomas
document.write(arr.push("James") + "<br />")document.write(arr)//George,John,Thomas,James

reverse() 方法

reverse() 方法用于颠倒数组中元素的顺序。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"document.write(arr + "<br />")//George,John,Thomasdocument.write(arr.reverse())//Thomas,John,George

shift() 方法

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"document.write(arr + "<br />")//George,John,Thomas
document.write(arr.shift() + "<br />")//George
document.write(arr)//John,Thomas

slice() 方法

slice() 方法可从已有的数组中返回选定的元素。

 

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

 sort() 方法

sort() 方法用于对数组的元素进行排序。

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 />")//10,5,40,25,1000,1
document.write(arr.sort(sortNumber))//1,5,10,25,40,1000

splice() 方法

splice() 方法向/从数组中添加/删除元素,然后返回被删除的元素。

 

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 />")//George,John,Thomas,James,Adrew,Martin
arr.splice(2,0,"William")
document.write(arr + "<br />")//George,John,William,Thomas,James,Adrew,Martin

 toSource() 方法

toSource() 方法表示对象的源代码。

该原始值由 Array 对象派生的所有对象继承。

toSource() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}var bill=new employee("Bill Gates","Engineer",1985);document.write(bill.toSource());//({name:"Bill Gates", job:"Engineer", born:1985}) 

toString() 方法

toString() 方法可把数组转换为字符串,并返回结果。

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

toLocaleString() 方法

把数组转换为本地字符串。

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

unshift() 方法

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

 

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

valueOf() 方法

 valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。

arrayObject.valueOf()

总结一下(标记的数组方法比较常用,一定要熟练掌握)

 如果你觉得还有其它比较好用的,常用的数组方法,欢迎留言和我交流!比如reduce方法等!

var result = [{subject: 'math',score: 10},{subject: 'chinese',score: 20},{subject: 'english',score: 30}
];var sum = result.reduce(function(prev, cur) {return cur.score + prev;
}, 0);
console.log(sum) //60

好啦,本期内容就分享到这里,你知道的越多,你不知道的越多!

记得关注这个文绉绉的前端程序员:孙叫兽的博客

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357205.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python黑魔法,一行实现并行化

Python 在程序并行化方面多少有些声名狼藉。撇开技术上的问题&#xff0c;例如线程的实现和 GIL&#xff0c;我觉得错误的教学指导才是主要问题。常见的经典 Python 多线程、多进程教程多显得偏“重”。而且往往隔靴搔痒&#xff0c;没有深入探讨日常工作中最有用的内容。 传统…

2. python 参数个数可变的函数

如果想要定义一个参数个数不确定的函数&#xff0c; 可以通过*args,**kwargs实现&#xff1a; *args的使用&#xff1a; **kwargs的使用&#xff1a; 二者的混合使用&#xff1a; 另外还有一些关于调用函数时候的时候常用的技巧&#xff1a; 其和是等价的。 其和是等价的 当然也…

JavaScript常用工具类整理(总结版)

导读&#xff1a;在前端开发过程中需要对常用的功能模块进行封装&#xff0c;常用的方法多次调用需要整合&#xff0c;保证组件的复用性与程序的可维护性&#xff0c;这里总结一下&#xff0c;便于后续的使用&#xff01; 目录 1.全局声明工具类 2.定时器 3.判断变量是否是一…

axis2 json_带有Java和Axis2的JSON Web服务

axis2 json我最近遇到一位客户&#xff0c;要求我使用Java Web服务重建其旧产品。 他们希望它模块化并且易于使用。 我想到的第一件事是使用宁静的方法。 但是让我烦恼的是&#xff0c;Java宁静的方法是使用XML !&#xff0c;我更喜欢一种更简单的通信方式&#xff0c;易于理解…

如何对技术视频转换文章投稿进行二次创作

导读&#xff1a;在技术社区经常会收到一些大的平台&#xff08;华为云博客、infoq等平台的投稿任务&#xff09;&#xff0c;经过对数千篇通用技术稿件&#xff0c;积攒了一些小技巧。所以&#xff0c;在你创作之前还是要好好的看一下&#xff0c;希望对你有帮助&#xff01;看…

iOS开发-UIScrollView原理

转载:http://www.cnblogs.com/xiaofeixiang/p/5144256.html UIScrollView 在开发中是不可避免&#xff0c;关于UIScrollView都有自己一定的理解。滚动视图有两个需要理解的属性&#xff0c;frame和bounds&#xff0c;frame是定义了视 图在窗口的大小和位置&#xff0c;bounds表…

边缘计算如何实现海量IoT数据就地处理

1.什么是IoT边缘&#xff1f;Gartner数据显示&#xff0c;到2021年底将有超过50&#xff05;的大型企业部署至少一个边缘计算应用&#xff1b;到2023年底&#xff0c;50&#xff05;以上的大型企业将至少部署6个用于物联网或沉浸式体验的边缘计算应用。工业一体机的售价一般在1…

《鸿蒙理论知识02》HarmonyOS开发平台和工具

目录 1.应用和开发工具的演进 2.超 级 终 端 应 用 开 发 面 临 全 新 挑 战

用Lucene建立搜索索引

本文是我们名为“ Apache Lucene基础知识 ”的学院课程的一部分。 在本课程中&#xff0c;您将了解Lucene。 您将了解为什么这样的库很重要&#xff0c;然后了解Lucene中搜索的工作方式。 此外&#xff0c;您将学习如何将Lucene Search集成到您自己的应用程序中&#xff0c;以…

twitter api_Java应用程序上的Twitter API

twitter api是否曾想过将推文附加到Java应用程序&#xff1f; 我为此寻找了最好的API&#xff0c;很幸运&#xff0c;我找到了它&#xff01; http://twitter4j.org/ 一个简单的方法&#xff1a; 我们需要做的第一件事是在您的Twitter帐户中创建一个应用程序&#xff0c;为其授…

垂直和水平装饰

装饰器模式是在不更改其接口的情况下向对象添加功能的最佳方法之一。 我经常使用可组合装饰器&#xff0c;并且总是会问自己在功能列表必须可配置时如何正确设计它们。 我不确定我的答案是否正确&#xff0c;但是这里有一些值得深思的地方。 公寓&#xff08;1960&#xff09;…

cygwin配置git

对于windows用户来说&#xff0c;使用git bash经常会出现乱码情况&#xff0c;那么一款优质高尚的软件&#xff0c;值得推荐一下了&#xff0c;那就是cygwin 下载cygwin后&#xff0c;在安装过程中&#xff0c;安装git&#xff0c;安装vim编辑器 然后会在安装目录下看到类linux…

前端代码规范网址导航(总结)

在大公司代码规范是非常重要的一件事情,多人协作,还有代码评审。所以能写出漂亮的代码非常重要。 这就好比你自己在家,无论是穿大裤衩子,还是背心,甚至是光膀子,都没人管你。但你要出门去约会,就要把最好的一面展现给别人。这是对别人的尊重,也是给自己的背书。所以遵…

JLupin Next Server乍一看

JEE基础结构现在有了一个新的管理解决方案– JLupin Next Server。 它为应用程序实现提供了另一种方法。 它提供什么&#xff1f; 用于实现JEE应用程序的现有解决方案受到限制。 通过新的应用程序管理方式&#xff0c;JLupin Next Server打破了所有障碍。 JEE的足迹 良好实践…

读《第一次把事情做对》有感

上班的时候&#xff0c;领导在群里发了一个PDF书籍《第一次把事情做对》&#xff0c;被这个书籍名称吸引住了&#xff0c;因为作为程序员每天有开发新任务&#xff0c;解决旧任务的BUG&#xff0c;第一次就把事情做的完全正确几乎不可能呀&#xff0c;觉得很有看的必要&#xf…

做了三年前端,你才知道10分钟就能实现一个PC版魔方游戏

导读&#xff1a;最近手头有点紧&#xff0c;看到很多小朋友都在玩魔方&#xff0c;又没有money买&#xff0c;只能自己用JavaScriptcss实现一个&#xff0c;在电脑端就能开启魔方之旅。 目录 项目启动演示 项目目录 ​源码地址 项目启动演示 前端使用JavaScript和纯CSS实现…

15K的前端应届毕业生,就因为掌握了这些知识点!(前端企业级开发必备)

目录 1.前端开发 下载安装VScode 优化配置 2、插件安装 3、设置字体大小 4、开启完整的Emmet语法支持 5、视图 2.Node.js 入门 2.1、什么是Node.js 2.2、Node.js有什么用 2.3、安装 下载&#xff1a; 2.4、快速入门 2.5、服务器端应用开发 3、ES6入门 3.2、let声…

[Training Video - 1] [Selenium Basics] [Download and Install Selenium]

Download Selenium Jars Configure jars in eclipse Webdriver http://docs.seleniumhq.org/download/ Selenium RC http://code.google.com/p/selenium/downloads/detail?nameselenium-remote-control-1.0.3.zip&can2&q转载于:https://www.cnblogs.com/MasterMonkInT…

【0元试用微软 Azure人工智能认知服务】这个人脸识别功能太强大啦

导读&#xff1a;这个由美丽的客服小姐姐提前申请好了企业试用的账号&#xff0c;个人的话还得需要visa卡。 官网地址&#xff1a;azure.cn 登录地址&#xff1a;portal.azure.cn 目录 1.简介 2.Azure 认知服务是什么&#xff1f; ​ 3.认知服务的四种职能 4.人脸API 5.新建一…

OpenMap教程3 –使用MapHandler构建基本的地图应用程序–第2部分

1.简介 在上一教程中&#xff0c;我们看到了MapHandler如何将各种组件连接在一起&#xff08;更具体地说&#xff0c;是从MapHandlerChild派生的类&#xff09;。 我们看到了如何以编程方式执行此操作&#xff0c;但是还有另一种声明性地使用openmap.properties 。 样本OpenMa…