当前位置: 首页 > Web前端 > vue.js

JavaScript引用类型Array实例分析

时间:2023-03-31 15:41:56 vue.js

1.ECMAScript数组的特点ECMAScript数组的每一项都可以存储任何类型的数据。ECMAScript数组的大小可以动态调整。2.创建数组(1)使用Array构造函数(new操作符可以省略)vararr1=newArray();vararr2=新数组(3);vararr3=newArray("老师",3,真);(2)使用数组字面量表示法vararr1=[];vararr2=["老师",3,真];3.长度属性ECMAScript数组的长度属性不是只读的。通过设置这个属性,你可以从数组的末尾开始移除项或向数组添加新项。eg1:从数组末尾删除项vararr=["teacher",3,true];arr.length=1;警报(arr[2]);//undefinedeg2:如果length设置为大于当前数组length的值,则每个新项目将获得未定义的值vararr=["teacher",3,true];arr.length=4;alert(arr[3]);//undefinedeg3:向数组添加新项vararr=["teacher",3,true];arr[arr.length]="医生";eg4:当放置一个值超出当前数组大小时,数组会重新计算它的长度值,等于最后一项的索引加一。vararr=["老师",3,真];arr[9]="doctor";alert(arr.length);//104、检测数组(一)instanceof运算符if(valueinstanceofArray){...}问题:如果一个网页包含多个框架,则有实际上不止两个不同的全局执行环境,所以也有不止两个不同版本的Array构造器。如果数组从一个框架传递到另一个框架,则传递的数组将具有与在第二个框架中本地创建的数组不同的构造函数。(2)Array.isArray()方法if(Array.isArray(value)){...}目的:判断给定的值是否为数组,无论它是在哪个全局执行环境中创建的。5.转换方法(1)toString():返回一个由逗号分隔的字符串,该字符串由每个项目的字符串连接而成。为了获取每一项的值,调用了每一项的toString()方法。(2)valueOf():返回的还是一个数组(3)toLocaleString():为了获取每一项的值,调用了每一项的toLocaleString()方法,而不是toString()方法。(4)join():使用指定的分隔符构建字符串说明:alert()方法需要接收一个字符串参数,所以会在后台调用toString()方法。eg1:varfriends=["Alice","Bruce","Cindy"];alert(friends.toString());//Alice,Bruce,Cindyalert(friends.valueOf());//Alice,Bruce,Cindyalert(friends.toLocaleString());//Alice,Bruce,Cindyalert(friends);//Alice,Bruce,Cindyalert(friends.join());//Alice,Bruce,Cindyalert(friends.join("|"));//Alice|Bruce|Cindyeg2:varperson1={toLocaleString:function(){return"Alice";},toString:function(){返回“布鲁斯”;}//前端全栈开发交流圈:866109386}//帮助前端人员1-3年,突破技术瓶颈,提升思维能力varperson2={toLocaleString:function(){return"Cindy";},toString:function(){返回“大卫”;}}varperson=[person1,person2];alert(person);//Alice,Brucealert(person.toString());//Alice,Brucealert(person.toLocaleString());//Cindy,David6,堆栈方法(1)push():接收任意个参数,一个一个添加到末尾,返回修改后数组的长度。(2)pop():从数组尾部取出最后一项,数组长度减一,返回取出的项。varfriends=newArray();varlen=friends.push("Alice","Bruce");alert(len);//2varfriend=friends.pop();alert(friend);//"Bruce"警报(朋友。长度);//17。队列方法(1)shift():移除数组的第一项,数组长度减一,返回移除的项。(2)unshift():在数组最前面添加任意数量的项,返回修改后的数组长度。varfriends=newArray();varlen=friends.unshift("Alice","Bruce");alert(len);//2varfriend=friends.shift();alert(friend);//"爱丽丝"警报(朋友。长度);//18。重新排序方法(1)reverse():反转数组项的顺序(2)sort():对数组项进行升序排序sort()方法会调用每个项的toString()方法,并比较结果字符串。varitems=[0,1,3,15,18];items.sort();alert(items);//0,1,15,18,3sort()方法可以接收一个比较函数作为参数:comparison函数接收两个参数,如果第一个参数应该在第二个参数之前,则返回一个负数;如果两个参数相等则返回0;如果第一个参数应该在第二个参数之后,则返回一个正数。函数比较(项目1,项目2){如果(项目1<项目2)返回-1;elseif(item1>item2)返回1;elsereturn0;//前端全栈学习交流圈:866109386}//帮助1-3年前端人员突破技术瓶颈,提升思维能力。varitems=[0,1,3,15,18];items.sort(compare);alert(items);//0,1,3,15,18会返回数值类型的值或者它们的valueOf()method类型的对象类型,可以是比较函数的简写。functioncompare(item1,item2){returnitem1-item2;}9.操作方法(1)concat():根据当前数组中的所有项创建一个新数组。创建当前数组的副本,将接收到的参数附加到副本的末尾,并返回新构造的数组。如果没有参数传递给concat(),只是复制当前数组并返回一个副本;如果将一个或多个数组传递给concat(),此方法会将这些数组中的每一项添加到结果数组;如果将非数组传递给concat(),则将值简单地添加到结果数组的末尾。varfriends=["Alice","Bruce"];varnewFriends=friends.concat("Cindy",["David","Emy"]);alert(newFriends);//Alice,Bruce,Cindy,David,Emy(2)slice():根据当前数组的一项或多项创建一个新数组。接受一个或两个参数,即要返回的项目的开始和结束位置(不包括结束位置)。slice()方法不影响原始数组。如果参数中有负数,则通过将负数加到数组长度来确定对应的位置。如果结束位置小于开始位置,则返回一个空数组。varfriends=["Alice","Bruce","Cindy"];varfriends1=friends.slice(1);alert(friends1);//Bruce,Cindyvarfriends2=friends.slice(1,2);alert(friends2);//Brucesplice():主要目的是向数组中间插入项,返回一个包含从原数组中删除的项的数组,如果没有删除项则返回空数组。有3种使用方式:1)删除:可以删除任意数量的item,只需要指定2个参数:第一个要删除的item的位置和要删除的item的个数。2)Insert:可以在指定位置插入任意数量的item,只需要指定3个参数:起始位置,删除的item数量,插入任意数量的item。3)替换:可以在指定位置插入任意数量的item,也可以同时删除任意数量的item,只需要指定3个参数:起始位置,要删除的item个数,和要插入的任意数量的项目。插入的项目数不必等于删除的项目数。varfriends=["Alice","Bruce","Cindy"];varfriends1=friends.splice(0,1);alert(friends1);//Bruce,Cindyvarfriends2=friends.slice(1,0,"David","Emy");alert(friends2);//Bruce,David,Emy,Cindyvarfriends3=friends.slice(1,1,"Fancy","Gary");alert(friends3);//Bruce,Fancy、Gary、Emy、Cindy10、定位方法(一)indexOf():接收两个参数——要搜索的item和搜索起点的可选index,从头开始搜索,没有则返回-1成立。(2)lastIndexOf():接收两个参数——要查找的项和可选的查找起点索引,从末尾开始,没有找到则返回-1。在比较第一个参数和数组中的每一项时,使用恒等运算符,这意味着要查找的项必须严格相等。varperson={name:"Alice"};varpeople1=[{name:"Alice"},person];alert(people1.indexOf(person));//1,不是011,迭代法有5个ECMAScript数组迭代法。每个方法接收两个参数——一个在每个项目上运行的函数和一个可选的作用域对象(影响this的值)来运行该函数。传入的函数接收三个参数-数组项的值、项在数组中的位置以及数组对象本身。(1)every():对数组中的每一项运行给定的函数,如果函数对每一项都返回真,则返回真。(2)some():对数组中的每一项运行给定的函数,并返回函数返回真值的项目数组。(3)filter():对数组中的每一项运行给定的函数,如果函数对每一项都返回真,则返回真。(4)foreach():对数组中的每一项运行给定的函数,不返回值。(5)map()`:对数组中的每一项运行给定的函数,如果函数对每一项都返回真,则返回真。varnums=[1,2,3,4,1,2,3];varevery=nums.every(function(item,index,array){return(item>2);//前端全栈学习交流圈:866109386});//帮助1-3年经验的前端人员,突破技术瓶颈,提升思维能力alert(every);//falsevarsome=nums.some(function(item,index,array){return(item>2);});alert(some);//truevarfilter=nums.filter(function(item,index,array){return(item>2);});alert(filter);//[3,4,3]varmap=nums.map(function(item,index,array){return(item*2);});alert(map);//[2,4,6,8,2,4,6]nums.foreach(function(item,index,array){...});12.merge方法遍历数组中的所有项,然后构建最终返回值。接受两个参数-一个调用每个项目的函数和一个可选值作为合并的基础。传入的函数接收四个参数——前一个值、当前值、项的索引和数组对象。函数返回的任何值都会作为第一个参数自动传递给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项。(1)reduce():从数组的第一项开始,逐项遍历到末尾。变种项目=[1,2,3,4];varsum=项目。reduce(函数(prev,cur,index,array){returnprev+cur;});alert(sum);//10(2)reduceRight():接收两个参数-一个调用每个项目的函数和一个可选值作为合并的基础。从数组中的最后一项开始,向前遍历到第一项。varitems=[1,2,3,4];varsum=items.reduceRight(function(prev,cur,index,array){returnprev+cur;});alert(sum);//10