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. Recycle Queue Sample

    public class RecycleQueue<T> { public int len; T[] v; int max; int front; int rear; public Rec ...

  2. A Novel Cross-domain Access Control Protocol in Mobile Edge Computing

    摘要 随着智能移动终端和移动通信技术的发展,移动边缘计算(MEC)已经应用到各个领域.然而,MEC也带来了新的数据安全威胁,包括数据访问威胁.针对MEC中的跨域访问控制问题,提出一种跨域访问控制协议C ...

  3. Day25:报告编写等

    今天完成的任务: 1.完成全部结论的编写,完成一部分界面测试的撰写. 2.完成moodle配置  明日计划: 1.完成前端的原型介绍 2.完善前端设计与实现报告 每日小结: 今天完成了最后一次的答辩, ...

  4. 4.git的指令应用

    1.stash 应用:   应用场景:在当前分支开发代码,开发到一半,代码没有提交,你想在当前分支的基础上切换到别的分支:或者创建新的分支,所以需要把当前开发的内容进行藏匿起来. 1.1藏匿指令:   ...

  5. 在java路径上找不到javax.servlet.http.HttpServlet

    1.将写好的网页代码导入Java中会发现index.jsp文件开头部分出现报错 2.错误提示是找不到java路径问题 3.在项目中鼠标右键进行找到Build Path选项点击进去 4.找到Librar ...

  6. modelsim仿真含Xilinx原语代码块

    很早之前笔者已经写过关于modelsim仿真的文章了,不过之前笔者做的仿真都是有现成代码块的仿真.对于那些使用原语的代码块进行仿真时则需要产生相关的仿真库,笔者这里使用modeltech64_2020 ...

  7. Vue之使用umy-ui库的u-table解决 el-table当存在大量数据时,界面操作卡顿。

    提示:一.下面的1. 对应 二.下面的1.:2.则对应2. 错误排查:在使用中如果出现:readding 'style' undefined类似错误的, 可以先排查 u-table中height的值引 ...

  8. File.createTempFile()

    File.createTempFile()的两个参数,是前缀和后缀,临时文件的文件名,会在前缀和后缀中各截取一部分,再拼接上随机数进行生成: 推荐手动指定目录,尽量指定到项目路径下,默认的磁盘位置,有 ...

  9. centos 6.5 docker  安装

    https://www.cnblogs.com/zhangzhen894095789/p/6641981.html?utm_source=itdadao&utm_medium=referral

  10. tp项目部署到宝塔,运行nginx时无法访问首页之外的页面

    http://www.upwqy.com/details/254.html tp项目 部署到宝塔里面 运行环境nginx 直接访问首页是可以访问的.但是请求其他的接口的时候 报404 . 需要把下面这 ...