Array

Array是一组数据的有序列表,在ECMAScript中,数组的每一项可以是不一样的数据类型。


创建数组有两种方式

(1)使用构造函数

var colors = new Array();
var persons = new Array(4) //创建length属性值为4的数组
var cites = new Array("Beijing","Shanghai","Guangzhou");//创建包含3个字符串的数组

在使用构造函数创建数组时,也可以省略new操作符

var persons = Array(4);
var cites = Array("Beijing","Shanghai","Guangzhou");

(2)使用数组字面亮表示法

var colors = [];//创建一个空数组
var cites = ["Beijing","Shanghai","Guangzhou"];//创建包含3个字符串的数组
var numbers = [1,2,,]//因为在不同浏览器中,会创建含有不同数据量的数组所以不推荐

在使用和设置数组值时可以用方括号

var cites = ["Beijing","Shanghai","Guangzhou"];
alert(cites[0]);//"Beijing"
cites[0] = "Tokyo";
cites[3] = "NewYork";//数组会自动将长度增加

可以通过length属性调整数组的长度

var cites = ["Beijing","Shanghai","Guangzhou"];
cites.length = 2;
alert(cites[2]);//undefined

利用length属性可以很方便的在数组的最后一项添加数据

var cites = ["Beijing","Shanghai","Guangzhou"];
cites[length] = "Tokyo";

检测数组

检测对象是否时数组时,我们可能首先会想到instanceof操作符,但instanceof只有一个全局执行环境,当存在多个全局执行环境时,在不同执行环境中数组的构造函数不一样,判断会出错

所以ECMAScript5新增了Array.isArray()方法


转换方法

因为继承自Object,Array具有toLocaleString(),toString(),valueOf()方法,会返回一个数组中用逗号隔开的每个值的字符串形式拼接成的字符串

var cites = ["Beijing","Shanghai","Guangzhou"];
alert(cites.toString());//Beijing","Shanghai","Guangzhou
alert(cites.valueOf());//Beijing","Shanghai","Guangzhou valueOf()返回数组本身
alert(cites);//Beijing","Shanghai","Guangzhou 因为alert要接收字符串参数所以在后台调用toString()

使用toLocaleString(),toString(),valueOf()方法返回的是以逗号分隔的字符串,使用join()方法可以使用其他分隔符构建这个字符串

var cites = ["Beijing","Shanghai","Guangzhou"];
alert(cites.join(","));//Beijing","Shanghai","Guangzhou
alert(cites.join("|"));//Beijing"|"Shanghai"|"Guangzhou

栈方法

我们可以用push(),pop()方法使数组完成类似栈的后进先出的操作

push()方法可以在数组末尾增加任意数量数据,并让length相应增加,返回数组长度,pop()方法可以删除数组的最后一项,并让length相应减少,返回移出的项

var cites = ["Beijing","Shanghai","Guangzhou"];
var count = cites.push("Tokyo");
alert(count);//4
var item = cites.pop();
alert(item);//Tokyo
alert(cites.length)//3

队列方法

我们可以用shift(),push()方法使数组完成类似队列的先进先出的操作

shift()方法可以移除数组的第一项并将其返回,并将length减1

var cites = ["Beijing","Shanghai","Guangzhou"];
var count = cites.push("Tokyo");//4 推入一项
var item = cites.shift();//"Beijing"
alert(cites.length);//3

unshift()方法和shift()方法相反,可以在数组前端添加任意项并返回数组长度,使用unshift(),和pop()方法可以实现反向的队列操作

var cites = ["Beijing","Shanghai","Guangzhou"];
var count = cites.unshift("Tokyo");
alert(count);//4
var item = cites.pop();
alert(item);//"Guangzhou"

重排序方法

数组中有两个重排序方法sort(),reverse()。

reverse()方法可以反转数组项的顺序

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

另一个是sort()方法,可以让数据升序排列,但排序之前会将调用每一项的toString()方法,然后比较字符串的大小,所以如果数组的每一项都是数字,sort()方法会出现错误的排列。

var numbers = [0,1,5,10,15];
numbers.sort();
alert(numbers);//0,1,10,15,5

