【2】Array类型
ECMAScript数组的每一项可以保存任何类型的数据,并且大小是可以动态调整的,即可以随着数据的添加自动增长以容纳新增数据。

(1)创建数组

1》使用Array构造函数

var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");
var colors = Array(3);
var colors = Array("Greg");

2》使用数组字面量

var colors = ["red","blue","green"];
var colors = [];
var colors = [1,2,];//不推荐使用,会创建一个包含2或3项的数组
var colors = [,,,,,];//不推荐使用,会创建一个包含5或6项的数组

与对象一样,使用数组字面量表示法时,也不会调用Array构造函数。

(2)数组length属性

数组的length属性不只是可读的。通过设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

var colors = ["red","blue","green"];
colors.length = 2; //移除最后一项
alert(colors[2]); //undefinedvar colors = ["red","blue","green"];
colors.length = 4; //数组不存在位置3
alert(colors[4]); //undefinedvar colors = ["red","blue","green"];
colors[colors.length] = "black"; //在位置3添加一种颜色
colors[colors.length] = "brown"; //在位置4添加一种颜色

(3)检测数组

1》instanceof操作符:确定某个对象是不是数组

if(value instanceof Array){
//对数组执行某些操作
}

2》Array.isArray()方法:确定某个值到底是不是数组

if(Array.isArray(value)){
//对数组执行某些操作
}

IE 9+和其他浏览器支持此方法。

(4)转换方法

1》前文讲到Object对象都有toLocalString()、toString()、valueOf()方法

  • toLocaleString()方法:返回对象的字符串表示,该字符串与执行环境的地区对应。
  • toString()方法:返回对象的字符串表示。
  • valueOf()方法:返回对象的原始值,可能是字符串、数值或布尔值等。通常与toString()方法的返回值相同。

对数组而言:

  • toString()方法:返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
  • valueOf()方法:返回对象的原始值。
var colors = ["red","blue","green"];
console.log(colors.toString()); //red,blue,green
console.log(colors.toLocalString()); //red,blue,green
console.log(colors.valueOf()); //["red","blue","green"]
console.log(colors); //["red","blue","green"]
alert(colors.toString()); //red,blue,green
alert(colors.toLocalString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors); //red,blue,green

alert()要接受字符串参数,所以会在后台调用toString()方法。
2》join()方法:使用不同分隔符来构建包含所有数组项的字符串

var colors = ["red","blue","green"];
alert(colors.join(",")); //red,blue,green
alert(colors.join("||")); //red||blue||green

如果不给join方法传入任何值,或者给它传入undefined,则使用逗号作为分隔符。
如果数组中某一项的值是null或undefined,那么该值在join()、toLocalString()、toString()、valueOf()方法返回的结果中以空字符串表示。

(5)栈方法:LIFO后进先出;在栈的顶部插入,移除

1》push()方法:可以接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
2》pop()方法:从数组末尾移除最后一项,减少数组的length值,然后返回移除的项。

var colors = new Array();
var count = colors.push("red","green");
alert(count); //2

count = colors.push("blue");
alert(count); //3var item = colors.pop();
alert(item); //"blue"
alert(colors.length); //2

(6)队列方法:FIFO先进先出;队列在列表的末端添加项,从列表的前端移除项

1》push()方法:可以接受任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度。
2》shift()方法:移除数组中的第一项并返回该项,同时将数组长度减1。

var colors = new Array();
var count = colors.push("red","green");
alert(count); //2

count = colors.push("blue");
alert(count); //3var item = colors.shift();
alert(item); //"red"
alert(colors.length); //2

3》unshift()方法:在数组前端添加任意个项并返回新数组的长度。

使用unshift()和pop()方法,可以从相反方向来模拟队列,即在数组的前端添加项,从数组末端移除项。

var colors = new Array();
var count = colors.unshift("red","green");
alert(count); //2

count = colors.unshift("blue");
alert(count); //3
console.log(colors); //["blue","red","green"]var item = colors.pop();
alert(item); //"green"
alert(colors.length); //2

(7)重排序方法

1》reverse()方法:反转数组项顺序。

