javascript类型系统 Array对象学习笔记


Posted in Javascript onJanuary 09, 2016

       数组是一组按序排列的值,相对地,对象的属性名称是无序的。从本质上讲,数组使用数字作为查找键,而对象拥有用户自定义的属性名。javascript没有真正的关联数组,但对象可用于实现关联的功能

Array()仅仅是一种特殊类型的Object(),也就是说,Array()实例基本上是拥有一些额外功能的Object()实例。数组可以保存任何类型的值,这些值可以随时更新或删除,且数组的大小是动态调整的

一、数组创建

与Javascript中的大多数对象一样,可以使用new操作符连同Array()构造函数,或者通过使用字面量语法来创建数组对象

【1】使用Array构造函数(在使用Array构造函数时,也可以省略New操作符),可以将数组实例的值传递给构造函数,以逗号分隔作为参数,Array()构造函数可以接收4294967295(大约43亿)个参数

如果只有一个参数:若传递的是数值,它将用来设置数组的长度;若传递的是其他类型的参数,则会创建包含那个值的只有一项的数组

var colors;
console.log(colors = new Array(),colors.length);//[] 0
console.log(colors = new Array('red','blue','green'),colors.length);//['red','blue','green'] 3
console.log(colors = new Array(20),colors.length);//[] 20
console.log(colors = new Array('red'),colors.length);//['red'] 1
var foo = new Array(1,2,3);
var bar = new Array(100);
console.log(foo[0],foo[2]);//1 3
console.log(bar[0],bar.length);//undefined 100

【2】使用数组字面量表示法

var colors = ['red','blue','green'];
var colors = [];



//Array构造函数
var myArray1 = new Array('blue','green','orange','red');
console.log(myArray1);//['blue','green','orange','red']
//数组字面量表示法
var myArray2 = ['blue','green','orange','red'];
console.log(myArray2);//['blue','green','orange','red']



var colors = [1,2,]; 
//在IE8及以前中会包含一个三个项目,且每个项目为1、2和undefined的数组。在其他浏览器中为只包含1和2的数组
var colors = [,,,];
 //在IE8及以前会创建4项的数组,而在其他浏览器中会创建3项的数组

二、数组操作

在读取和设置数组的值时,要使用方括号并提供相应值的基于0的数字索引

数组的长度length属性表示数组中值的数量,而数组的数字索引是从0开始的;且length属性可读可写,通过设置数组的Length属性,可以从数组的末尾移除项或向数组中添加新项。如果设置的长度高于数组中值的实际数量,将向数组中添加undefined值;若将长度值的数量设置为少于数组中的值的数量,可能会删除数组中的值

var myArray = ['blue','green','orange','red'];
console.log(myArray.length);//4
myArray.length = 99;
console.log(myArray.length);//99
myArray.length = 1;
console.log(myArray[1]);//undefined
console.log(myArray);//['blue']

 

var colors = ['red','blue','green'];
colors.length = 2;
alert(colors[2]);//undefined
colors.length = 4;
alert(colors[3]);//undefined

当把一个值放在超出数组大小的位置上时,数组就会重新计算其长度值,即长度值等于最后一项的索引加1,Javascript将会使用undefined值填充当前索引之前的所有索引

var myArray = [];
myArray[50] = 'blue';
console.log(myArray.length);//51
var colors = ['red','blue','green'];
colors[99] = 'black';
console.log(colors.length);//100

[tips]利用length属性可以方便地在数组末尾添加新项

colors[colors.length] = 'black'; 

三、继承的方法

toString()

返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

valueof()

返回的还是数组 

var colors = ['red','blue','green'];         
console.log(colors.valueOf());//['red','blue','green']
alert(colors.valueOf());//'red,blue,green' 
alert(colors.toString());//'red,blue,green'
alert(colors);//'red,blue,green'[注意]由于alert()要接收字符串参数,它会在后台调用toString()方法,会得到与toString()方法相同的结果

toLocaleString()

调用该方法时,数组的每一项的值调用的是toLocaleString()方法

var person1 = {
  toLocaleString: function(){
    return 'Nikolaos';
  },
  toString: function(){
    return 'Nicholas';
  }
};
var person2 = {
  toLocaleString: function(){
    return 'Grigorios';
  },
  toString: function(){
    return 'Greg';
  }
};

var people = [person1,person2];
alert(people);//Nicholas,Greg
alert(people.toString());//Nicholas,Greg
alert(people.toLocaleString());//Nikolaos,Grigorios

四、实例方法

数组转换
join()

数组继承的toLocaleString()、toString()、valueOf()方法,在默认情况下都会以逗号分隔的字符形式返回数组项;而join()方法可以使用不同的分隔符来构建这个字符串,join()方法只接收一个参数,用作分隔符的字符串,然后返回包含所有数组项的字符串。如果不给join()方法传入任何值,或者传入undefined,则使用逗号作为分隔符

