0

0

JavaScript:Array类型全面解析_基础知识

php中文网

php中文网

发布时间:2016-05-23 13:15:54

|

1277人浏览过

|

来源于php中文网

原创

javascript中的数组类型与其他语言中的数组有着很大的区别。javascript中的每一项可以保存任何类型的数据。而且,javascript数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新增数据

创建数组的基本形式有两种。

1.Array构造函数

var cities = new Array();

如果预先知道要保存的项目数量,也可以给构造函数传递该数量,该数量会自动变成length属性的值。

var cities = new Array(3);

也可以向Array构造函数传递数组中应该包含的项。

立即学习Java免费学习笔记(深入)”;

var cities = new Array("shanghai", "beijing", "shenzhen");

在创建数组时可以省略new操作符:

var cities = Array(3); //创建一个包含3个元素的数组

2.数组字面量表示法

数组字面量表示法由一对包含数组项的方括号表示,多个数组项之间以逗号隔开,如下:

var cities = ["shanghai", "beijing", "shenzhen"];
var cities = []; // 创建一个空字符串

在读取和设置数组的值时,要使用方括号并提供相应值的基于0(基于0就是从0开始计数,第一项为0,第二项为1,以此类推)的数字索引,如下所示:

var cities = ["shanghai", "beijing", "shenzhen"];
alert(cities[0]);  // "shanghai"
cities[1] = "hongkong"; // 修改第二项"beijing"为"hongkong"
cities[3] = "taiwan"  // 新增一项

数组的项数保存在length属性中,它不是只读的。因此,可以通过设置length属性,可以从数组的末尾移除项或者向数组中添加新项。

var cities = ["shanghai", "beijing", "shenzhen"];
cities.length = 2;
alert(cities[2]);  // undefined

利用length的这一属性可以在数组末尾添加新项:

var cities = ["shanghai", "beijing", "shenzhen"];
cities[cities.length] = "hongkong";

1. 检测数组

ECMAScript5新增了Array.isArray()方法,作用就是确定某个值到底是不是数组,而不管它是哪个全局执行环境中创建的。用法如下:

if (Array.isArray(value)) {
  // 对数组执行某些操作
}

2. 转换方法

所有对象都具有toLocaleString()、toString()和valueOf()方法。其中调用数组的toString()方法会返回由数组中的每个值的字符串形式拼接而成的一个以逗号分隔的字符串。例如:

var cities = ["shanghai", "beijing", "shenzhen"];
alert(cities.toString());  // shanghai,beijing,shenzhen
alert(cities.valueOf());  // shanghai,beijing,shenzhen
alert(cities);       // shanghai,beijing,shenzhen

说明:由于alert()需要接收字符串参数,它会在后台调用toString()方法,因此会得到直接调用toString()方法相同的结果。

另外,toLocaleString()方法经常也会返回与toString()和valueOf()相同的值,不同的是,为了取得每一项的值,调用的是每一项的toLocaleString()方法,而不是toString()方法。例如:

var p1 = {
    toLocaleString: function () {
      return "p1 toLocaleString";
    },
    toString: function () {
      return "p1 toString";
    }
  };

  var p2 = {
    toLocaleString: function () {
      return "p2 toLocaleString";
    },
    toString: function () {
      return "p2 toString";
    }
  };

  var p = [p1, p2];
  alert(p);
  alert(p.toString());
  alert(p.toLocaleString());

结果显示第一行和第二行调用的是toString方法,第三行调用的是toLocaleString方法。

数组继承的toLocaleString()、toString()和valueOf()方法,在默认情况下,都会以逗号分隔字符串的形式返回数组项。通过join()方法,则可以使用不同的字符来分割字符串,然后返回包含所有数组项的字符串。

var cities = ["shanghai", "beijing", "shenzhen"];
alert(cities);     // shanghai,beijing,shenzhen
alert(cities.join(","));// shanghai,beijing,shenzhen
alert(cities.join("|"));// shanghai|beijing|shenzhen

3. 栈方法

栈是一种后进先出(LIFO)的数据结构,栈中数据项的插入和移除只能发生在栈的顶部。JavaScript数组提供了push()和pop()方法用于实现类似于栈的行为。

push()方法

可以接收任意数量的参数,把它们添加到数组的末尾,并修改数组的长度。

var params = new Array();
var count = params.push("a", "b");
alert(params); // a,b
alert(count);  // 2

从上面的例子可以看出,push()方法返回的插入的项数。

pop()方法

从数组的末尾移除最后一项,减少数组的长度,返回移除的项。

