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. flutter 图片加载缓存以及圆角的实现

    使用最多的图片缓存组建库cached_network_image 地址:cached_network_image 配置: dependencies: cached_network_image: ^2. ...

  2. elasticsearch 排错总结

    控制台乱码 修改elasticsearch-7.6.2\config下的jvm.options文件,在任意行上加上 -Dfile.encoding=GBKIK报错但成功启动,按照网上的说法是jdk权限 ...

  3. h5 json 生成excel

    引入库文件 创建下载按钮 Download Demo Excel 实现转换 var data = [ ["Joa Doe", "joa@doe.com"], [ ...

  4. gRPC 入门(一)

    前言 在学习 gRPC 之前,先学习 protobufu 协议,简单的来理解,我们可以使用他来定义 消息 和 服务.然后你只需要实现服务即可,剩下的东西,gRPC 会帮你自动完成. protobufu ...

  5. C# List间的交集并集差集

    一.简单类型List的交集并集差集 1.先定义两个简单类型的List List<int> listA = new List<int>() { 1, 2, 3, 4, 5, 6, ...

  6. ubuntu-wireshark打开出现错误的问题

    The capture session could not be initiated on interface 'enp2s0' (You don't have permission to captu ...

  7. excel 巧用功能

    1. 分类汇总 数据-->分类汇总--> 解决问题:解决了我按字段分类并分页打印的问题,例如几十个村数据,要按村分页打印相关数据这时不能把村分别复制粘贴到一个一个工作薄,太麻烦了. 处理方 ...

  8. C++ primer笔记 -标准库类型

    最重要的两个标准库类型:string和vector string 类型的输入操作符: 1.读取并忽略开头所有的空白符 2.读取字符直至再次遇到空白字符,读取终止 string对象的基本操作: stri ...

  9. java & spring 注解 备忘

    java deprecated 注解 1 /** 2 * General service for all common business logic. 3 * 4 * @author wanghaip ...

  10. Web前端单词大全

    style 修饰width 宽度height 高度title 想说明的text-align 水平对齐方式center 居中 left 居左 right 居右line-height 垂直对齐方式/行高 ...