web开发程序员让前端飞

JavaScript内置对象--Array

2018-01-03  本文已影响28人  我可能是个假开发

JavaScript内置对象--Array

一、数组的创建

创建数组的基本方式有两种:
1、使用 Array构造函数
语法:new Array()
小括号( )说明:
(1)预先知道数组要保存的项目数量
(2)向Array构造函数中传递数组应包含的项

2、使用数组字面量表示法
由一对包含数组项的方括号[ ]表示,多个数组项之间以逗号隔开。

<script>
    var colors=new Array(3);
    console.log(colors);//[]
    
    var nums=new Array(1,3,6,9);
    console.log(nums);//[1,3,6,9]
    
    
    var cols=["red","yellow","green"];
    console.log(cols);//["red","yellow","green"]
    
    var infos=[6,"marry",true,{email:"marry@sohu.com"}];//数组中的每个值对类型没有限制
    console.log(infos);//[6,"marry",true,Object]
</script>

二、数组元素的读和写

读取和设置值时,使用方括号[ ]并提供相应的索引
说明:索引是从0开始的正整数

var cols=["red","yellow","green"];
console.log(cols[1]);//yellow
console.log(cols[5]);//undefined

var colors=new Array(3);
colors[0]="#f00";
colors[1]="#0f0";
colors[2]="#00f";
console.log(colors);//["#f00","#0f0","00f"]

三、数组的length属性

语法:array.length
功能:获取数组array的长度
返回值:number

说明:
1、通过设置length可以从数组的末尾移除项或向数组中添加新项。
2、当把一个值放在超出当前数组大小的位置上时,数组就会重新计算其长度值,长度值等于最后一项的索引加1。

var arr=["a","b","c","d"];
console.log(arr.length);//4

arr.length=3;//把arr这个数组的长度设为3
console.log(arr);//["a","b","c"]
console.log(arr[3]);//undefined


var arr1=["a","b","c","d"];
arr1[99]="z";//给数组的第100项赋值
console.log(arr1.length);//100  根据最后的索引确定

数组的遍历:

var arr=["a","b","c","d"];
for(var i=0;i<arr.length;i++){
    console.log(i);//0 1 2 3 
    console.log(arr[i]);//a b c d
}

四、数组的方法

1.栈方法
①push()
语法:arrayObject.push(newele1,newele2,....,neweX)
功能:把它的参数顺序添加到 arrayObject 的尾部。
返回值:把指定的值添加到数组后的新长度。

<script>
    var colors=new Array("red","green");
    colors.push("blue");
    console.log(colors);//Array[3]:0:"red" 1:"green" 2:"blue"
    
    colors.push("bule","yellow","black");
    console.log(colors);//["red","green","bule","yellow","black"]
    
    var len = colors.push("bule","yellow","black");
    console.log(len);//5
</script>

②unshift()
语法:arrayObject.unshift(newele1,newele2,....,neweX)
功能:把它的参数顺序添加到 arrayObject 的开头。
返回值:把指定的值添加到数组后的新长度。

var nums=[2,7,8,6];
var size=nums.unshift(99,66);
console.log(nums);//[99,66,2,7,8,6]

③pop()
语法:arrayObject.pop()
功能:删除 arrayObject 的最后一个元素
返回值:被删除的那个元素

var nums=[2,7,8,6];
var n=nums.pop();
console.log(n);//6
console.log(nums);//[2,7,8]

④shift()
语法:arrayObject.shift()
功能:删除 arrayObject中的第一个元素
返回值:被删除的那个元素

var colors=new Array("red","green","bule","yellow","black");
var m=colors.shift();
console.log(m);//red
console.log(colors);//["green","bule","yellow","black"]

2.转换方法
①join()
语法:arrayObject.join(separator)
功能:用于把数组中的所有元素放入一个字符串。(把数组转化为字符串)
返回值:字符串。

var nums=[2,4,5];
var str=nums.join();
console.log(typeof(str));//string
console.log(str);//2,4,5 默认用,隔开

var words=["border","left","color"];
//希望转为border-left-color
var wordstr=words.join("");
console.log(wordstr);//borderleftcolor

var wordstr1=words.join("-");
console.log(wordstr1);//border-left-color

3.重排序方法
①reverse()
语法:stringObject.reverse()
功能:用于颠倒数组中元素的顺序。
返回值:数组

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

var strs=["a","b","c","d"];
//返回dcba这个字符串
var newstr=strs.reverse().join("");
console.log(newstr);//dcba

②sort()
语法:arrayObject.sort(sortby)
功能:用于对数组的元素进行排序。
返回值:数组。

说明:
1、即使数组中的每一项都是数值,sort()方法比较的也是字符串。
2、sort()方法可以接收一个比较函数作为参数。

var words=["border","left","color"];
console.log(words.sort());//["border","color","left"] 按字母顺序

var arr=[9,23,15,88,12];
console.log(arr.sort());
//[12,15,23,88,9] 会先转为字符串,再按照第一个数字顺序排序

//降序,return 参数1<参数2
arr.sort(function(a,b){return a<b});
console.log(arr);//[88,23,15,12,9]

//升序 return 参数1>参数2
arr.sort(function(a,b){return a>b});
console.log(arr);//[9,12,15,23,88]