var values = [1,2,3,4,5];
values.reverse();
console.log(values); //[5,4,3,2,1]

2》sort()方法:按升序排列数组项。

var values = [0,1,5,10,15,6,25];
values.sort(); //[0,1,10,15,25,5,6] 进行字符串比较

sort()方法可以接受一个比较函数作为参数。

function compare1(value1,value2){
if(value1<value2){
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}
function compare2(value1,value2){
if(value1>value2){
return -1;
}else if(value1<value2){
return 1;
}else{
return 0;
}
}
function compare(value1,value2){
return value2 - value1;
}var values = [0,1,5,10,15,6,25];
values.sort(compare1); //[0,1,5,6,10,15,25]
values.sort(compare2); //[25,15,10,6,5,1,0]
values.sort(compare); //[25,15,10,6,5,1,0] 

(8)操作方法

1》concat()方法:基于当前数组中的所有项创建一个新数组。不会影响原始数组。

var colors = ["red","green","black"];
var colors2 = colors.concat("yellow",["blue","brown"]);alert(colors); //red,green,black
alert(colors2); //red,green,black,yellow,blue,brown

2》slice()方法:基于当前数组中的一或多个项创建一个新数组。不会影响原始数组。
可以接受一或两个参数,即要返回项的起始和结束位置。

var colors = ["red","green","black","yellow","blue","brown"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);alert(colors); //red,green,black,yellow,blue,brown
alert(colors2); //green,black,yellow,blue,brown
alert(colors3); //green,black,yellow

如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。如果结束位置小于起始位置,则返回空数组。
3》splice()方法。
删除:可以删除任意数量的项,只需指定2个参数:要删除的第一项的位置和要删除的项数。
插入:可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)、要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。
替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需提供3个参数:起始位置、要删除的项数、要插入的任意数量的项。插入的项数不必与删除的项数相等。
splice()方法始终都会返回一个数组,该数组包含从原始数组中删除的项(如果没有删除任何项,则返回一个空数组)。

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);
alert(colors); //green,blue
alert(removed); //red

removed = colors.splice(1,0,"yellow","orange");
alert(colors); //green,yellow,orange,blue
alert(removed); // 返回的是一个空数组

removed = colors.splice(1,1,"red","purple");
alert(colors); //green,red,purple,orange,blue
alert(removed); //yellow

(9)位置方法

indexOf()和lastIndexOf()两个方法。都接收两个参数:要查找的项和表示查找起点位置的索引(可选的)。其中indexOf()方法从数组的开头开始向后查找,lastIndexOf()方法从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置,或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时,会使用全等操作符,也就是说,要求查找的项必须严格相等。

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)); //3var person = {name:"Nicholas"};
var people = [{name:"Nicholas"}];var morePeople = [person];alert(people.indexOf(person)); //-1
alert(morePeople.indexOf(person)); //0

(10)迭代方法

ECMAScript5为数组定义了5个迭代方法。
每个方法都接受两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值。
传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。

  • every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
  • some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。
  • filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组。
  • forEach():对数组中的每一项运行给定函数,这个方法没有返回值。
  • map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

以上方法都不会修改数组中的包含的值。

var numbers = [1,2,3,4,5,4,3,2,1];var everyResult = numbers.every(function(item,index,array){
return (item>2);
});
alert(everyResult); //falsevar someResult = numbers.some(function(item,index,array){
return (item>2);
});
alert(someResult); //truevar filterResult = numbers.filter(function(item,index,array){
return (item>2);
});
alert(filterResult); //[3,4,5,4,3]var mapResult = numbers.map(function(item,index,array){
return item*2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]var forEachResult = numbers.forEach(function(item,index,array){
//执行某些操作
});//类似于for循环

IE 9+和其他浏览器支持

(11)归并方法

reduce()和reduceRight()方法迭代数组所有项,然后构建一个最终返回的值。
其中,reduce()从数组的第一项开始,逐个遍历到最后。reduceRight()方法则相反。
这两个方法都接受两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。
传入这些方法中的函数会接收四个参数:前一个值,当前值,项的索引和数组对象。

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

IE 9+和其他浏览器支持