为了避免这种情况,我们需要向sort()方法传入一个比较函数作为参数,这样我们就可以指定数值的排列了。

function compare(value1,value2){
if(value1 < value2){
return -1 //如果第一项应在第二项之前,返回-1
}else if(value1 > value2){
return 1 //如果第一项应在第二项之后,返回1
}else{
return 0//如果两项相等,返回0
}
}
var numbers = [0,1,5,10,15];
numbers.sort(compare);
alert(numbers);//0,1,5,10,15

操作方法

concat()

concat()方法可以创建当前数组的一个副本,并且将参数增加在副本数组的末尾,然后返回这个副本数组。

var cites1 = ["Beijing","Shanghai","Guangzhou"];
var cites2 = cites1.concat("Tokyo",["NewYork","Hongkong"]);
alert(cites1);//Beijing,Shanghai,Guangzhou
alert(cites2);//Beijing,Shanghai,Guangzhou,Tokyo,NewYork,Hongkong

slice()

slice()方法可以以当前数组为基础创建新数组,根据传入的参数截取当前数组的部分称为新数组的数据项。

如果传入的参数为负数,则返回结果与长度减去负数作为参数的结果一样。

var cites1 = ["Beijing","Shanghai","Guangzhou"];
var cites2 = cites.slice(1);
var cites3 = cites.slice(1,2);
alert(cites2);//Shanghai,Guangzhou 从下标为1的数据项截取到最后一项
alert(cites3);//Shanghai 从下标为1的数据项截取但不包括下标为2的数据项

splice()

splice()方法可以修改数组的内容,包括删除,插入,修改。

splice()方法会返回原数组被删除和被替换的部分。

传入的第一个参数表示操作的起点,传入的第二个参数表示操作影响的长度,第三个以及后面所传入的参数表示插入或修改数组的内容,删除内容时只需传入两个参数。

var cites = ["Beijing","Shanghai","Guangzhou"];
var removed = cites.splice(0,1);//删除
alert(cites);//Shanghai,Guangzhou
alert(removed);//Beijing
removed = cites.splice(0,0,"Tokyo");
alert(cites);//Tokyo,Shanghai,Guangzhou//插入
alert(removed);//空数组
removed = cites.splice(0,1,"NewYork","Beijing");//替换
alert(cites);//NewYork,Beijing,Shanghai,Guangzhou
alert(removed);//Tokyo

位置方法

数组具有两个位置方法indexOf(),lastIndexOf(),都会返回位置下标,,lastIndexOf()会从最后一项开始查找。

接收两个参数,第一个参数表示要查找的项,第二个参数表示查找的起点(选写)。

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

迭代方法

总共有5个迭代方法,every(),filter(),forEach(),map(),some(),每个方法都会接受两个参数,第一个参数是数组的每一项都运行的函数,第二个参数是运行该函数的作用域对象(选填)。

这5个方法都会让数组的每一项都执行作为参数传入的函数,但每一个方法所做的操作有所区别。

使用every()方法时如果数组的每一项执行参数函数都返回true,则返回true;使用filter()方法时返回执行参数函数后为true的数组项组成的数组;

使用forEach()方法时则是单纯的让每一项都执行参数函数,没有返回值;使用map()方法时返回每一个数组项执行完参数函数后的值组成的数组;

使用some()方法时如果有一个数组项执行完参数函数返回true,则返回true。

参数函数会接收3个参数,分别是数组项的值,该数组项的位置和本数组对象。

var numbers = [1,2,3,4,5,4,3,2,1];
var result = numbers.every(function(item, index,array){
return (item < 3);
});
alert(result);//false
result = numbers.filter(function(item, index,array){
return (item < 3);
});
alert(result);//[1,2,2,1]
result = numbers.map(function(item, index,array){
return item * 2;
});
alert(result);//[2,4,6, 8,10,8,6,4,2]
result = numbers.some(function(item, index,array){
return (item < 3)
})
alert(result);//true

归并方法

数组有两个归并方法reduce()和reduceRight(),这两个方法会迭代数组的每一项,并且接收两个参数(在每一项上运行的函数,归并的基础值(选填))

