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. ES5 绑定 this 的方法

    this的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊.有时,需要把this固定下来,避免出现意想不到的情况.JavaScript 提供了call.apply ...

  2. ScrollView里面不能嵌套一个FlatList,这个需要如何通过FlatList自己单独实现

    1. 组件结构 2. 实现的效果图 3. 重点解释一些方法 (1)stickyHeaderIndices ,这个属性在ScrollView里面,FlatList也继承了该属性,其主要作用,会让第一个成 ...

  3. docker compose服务编排简介、基于发布包构建多个webapi容器 和 基于镜像实现Nginx反向代理webapi

    一. docker compose服务编排简介 1. 背景 微服务架构的应用系统中一般包含若干个微服务,每个微服务一般都会部署多个实例,如果每个微服务都要手动启停,维护的工作量会很大: A. 要创建镜 ...

  4. 12组-Alpha冲刺-5/6

    一.基本情况 队名:字节不跳动 组长博客:https://www.cnblogs.com/147258369k/p/15562095.html 小组人数:10人 二.冲刺概况汇报 侯钦凯 过去两天完成 ...

  5. Ubuntu之root密码重置

    (1)系统开机时,连按或者长按shift键,出现GRUB界面,选择并进入"Ubuntu 高级选项",

  6. java8 利用 ConcurrentHashMap list根据 某个属性 去重

    //自定义方法private static <T> Predicate<T> distinctByKey(Function<? super T, Object> k ...

  7. 微信小程序云开发使用Typescript

    1.首先参考陈希章@中国在微信小程序开发中使用Typescript中的内容了解相关的内容 2.按以下步聚进行设置 1)确认本机环境已安装npm.通过在安装目录下输入 npm --v 如返回具体的版本, ...

  8. C++快速求解最大公因数 | gcd库函数

    1.介绍 gcd全称 :greatest common divisor 使用 __gcd( int x1, int x2 ) 函数可以高效.迅速得到x1, x2两个数的最大公因数.省去手写底层代码,专 ...

  9. 关于安装hadoop时在centos上修改主机名总是不成功

    按照老师给的文件和网上搜的代码改了很多次,比如改/etc/sysconfig/network这些,无论改几次都没用,找了个帖子,说可能是因为 CentOS7版本由于与之前版本变化比较大,修改主机名的方 ...

  10. Windows系统运行selenium

    1.系统已安装python: 2.安装pip 官网下载pip安装包:https://pypi.org/project/pip/#files 解压后   python setup.py install ...