转载于:https://www.cnblogs.com/LS-tuotuo/p/5880944.html

JS引用类型(2)——Array类型相关推荐

  1. 【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

    前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法 6.操作方 ...

  2. js——引用类型和基本类型

    js中的数据类型有以下几种: Number   Boolean   undefined     Object   Function    String  Null 基本类型:Number Boolea ...

  3. JavaScript高级程序设计读书笔记(第5章引用类型之Array类型)

    为什么80%的码农都做不了架构师?>>> 1.数组长度 //lenth会自动更新 var arr=["black","red","g ...

  4. js引用类型之RegExp类型-new RegExp()

    引 用 类 型 定义:引用类型是一种数据结构,用于将数据和功能组织在一起,引用类型有时候也被称为对象定义 RegExp 类型 标志flag的含义:  g :表示全局(global)模式,即模式将被应 ...

  5. 内置对象的API Array数组对象 String字符串对象 json字符串 JSON对象 js作用域及变量预解析 引用类型与值类型区别 共享引用 基本包装类型 数组去重

    01-内置对象的API a.Date对象获取时间 b.Array对象数组加工 c.String对象字符串加工 d.json字符串的语法格式 e.JSON对象的字符串与对象转换应用 02-JS作用域 a ...

  6. 【JS基础】Array数组的创建与操作方法

    本文参考:<JS高级程序设计>(红宝书). JS数组的独特性 JS中Array类型属于引用类型,是除了Object之外最常用的类型. JS的数组与其他语言的数组有着相当大的区别,它十分灵活 ...

  7. js 判断变量是否有值返回bool_基础 |判断 JS 中的变量类型竟然可以如此简单

    原标题:基础 |判断 JS 中的变量类型竟然可以如此简单 嗨 这里是IMWEB 一个想为更多的前端人 享知识 助发展 觅福利 有情怀有情调的公众号 欢迎关注转发 让更多的前端技友一起学习发展~ 正文 ...

  8. js php 数据类型判断,【js基础】变量类型判断

    类型判断方法比较: 如果需要想详细了解,请看下文: 注:原封不动复制备份,防止删帖 在JavaScript中,有5种基本数据类型和1种复杂数据类型,基本数据类型有:Undefined, Null, B ...

  9. .NET引用类型与值类型

    值类型和引用类型的基类 引用类型和值类型都继承自System.Object类.不同的是,几乎所有的引用类型都直接从System.Object继承,而值类型则继承其子类,即直接继承System.Valu ...

最新文章

  1. 解决gitte提交报错 error: GE007: Your push would publish a private email address.
  2. HTML 框架 frameset,frame
  3. Mac OS X上的Java安装位置在哪里?
  4. SUDO的环境变量为何不同?
  5. Jquey将序列化对象在前台显示地几种方式
  6. 【CodeForces - 1038A 】Equality (思维水题,预处理字符串)
  7. Win10 独立音量调整
  8. Java语言实现查找两个字符串的最大公共字串
  9. con和com开头单词规律_日语记忆其实很有规律,对于日语初学者你知道这些窍门么...
  10. 网站页面要怎么设计?
  11. centos7下多播路由器安装及配置
  12. android pdf修改字体大小,如何编辑pdf文字(安卓上最好的pdf笔记app)
  13. 添加个人博客音乐外链
  14. php redis 操作
  15. 利用SQLite数据库进行用户名、密码的注册和登录验证
  16. XCTF-mobile app3
  17. java选择结构与分支结构
  18. uniapp支付宝小程扫描二维码获取参数
  19. 使用Trinity进行转录组组装
  20. 原来Oracle也不喜欢“蜀黍”

热门文章

  1. Python 小把戏之图片转字符串
  2. 2.2.7 局部最优化问题
  3. Ubuntu16.04添加设置启动项
  4. 第六篇T语言实例开发,多点找色应用
  5. RabbitMQ —— 延迟队列
  6. 网络流三·二分图多重匹配 HihoCoder - 1393
  7. 允许修改 SharePoint2010 中的电子邮件
  8. python crawler(1)
  9. python路径文件api
  10. JAVA自动补全插件