var colors = ['red','green','blue'];
console.log(colors.join(','));//'red,green,blue'
console.log(colors.join('||'));//'red||green||blue'
console.log(colors.join());//'red,green,blue'
console.log(colors.join(undefined));//'red,green,blue'[注意]IE7-会使用undefined作为分隔符

[注意]如果数组中的某一项的值是null或者undefined,那么该值在join()、toLocaleString()、toString()和valueOf()方法返回的结果中以空字符串表示

数组检测

自从ES3做出规定之后,就出现了确定某个对象是不是数组的经典问题。一般的常见方法是使用instance操作符,但该方法有它的局限性;ES5专门新增了isArray()方法来检测数组

var value = [123];
console.log(value instanceof Array);//true

instanceof操作符的问题在于它假定只有一个全局执行环境,如果网页中包含多个框架,那实际上就存在两个以上不同的全局环境,从而存在两个以上不同版本的Array构造函数。如果从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数

//在不同框架中不能共享prototype属性
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var value = new window.frames[0].Array;
console.log(value instanceof Array);//false
console.log(value.constructor == Array);//false

  但是,在不同框架中可以跨原型链调用toString()方法

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var value = new window.frames[0].Array;
console.log(Object.prototype.toString.call(value));//[object Array]

ES5新增了Array.isArray()方法,来最终确定某个值到底是不是数组,而不管它在哪个全局环境中创建的

Array.isArray()

var value = [123];
console.log(Array.isArray(value));//true
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var value = new window.frames[0].Array;
console.log(Array.isArray(value));//true

栈和队列
push()

可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度

pop()

从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

shift()

移除数组中的第一个项并返回该项,同时数组的长度减1(结合使用shift()和push()可以模拟队列)

unshift()

在数组前端添加任意个项并返回新数组长度(结合使用unshift()和pop()从相反方向模拟队列)

[注意]IE7-浏览器unshift()方法返回的总是undefined 

var colors = [];
var count = colors.push('red','green');
console.log(colors,count);//['red','green'] 2
var count = colors.pop();
console.log(colors,count);//['red'] 'green'
var count = colors.unshift('white','black');
console.log(colors,count);//["white", "black", "red"] 3
var count = colors.shift();
console.log(colors,count);//["black", "red"] "white"

排序方法
reverse()

反转数组的顺序,返回经过排序之后的数组;而原数组顺序也发生改变

var array = [1,2,4,3,5];
console.log(array,array.reverse());//[5,3,4,2,1] [5,3,4,2,1]
var array = ['str',true,3];
console.log(array,array.reverse());//[3,true,'str'] [3,true,'str']

sort()

默认情况下,按字符串升序排列数组项,sort方法会调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组,而原数组顺序也发生改变

var array = [1,2,4,3,5];
console.log(array,array.sort());//[1,2,3,4,5] [1,2,3,4,5]
var array = ['3str',3,2,'2'];
console.log(array,array.sort());//[2, "2", 3, "3str"] [2, "2", 3, "3str"]
var array = [1,5,10,50];
console.log(array,array.sort());//[1, 10, 5, 50] [1, 10, 5, 50]
 

[注意]sort()方法可以接受一个比较函数作为参数,以便指定哪个值在哪个值的前面。比较函数接收两个参数,如果第一个参数应该位于第二个参数之前则返回一个负数,如果两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数

[tips]比较函数

function compare(value1,value2){
  if(value1 < value2){
    return -1;
  }else if(value1 > value2){
    return 1;
  }else{
    return 0;
  }
}
var array = ['5px',50,1,10];
//当数字与字符串比较大小时,字符串'5px'会被转换成NaN,这样结果就是false
console.log(array.sort(compare));//["5px",1, 10, 50]

对于数值类型或valueOf()方法会返回数值类型的对象类型,比较函数可以简化为: 

function compare(value1,value2){
  return value1 - value2;
}
var array = ['5px',50,1,10];
console.log(array.sort(compare));//["5px",1,10,50]
var array = [5,50,1,10];
console.log(array.sort(compare));//[1,5,10,50]

 [tips]创建一个随机数组

function compare(){
  return Math.random() - 0.5;
}
var array = [1,2,3,4,5];
console.log(array.sort(compare));//[2,1,5,4,3]

操作方法
concat()

基于当前数组中的所有项创建一个新数组,先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组(concat()不影响原数组)

如果不给concat()方法传递参数时,它只是复制当前的数组;如果参数是一个或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中;如果传递的值不是数组,这些值就会被简单地添加到结果数组的末尾

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

slice()