var params = new Array();
var count = params.push("a", "b", "c");
var item = params.pop();
alert(item);  // c
alert(params.length);  // 2

4. 队列方法

队列的数据结构的访问规则是先进先出(FIFO),即从队列的末端添加项,从队列的前端移除项。

shift()方法

JavaScript中提供了shift()方法,移除数组中的第一项并返回该项,同时修改数组的length属性。

var params = new Array();
var count = params.push("a", "b", "c"); 

var item = params.shift(); // 取得第一项
alert(item);  // a
alert(params.length);  // 2

unshift()方法

JavaScript 还提供了unshift()方法,能在数组前端添加任意个项并返回新数组的长度。

var params = new Array();
var count1 = params.unshift("a");
alert(count1); // 1
alert(params); // a
var count2 = params.unshift("b");
alert(count2); // 2
alert(params); // b,a
var count3 = params.unshift("c", "d");
alert(params); // c,d,b,a

观察发现,如果一次unshift()中有多项,它会将这些项按照顺序插入到数组中,即第一个参数插入最前面。像上面的例子中那样,第一次插入“a”,第二次在数组的最前面插入“b”,第三次时有多项,但是顺序是c在前,d在后。

5. 重排序方法

数组中提供了两个直接用来重排序的方法。

JTBC网站内容管理系统5.0.3.1
JTBC网站内容管理系统5.0.3.1

JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架,开源协议为AGPLv3,没有任何附加条款。系统可以通过命令行一键安装,源码方面不基于任何第三方框架,不使用任何脚手架,仅依赖一些常见的第三方类库如图表组件等,您只需要了解最基本的前端知识就能很敏捷的进行二次开发,同时我们对于常见的前端功能做了Web Component方式的封装,即便是您仅了解HTML/CSS也

下载

reverse()方法

reverse()方法会反转数组项的顺序。

var values = [1,2,3,4,5];
values.reverse();
alert(values); // 5,4,3,2,1

sort()方法

在默认情况下,sort()方法按升序排列数组项。为了实现排序,sort()方法会调用每个数组项的toString()转型方法,然后比较得到的字符串。因此,sort()方法比较的是字符串

var values = [3,5,53,2,34];
values.sort();
alert(values); // 2,3,34,5,53

然而,我们可以说这种排序基本是毫无意义的,我们需要的是对数值进行排序。sort()方法可以接收一个比较函数作为参数,以便指定排序规则。

比较函数接收两个参数,如果第一个参数应该位于第二个参数之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数位于第二个参数之后则返回一个正数。

function compare(value1, value2) {
  if (value1 < value2) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  } else {
    return 0;
  }
}
var values = [3,5,53,2,34];
values.sort(compare);
alert(values); // 2,3,4,34,53

6. 操作方法

concat()方法

可以基于当前数组中的所有项创建一个新数组。这个方法会创建一个当前数组的副本,然后将参数添加到副本的末尾,然后返回新构建的数组。如果传递给concat()方法的是一个或多个数组,则会将该数组中的每一项添加到数组中。

var arrays = ["a", "b", "c"];
var arrays2 = arrays.concat("d", ["e", "fe"]);
alert(arrays); // a,b,c
alert(arrays2); // a,b,c,d,e,f

slice()方法

基于当前数组中的一或多个项创建一个新数组。slice()方法可以接收一个或两个参数,即要返回项的起始结束位置。当只要一个参数,返回从起始项到数组末尾的所有项,当有两个参数时,返回起始位置和结束位置之间的项(不包括结束项)。slice()方法不会影响原数组。

var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];
var cities2 = cities.slice(1);
var cities3 = cities.slice(1,3);

alert(cities2); // shanghai,shenzhen,guangzhou 
alert(cities3); // shanghai,shenzhen

splice()方法

splice()方法主要用于向数组的中部插入项,使用方式有3种:

• 删除 可以删除任意数量的项,指定2个参数:要删除的第一项和删除的项数,如:splice(1,3)会删除数组中的第2、3、4项

var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];
cities.splice(1,3);

alert(cities); // beijing

• 插入 可以向指定位置插入任意数量的项。指定3个参数:起始位置、0(要删除的项数)、要插入的项

var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];
cities.splice(1,0,"hongkong");
alert(cities); // beijing,hongkong,shanghai,shenzhen,guangzhou

• 替换 可以替换指定位置的项。指定3个参数:起始位置、要删除的项、要插入的任意项。

var cities = ["beijing", "shanghai", "shenzhen", "guangzhou"];
cities.splice(1,2,"hongkong");
alert(cities); // beijing,hongkong,guangzhou

