数组:
特点:
数组长度可以动态修改(通过length修改)
数组中的元素类型可以任意
length:可以获取数组长度,可以设置数组长度
1.创建数组实例对象
1.数组字面量
var arr=[1,2,3,undefined,null,false,function,{}];
代码测试:
-------------------空数组+数组数据类型-------------------
数组数据类型为object
-------------------------非空数组--------------------------
数组元素function(){},输出后结果为[Function]
2.构造函数
var arr=new Array(); //创建空数组
var arr=new Array(10); //当参数个数为一个,并且数据类型为number时,代表创建该长度的数组
var arr=new Array(2,3,true,null); //参数个数超过一个,创建一个包含参数项的数组
代码测试:
----------------------数组长度----------------------
创建数组-构造函数方法大概原理
---- function Array(){
if(arguments.length==0){ //当参数个数为0即空数组
//-------- //arguments类数组对象
}else if(arguments.length==1&&typeof(arguments[0])=='number'){//当参数个数为1,且参数的数据类型为number,类型二
//10
}else{ //类型三
}
}
----- new Array();
2.访问
arr[index]; //index为数组下标,下标从0开始
var arr=[];
arr.length=5;
arr[0]=null;
代码测试:
-----------------通过length来改变数组长度----------------
---------------通过设值改变数组长度----index>数组长度-------------
----------------通过设置length改变数组长度---length<数组长度--------------
相当于删除了数组长度减length个数组元素
3.检查
isArray() 返回当前参数是否为数组类型,如果是返回true
Array.isArray(a); //静态方法,用Array构造函数来调,isArray()声明在构造函数函数内
代码测试:
Array.from() //es6,将类数组对象(必须具有length属性,属性名一定为number类型或者字符串类型的number)转换为数组
代码测试:
--------------------Array.from---------------------
----arguments为空----
----arguments非空----
-------------判断Array.from是否是一个数组-------------
----------------------写一个类数组对象用Array.from将其转换为数组-----------------
Array.of() //es6,将参数转换为数组或将参数当作数组元素添加到数组中创建数组,相当于创建一个数组
代码测试:
istanceof 判断一个数据是否是一个类型,在此可以判断arr是否是数组
例:console.log(arr instanceof Array)
代码测试:
4.转换
将数组转换为字符串
1》toString();
代码测试:
转换后的数据类型不是object object证明Array构造函数中的property中一定也重写了toString方法,这个toString方法的返回值为原样输出。
2》join() //将数组元素使用什么连接并组成字符串
join("-");
代码测试:
5.方法
1.添加或者删除数组元素
1.栈方法(先进后出)
实例对象调用
pop() //删除一个数组元素
arr.pop()
参数:无
返回值:删除的数组元素
代码测试:
如下图所示,栈方法pop()所删除的数组元素为数组的最后一个元素,没有参数,返回值为删除的数组元素。
push() //添加一个数组元素
arr.push()
参数:添加的数组元素
返回值:添加元素之后的数组长度
代码测试:
如下图所示,栈方法push()添加的元素,添加在原数组末尾,参数为所要添加的数组内容,返回值为添加元素之后的数组长度。
2.队列方法(先进先出)
shift()
arr.shift() //删除数组元素
参数:无
返回值:删除的数组元素
代码测试:
如下图所示,队列方法shift( )删除数组元素,删除的元素是数组的第一个元素,没有参数,返回值是删除的数组元素。
unshift()
arr.unshift() //添加数组元素
参数:添加的数组元素
返回值:添加元素之后的数组长度
代码测试:
如下图所示,队列方法unshift( )添加数组元素,所添加的数组元素位于数组开头,参数为所要添加的数组元素,返回值为添加元素后的数组长度。
2.排序方法
reverse() //反转 ,直接在原数组上进行反转
参数:无
返回值:反转之后的数组
代码测试:
如下图所示,排序方法reverse( ),没有参数,返回值为反转后的数组,且反转是在原数组内反转,没有创建新数组。
sort()
参数:无 //调用每一个数组元素的toString()进行排序
参数: //例:arr.sort(function(a,b))
回调函数:
function(a,b){ //a,b每次比较的两个数值
if(a>b){
return 1; //返回值为正1,代表将a往后排
}else if(a<b){
return -1; //返回值为负1,代表将a向前排
}else{
return 0;
}
}
代码测试:
-------------------------参数为无-------------------------
如下图所示,排序方法sort( )当参数为无时,调用每一个数组元素的toString( )进行排序,先比较每一个数组元素的第一个字符,然后再比较第二个字符排序。
---------------------------有参数(参数必为回调函数)---------------------------
--------------a,b的赋值-------------
----------------升序排列----------------
---------------降序排列--------------
-----------------------------排序例子-------------------------------
如下图所示,通过sort( )排序,有参数,参数必须是回调函数
1)不论a,b是哪个数组元素,元素都为object类型,需要调用toString( ),将元素转换为字符串类型才能比较,但是,arr数组中的元素为键值对,无法进行比较,所以不能直接将function(a,b){ }回调函数直接写在sort( )的括号内
2)声明函数handler(key){ },通过返回回调函数,将回调函数传入sort( )中
3)handler("age")将实参“age”传给形参key(其他属性同理)
4) 此时回调函数内a,b仍为对象,key为age,仍不能直接比较a,b
5)将a的key赋给c,将b的key赋给d,根据c,d比较的结果进行判断
3.操作方法
非静态方法
concat(): 用来做数组拼接,只要将需要拼接的内容传给它即可。
返回值为一个新数组。
可以拼接一个普通数据类型,也可以拼接一个或多个数组。
代码测试:
如下图可知,concat( )进行数组拼接,参数为拼接内容,在数组末尾进行拼接,返回值为拼接完成后形成的新数组。
-----------------数组和字符串拼接-----------------
----------------数组和数组拼接----------------
两个数组
三个数组:
slice(): 数组截取(切割)
//不修改原数组
0:返回一个新数组,并且和原数组一样
1:
index:从当前index位置开始截取,截取到数组末尾结束。
2:
begin end 从begin位置开始截取,至end位置结束,不包含位置
//-1代表最后一个数组元素
代码测试:
-------------------------参数个数为0-------------------------------
如下图可知,slice( )进行数组切割,参数个数为0时,返回值为一个和原数组一模一样的新数组,相当于原数组的复制
----------------------------参数个数为1-----------------------------
如下图所示,可知slice( )进行数组截取,参数为1时,参数为index,数组下标,截取内容为:从index位置开始截取,截取至末尾,返回值为截取内容构成的新数组。
-----------------------------参数个数为2---------------------------
由下图可知,slice( )截取数组,参数个数为2时,第一个参数为begin起始位置,第二个参数为end结束位置,截取内容为从begin位置截取到end位置,不包含end位置内容,返回值为截取部分组成的新数组。
splice(): 数组截取
//修改原数组
0:返回值为一个空数组
1:
index 从当前index位置开始截取,截取到数组末尾结束
2:
begin num 从begin位置开始截取,截取num个元素
3:
1》begin num "hello","world" 替换,从begin位置开始,截取num个元素,用“hello”,“world”补上,相当于替换
返回值为截取部分,原数组为替换结果
2》begin 0 "hello" 插入,从begin位置开始,截取0个元素,插入"hello"
返回值为空数组,原数组为插入结果
代码测试:
-------------------参数个数为0----------------------
由下图可知,splice( )进行数组切割,参数个数为0时,返回值为一个空数组。
-------------------参数个数为1--------------------
由下图可知,splice( )进行数组切割,参数个数为1时,参数为index,切割内容为从index位置到数组末尾的内容,返回值为切割内容组成的新数组,原数组变为切割后剩下的部分。
---------------------参数个数为2-----------------------
由下图可知,splice( )进行数组切割,参数个数为2时,第一个参数为index,第二个参数为num,截取内容为从index位置开始截取,截取num个元素,返回值为截取内容构成的新数组,原数组变为截取后剩下的部分。
------------------------参数个数为3------------------------
1)第二个参数num不等于0
由下图可知,splice( )进行数组切割,参数个数为3,第一个参数为index,第二个参数为num,第三个参数为字符串,截取内容为从index开始截取,截取num个元素,返回值为截取内容构成的新数组,原数组为第三个参数字符串插入截取内容在原数组的位置,相当于做了替换操作,将截取部分替换为第三个参数。
2)第二个参数等于0
由下图可知,splice( )进行数组切割,参数个数为3,第一个参数为index,第二个参数num为0,第三个参数为字符串,截取内容为从index开始截取,截取0个元素,返回值为空数组,原数组变为从第三个元素位置插入第三个参数的内容后的结果。
indexOf(key,index):
全等比较
查找数组元素,从前向后查找,只找一个元素即返回
对于找到的元素返回数组下标
对于找不到的元素,返回-1
代码测试:
----------------------参数个数为1,第一个参数为key,第二个参数index默认为0---------------
由下图可知,indexOf( )对数组元素进行查找,参数为所要查找的元素内容,从前往后查找,查找到一个即停止,返回值为查到的元素下标index。
由下图可知,indexOf( )查找元素,用的是全等比较,数据类型也得符合。
----------------参数个数为2,第一个参数为key,第二参数为index起始位置下标--------------
由下图可知,从index位置开始查找key,返回值为查找到的元素的下标。
由下图可知,当找不到时,返回值为-1。
lastIndexOf():
查找数组元素,从后向前查找,找到,返回值为找到的元素下标,找不到,返回值为-1.
代码测试:
4.迭代方法(数组)
//非静态方法
every: 当每一个数组元素满足条件时,返回true
some: 只要有一个数组元素满足条件,返回true
map: 对数组每一元素进行操作,返回值是一个包含操作后的数组元素的新数组
filter: 过滤,过滤满足条件的数组元素,返回值是所有满足条件的数组元素构成的新数组
forEach(): //forEach没有返回值,以上四个有返回值
以上五种迭代方法的参数是一样的,分别为回调函数和回调函数中的this
回调函数参数:
item index arr //数组元素 当前数组下标 当前数组
代码测试:
--------------------------forEach( )遍历------------------------
由下图可知,当前回调函数有几个数组项就执行几次当前的回调函数,结果第一列为item,第二列为index数组下标,第三列为数组arr。
由下图可知,forEach( )是没有返回值的。
由下图可知,回调函数的this默认指向window(兜底)。
由下图可知,forEach( )参数为回调函数和回调函数的this,通过设置第二个参数,可以修改回调函数的this指向。
-------------------every( )--------------------
由下图可知,every( )返回值为布尔值,只有数组中的每一个元素都符合条件时才返回true。
-------------------------some( )---------------------------
由下图可知,some( )返回值为布尔值,只要数组中有一个元素都符合条件就返回true,所有数组元素都不满足条件时才返回false。
------------------------map( )-------------------------
由下图可知,map( )遍历每一个数组元素并对数组元素进行相应的操作,返回值为一个执行操作后的新数组。
------------------------filter( )------------------------
由下图可知,filter对数组元素进行过滤,返回值为满足条件的数组元素组成的新数组。
--------------------------myForEach( )-仿写forEach( )----------------------------
1)myForEach( )一定声明在Array.prototype(Array的原型对象)中
2)在myForEach( )的函数声明里通过arguments[0]拿到arr.myForEach( )中的实参--回调函数function( ){ }
3)arr有几个数组项就得循环几次,通过this拿到数组,myForEach( )被arr调用,this一定指向arr
4)用for循环遍历数组,循环执行回调函数,不能arguments[0]( )直接调用,如果这样调用,当前函数回调函数的this值指向arguments,但是forEach( )在不设第二个参数的情况下默认指向window,满足if( )用call( )/apply( )改变this指向window,满足else if( )用call( )/apply( )改变this指向myForEach( )的第二个参数,即指向arguments[1]。
var arr=[1,2,3,4,5];
Array.prototype.myForEach=function()
{
if(arguments.length==1&&typeof arguments[0]=="function"){
//当参数为一个并且为函数类型时
for(var i=0;i<this.length;i++){
arguments[0].call(window,this[i],i,this);
}
}else if(arguments.length==2){
//当参数为两个,第一个为回调函数,第二个为this时
for(var i=0;i<this.length;i++){
arguments[0].call(arguments[1]);
}
}
}
arr.myForEach( function(item,index,arr ){
console.log(item,index,arr);
});
---------------------满足if( )-------------------
----------------满足else if( )-------------
--------------------------myForEach( )--仿写forEach( )---------------------------
reduce(): //es6
参数:回调函数和this
其中回调函数参数: pre item index arr
//pre 上一次回调函数的返回值或初始值
如果this值没有设定,那么第一次pre为数组的第一个数组项,如果this值设定 ,第一次pre为初始值,第二次的pre为上一次回调函数的返回值
代码测试:
由下图可知reduce( )的参数pre第一次遍历,初始值为{ },返回object{ },第二次往后的遍历返回值都为undefined,是因为,没有给第一次的遍历设置返回值。
随意给一个返回值1,第一列pre除第一个返回值为初始值object{ }外,其他都是1
给一个返回值item,第一列pre除第一个返回值为初始值object{ }外,其他为前一个遍历的item值
不设this,返回值设为item,遍历少了一次,因为第一次遍历的pre为上一次遍历为数组的第一个数组项。第一次遍历的返回值item=1为第二次遍历的pre值,第一次遍历的pre没有初始值和上一次遍历,所以少了。
-----------------------------reduce( )笔试题-----------------------------
题目:
要求:
JavaScript编写:
使用一次array的reduce方法:
给定一个数组:
var a=[1,2,3,4,5,6,7.........]
请写一个函数可以返回一个数组,形式如下:
var b=[[1,2,3,4,5],[6,7,8,9,10]....]
即5个一组分割成数组再组成一个更大的数组,最后一个数组如果不足5个,实际剩几个就包含几个,但不得为空。
1)slice( )