基于当前数组中的一个或多个项创建一个新数组,接受一个或两个参数,即要返回项的起始和结束位置,最后返回新数组(slice()不影响原数组)

如果没有参数,则返回原数组;如果只有一个参数时,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项;若有两个参数时,该方法返回起始位置和结束位置之间的项,但不包括结束位置的项;若参数为负数时,则用数组长度加负数作为参数;若结束位置小于开始位置,则返回空数组

var numbers = [1,2,3,4,5];
console.log(numbers.slice());//[1,2,3,4,5]
console.log(numbers.slice(2));//[3,4,5]
console.log(numbers.slice(2,3));//[3]
console.log(numbers.slice(-3));//-3+5=2 -> [3,4,5]
console.log(numbers.slice(2,1));//[]

splice()

原数组变为修改后的数组,而splice()返回从原数组中删除的项组成的数组,若无删除项则返回空数组。若第一个参数为负数时,则用数组长度加负数作为参数;若第二个参数为负数时,则用0作为参数

[1]删除:两个参数为要删除的第一项的位置、要删除的项数

[2]插入:三个参数为起始位置、0(要删除的基数)、要插入的项

[3]替换:三个参数为起始位置、要删除的项数、要插入的项

var numbers = [1,2,3,4,5];
console.log(numbers.splice(),numbers);//[] [1, 2, 3, 4, 5]
console.log(numbers.splice(0,2),numbers);//[1,2] [3,4,5]
var numbers = [1,2,3,4,5];
console.log(numbers.splice(1,0,11,12),numbers);//[] [1,11,12,2,3,4,5]
var numbers = [1,2,3,4,5];
console.log(numbers.splice(1,3,11,12),numbers);//[2,3,4] [1,11,12,5] 
var numbers = [1,2,3,4,5];
console.log(numbers.splice(-4,3,11,12),numbers);//-4+5=1 -> [2,3,4] [1,11,12,5] 
var numbers = [1,2,3,4,5];
console.log(numbers.splice(-4,-3,11,12),numbers);//-4+5=1 -> [] [1,11,12,2,3,4,5]

位置方法

ES5为数组实例添加了两个位置方法indexOf()、lastIndexOf()。这两个方法都接收两个参数:要查找的项、表示查找起点位置的索引(可选)。返回第一个满足条件的查找项在数组中的位置,如果没有找到则返回-1(位置方法不会影响原数组)

[注意]方法在比较参数时,使用的是全等操作符

indexOf()

从前向后查找
lastIndexOf() 

从后向前查找

var numbers = [1,2,3,4,5,4,3,2,1];
console.log(numbers.indexOf(4));//3
console.log(numbers.lastIndexOf(4));//5
console.log(numbers.indexOf(4,4));//5
console.log(numbers.lastIndexOf(4,4));//3

 

var person = {name: 'Nicholas'};
var people = [{name: 'Nicholas'}];
var morePeople = [person];
alert(people.indexOf(person));//-1,因为person和people[0]虽然值相同,但是是两个引用
alert(morePeople.indexOf(person));//0,因为person和morepeople[0]是同一个引用
alert(morePeople.indexOf({name: 'Nicholas'}));//-1,因为不是同一个引用

[tips]返回满足条件的项的所有索引值

function allIndexOf(array,value){
  var result = [];
  var pos = array.indexOf(value);
  if(pos === -1){
    return -1;
  }
  while(pos > -1){
    result.push(pos);
    pos = array.indexOf(value,pos+1);
  }
  return result;
}
var array = [1,2,3,3,2,1];
console.log(allIndexOf(array,1));//[0,5]

以上就是本文的详细内容,希望对大家的学习javascript程序设计有所帮助。

Javascript 相关文章推荐
新闻内页-JS分页
Jun 07 Javascript
利用jQuery 实现GridView异步排序、分页的代码
Feb 06 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JS随机密码生成算法
Sep 23 Javascript
Javascript confirm多种使用方法解析
Sep 25 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
JS中生成随机数的用法及相关函数
Jan 09 #Javascript
JavaScript电子时钟倒计时
Jan 09 #Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 #Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 #Javascript
学习JavaScript设计模式之状态模式
Jan 08 #Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 #Javascript
js实现对ajax请求面向对象的封装
Jan 08 #Javascript
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php的socket编程详解
2016/11/20 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
Mootools 1.2教程 函数
2009/09/15 Javascript
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
JavaScript eval() 函数介绍及应用示例
2014/07/29 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python cumsum函数的具体使用
2019/07/29 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
初中三好学生事迹材料
2014/01/13 职场文书
建筑结构施工专业推荐信
2014/02/21 职场文书
昆虫记读书笔记
2015/06/26 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
springboot 启动如何排除某些bean的注入
2021/08/02 Java/Android
Java实现房屋出租系统详解
2021/10/05 Java/Android