7. 位置方法

JavaScript中有两个位置方法:indexOf()方法和lastIndexOf()方法。这两个方法都接收两个参数:要查找的项和(可选)表示查找起点位置的索引。

indexOf()方法表示从数组的开头向后查找,lastIndexOf()则从数组的末尾开始向前查找。它们都返回查找的项在数组中的位置,如果没有找到则返回-1。在第一个参数与数组中的每一项比较时使用的是全等。

var nums = [1,2,3,4,5,6];
alert(nums.indexOf(3)); // 2
alert(nums.lastIndexOf(5)); // 4

alert(nums.indexOf(3,1));  // 2
alert(nums.lastIndexOf(4,4));  // 3

8. 迭代方法

JavaScript为数组提供了5个迭代方法。每个方法接收两个参数:要在每一项上运行的函数和(可选)运行该函数的作用域对象——影响this的值。需要传入的参数:数组项的值、该项在数组中的位置和数组对象本身。

•every(): 对数组中的每一项运行给定函数,如果该行数对每一项都返回true,则返回true

•filter(): 对数组中的每一项运行给定函数,返回会返回true的项组成的数组

•foreEach(): 对数组中的每一项运行给定函数,没有返回值

•map(): 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的函数。

•some(): 对数组中的每一项运行给定函数,如果任一项返回true,则函数返回true

以上方法都不会修改数组中包含的值。

9. 归并方法

JavaScript中有两个归并数组的方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()方法从数组第一项开始,而reduceRight()则从数组的最后一项开始。

它们都可以接收两个参数:一个在每一项上调用的函数和(可选)作为归并基础的初始值。传递给reduce()和reduceRight()的函数接收4个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){
  return prev+cur;
});
alert(sum); // 15

第一次执行回调函数,prev是1,cur是2。第二次,prev是3(1+2),cur是3(数组第三项的值),知道每一项都访问到。

reduceRight()的作用类似,只不过方向相反而已。

以上这篇JavaScript:Array类型全面解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Python 序列化
Python 序列化

本专题整合了python序列化、反序列化相关内容,阅读专题下面的文章了解更多详细内容。

0

2026.02.02

AO3官网入口与中文阅读设置 AO3网页版使用与访问
AO3官网入口与中文阅读设置 AO3网页版使用与访问

本专题围绕 Archive of Our Own(AO3)官网入口展开,系统整理 AO3 最新可用官网地址、网页版访问方式、正确打开链接的方法,并详细讲解 AO3 中文界面设置、阅读语言切换及基础使用流程,帮助用户稳定访问 AO3 官网,高效完成中文阅读与作品浏览。

91

2026.02.02

主流快递单号查询入口 实时物流进度一站式追踪专题
主流快递单号查询入口 实时物流进度一站式追踪专题

本专题聚合极兔快递、京东快递、中通快递、圆通快递、韵达快递等主流物流平台的单号查询与运单追踪内容,重点解决单号查询、手机号查物流、官网入口直达、包裹进度实时追踪等高频问题,帮助用户快速获取最新物流状态,提升查件效率与使用体验。

27

2026.02.02

Golang WebAssembly(WASM)开发入门
Golang WebAssembly(WASM)开发入门

本专题系统讲解 Golang 在 WebAssembly(WASM)开发中的实践方法,涵盖 WASM 基础原理、Go 编译到 WASM 的流程、与 JavaScript 的交互方式、性能与体积优化,以及典型应用场景(如前端计算、跨平台模块)。帮助开发者掌握 Go 在新一代 Web 技术栈中的应用能力。

11

2026.02.02

PHP Swoole 高性能服务开发
PHP Swoole 高性能服务开发

本专题聚焦 PHP Swoole 扩展在高性能服务端开发中的应用,系统讲解协程模型、异步IO、TCP/HTTP/WebSocket服务器、进程与任务管理、常驻内存架构设计。通过实战案例,帮助开发者掌握 使用 PHP 构建高并发、低延迟服务端应用的工程化能力。

5

2026.02.02

Java JNI 与本地代码交互实战
Java JNI 与本地代码交互实战

本专题系统讲解 Java 通过 JNI 调用 C/C++ 本地代码的核心机制,涵盖 JNI 基本原理、数据类型映射、内存管理、异常处理、性能优化策略以及典型应用场景(如高性能计算、底层库封装)。通过实战示例,帮助开发者掌握 Java 与本地代码混合开发的完整流程。

5

2026.02.02

go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

62

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

55

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

27

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号