4.操作方法
①concat()
语法:arrayObject.concat(arrayX,arrayX,......,arrayX)
功能:用于连接两个或多个数组。
返回值:数组。

var arr1=["a","b","c"],
    arr2=["d","e",1,3],
    arr3;
arr3=arr1.concat(arr2);
console.log(arr3);//["a","b","c","d","e",1,3]

arr4=arr1.concat(arr2,["m",99,8]);
console.log(arr4);//["a","b","c","d","e",1,3,"m",99,8]

②slice()
语法:arrayObject.slice(start,end)
功能:从已有的数组中返回选定的元素。
参数:
start (必需)规定从何处开始选取,如果是负数,那么它规定从数组尾部开始算起的位置。
end(可选)规定从何处结束选取,该参数是数组片断结束处的数组下标。
返回值:数组

说明:
1、如果没有指定end,那么切分的数组包含从 start 到数组结束的所有元素。
2、如果slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置。

var colors=["red","green","blue","yellow","orange"];
var newColors=colors.slice(1);
console.log(newColors);//["green","blue","yellow","orange"]

var newColors1=colors.slice(1,3);
console.log(newColors1);//["green","blue"]

var newColors2=colors.slice(-2,4);  //3,4用数组长度加上负数
console.log(newColors2);//["yellow"]

完成以下代码段,实现b数组对a数组的拷贝,方法越多越好

var a=[1,"yes",3],
    b;
//1.数组遍历,push
b=new Array();
for(var i=0;i<a.length;i++){
    b.push(a[i])
}
console.log(b);

//2.concat()
b=[].concat(a);
console.log(b);

//3.slice()
b=a.slice(0);
console.log(b);

③splice()删除
语法:arrayObject.splice(index,count)
功能:删除从 index 处开始的零个或多个元素。
返回值:含有被删除的元素的数组。

说明:
count是要删除的项目数量,如果设置为 0,则不会删除项目。
如果不设置,则删除从index开始的所有值。

var arr=["a","b","c","d","e","f"];
var delArr=arr.splice(2,2);
console.log(arr);//["a","b","e","f"]
console.log(delArr);//["c","d"]

var delArr=arr.splice(2);
console.log(arr);//["a","b"]
console.log(delArr);//["c","d","e","f"]

var delArr=arr.splice(2,0);
console.log(arr);//["a","b","c","d","e","f"]
console.log(delArr);//[]

④splice()插入
语法:arrayObject.splice(index,0,item1,.....,itemX)
功能:在指定位置插入值
参数:
Index:起始位置
0:要删除的项数
item1…itemX:要插入的项
返回值:数组

var arr=["a","b","c","d","e","f"];
var insertArr=arr.splice(3,0,"m","n");
console.log(arr);//["a","b","c","m","n","d","e","f"]
console.log(insertArr);//[] 插入操作时返回空

⑤splice()替换
语法:arrayObject.splice(index,count,item1,.....,itemX)
功能:在指定位置插入值,且同时删除任意数量的项
参数:
Index:起始位置
count:要删除的项数
item1…itemX:要插入的项
返回值:从原始数组中删除的项(如果没有删除任何项,则返回空数组)

var arr=["a","b","c","d","e","f"];
var replaceArr=arr.splice(1,2,"x","y","z"); //从索引为1的 删除2个 再插入"x","y","z"
console.log(arr); //["a","x","y","z","d","e","f"]
console.log(replaceArr);//["b","c"]

5.添加方法
①indexOf()
语法:arrayObject.indexOf(searchvalue,startIndex)
功能:从数组的开头(位置0)开始向后查找。
参数:
searchvalue:必需,要查找的项;
startIndex:可选,起点位置的索引。
返回值:number,查找的项在数组中的位置,没有找到的情况下返回-1。

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.indexOf(7);
console.log(pos);//1

var pos=nums.indexOf(99);
console.log(pos);//-1

var pos=nums.indexOf(7,3);//从索引为3开始检测7的位置
console.log(pos);//3

var pos=nums.indexOf("7");
console.log(pos);//-1

②lastIndexOf()
语法:arrayObject.lastIndexOf(searchvalue,startIndex)
功能:从数组的末尾开始向前查找。
参数:
searchvalue:必需,要查找的项;
startIndex:可选,起点位置的索引。
返回值:number,查找的项在数组中的位置,没有找到的情况下返回-1。

var nums=[1,7,5,7,8,1,6,9];
var pos=nums.lastIndexOf(1);
console.log(pos);//5


//封装一个方法实现indexOf的功能
function arrayIndexOf(arr,value){
    //检测value在arr中出现的位置
    for(var i=0;i<arr.length;i++){
        if(arr[i]===value){
            return i;
        }
    }
    return -1;
}
var pos2=arrayIndexOf(nums,8);
console.log(pos2);//4

说明
1、在比较第一个参数与数组中的每一项时,会使用全等操作符,即要求查找的项必须严格相等。
2、数组的位置方法是ECMAScript5为数组实例新增的,所以支持的浏览器只有:IE9+、Firefox2+、Safari3+、Opera9.5和Chrome

上一篇下一篇

猜你喜欢

热点阅读