参数函数接收4个参数,第一个参数是上一次运行参数函数后的返回值(所以第一次迭代发生在第二项上),第二个参数是当前数组项的值,第三个参数是索引,第四个参数是本数组对象。

这个方法用来求数组的总和很方便。

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

Javascript基础知识整理(引用类型-Array)的更多相关文章

  1. JavaScript基础知识整理

    只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...

  2. JavaScript基础知识整理(2)

    15.处理图像 注意:(1)在写js文件时,尽量将函数的声明往后写,将函数调用写在前面,这样能够使代码结构很清晰. (2)一个网页中翻转器一般超过3个,所以使用for循环减少重复使用翻转器代码的次数. ...

  3. JavaScript基础知识整理(1)

    粗略理解,努力入门中 1.在html中引入外部脚本:  <script src="filename.js"></script> 2.注释:  多于一行的长注 ...

  4. JavaScript基础知识整理(1)数组

    第一:创建. 1,var arr= new Array(); //数组为空.长度为0. arr[0]="apple"; arr[1]="orange"; arr ...

  5. Javascript 基础知识整理

    Javascript的作用 表单验证,减轻服务器压力 添加页面动画效果 动态更改页面内容 Ajax网络请求(异步加载数据) -它属于前端的核心,主要用来控制和重新调整DOM,通过修改DOM结构,从而达 ...

  6. javascript基础知识整理(不定时更新)

    1.js中真与假的定义: 真:true,非零数字,非空字符串,非空对象 假:false,数字零,空字符串,空对象(null),undefined 2.使用for循环对json进行循环操作 for(va ...

  7. Kali Linux渗透基础知识整理(二)漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  8. Javascript基础知识总结一

    Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...

  9. Kali Linux渗透基础知识整理(四):维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  10. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

随机推荐

  1. [OC] Block 是什么

    Block 是 带有自动变量的匿名函数.  emmmm 反正我看了也不懂,我们一点点用具体的例子分析一下block. 1. 我们现在要在一个文件中使用block(我们后面再提到两个界面传值的block ...

  2. c# 服务端接入个推指定对象消息推送

    个推消息推送主要步骤:1.获取鉴权token 2.发送推送消息 1.获取鉴权token(会过期,需要间隔时间获取一次): tokenUrl = "https://restapi.getui. ...

  3. CentOS 7安装配置vsftp并搭建FTP(一)

    vsftp-VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件.关于这个软件的详细信息 大家可以自行百度. 以上自己安装vsftp系统环境 二.查看自己的服务器是否安装了vsftp ...

  4. 「SOL」打扫笛卡尔cartesian (模拟赛)

    为什么会有人推得出来第三题想不出来签到题啊 (⊙_⊙)? 题面 有一棵有根树 \(T\).从根节点出发,在点 \(u\) 时,设点 \(u\) 还有 \(d\) 个未访问过的儿子,则有 \(\frac ...

  5. 【虚拟机】虚拟机安装win10

    VMware-workstation 16 pro 点击查看代码 密钥: ZF3R0-FHED2-M80TY-8QYGC-NPKYF YF390-0HF8P-M81RQ-2DXQE-M2UT6 ZF7 ...

  6. (0319) uvmgen的使用,产生的UVM环境介绍

    qq https://blog.csdn.net/hh199203/article/details/118210541

  7. 3516A调试

    最近在调Hi3516A的板,硬件不知道为什么如此设计,用一片16bit4G的ddr,16Mspi flash,按理如果是A应该是2片16bit的ddr,组成32位总线,现在怕是只能当D来用了,编译成功 ...

  8. 解决habbybase 操作hbase报错TTransportException(type=4,message=’TSocket read 0 bytes)

    1.确认集群的协议是否一致,在连接的时候,改成一致的.例如集群配置的是TFramedTransport,TCompactProtocol 时 改成 connection = happybase.Con ...

  9. 【笔记】archlinux缺少部分常用工具

    安装archlinux之后发现缺少很多常用工具 比如ifconfig ftp等 ifconfig需要安装net-tools nslookup需要dnsutils ftp需要inetutils 另外安装 ...

  10. Pyodide读取CSV、EXCEL

    from pyodide.http import pyfetch, open_url pyfetch(url="/your/URL/goes/here", method=" ...