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. OS-lab4

    OS-lab4 系统调用 系统调用的流程 按照上述的流程逐个分析. user/syscall_lib.c 这个文件位于user文件夹下,也就是用户程序可以调用的函数,相当于操作系统提供给用户程序的一些 ...

  2. shell_Day04

    grep程序 Linux下有文本处理三剑客 -- grep sed awk grep:文本 行过滤工具 sed: 文本 行编辑器(流编辑器) awk:报告生成器(做文本输出格式化) grep 包含三个 ...

  3. 路飞之-后台日志封装-前后端分离的rbac项目演示-全局异常处理封装-封装Response-luffy数据库创建-软件开发模式-User模块用户表-django的配置文件-开启media访问

    目录 路飞之-后台日志封装-前后端分离的rbac项目演示-全局异常处理封装-封装Response-luffy数据库创建-软件开发模式-User模块用户表-django的配置文件-开启media访问 今 ...

  4. 开启wamp依旧使用已下载的mysql

    1.打开D:\Environment\wamp64\bin\mysql\mysql8.0.31,修改my.ini 添加本机mysql密码,并且将3个port=3306改为port=3316 2.打开D ...

  5. 基2和基4FFT

    1.1 FFT的必要索引变换 基2算法需要位顺序的反转位逆序,而基4算法需要首先构成一个2位的数字,再反转这些数字,称为数字逆序. 1.1 位逆序和数字逆序 1.2 FFT的复数乘法转实数乘法 \[X ...

  6. C#消息泵探索(一)

    ​消息泵 消息泵,又叫消息循环. 消息循环使用一个图形化用户界面下Microsoft Windows.具有GUI的Windows 程序是由事件驱动的.Windows为每个创建窗口的线程维护一个单独的消 ...

  7. 2023 01 19 HW

    2023 01 19 HW Okay, then let's start.  Okay. Maybe Karina, we start with the C2 design freeze. Yeah, ...

  8. Django项目的创建、启动、停止

    1. 首先安装Django的包 pip install Django 的命令安装包 2. 配置环境变量,必须配置,后边需要用到django的命令,这个包和别的包不太一样的地方 C:\Users**** ...

  9. 提交docker镜像到远程仓库

    生成镜像 Docker build 镜像 编辑Dockerfile文件 新建Dockerfile文件,将如下构建脚本复制进去 # Build for ansible envirament FROM c ...

  10. AndroidStudio中的读取本地Gradle设置,gradle-wrapper.properties内容解释

    gradle-wrapper.properties文件长成下面这个样子 distributionBase=GRADLE_USER_HOMEdistributionPath=wrapper/distsd ...