javascript Array学习与使用

标签：javascript   array   

一．Javascript数组是无类型的；数组元素可以任意类型，并且同一个数组中的不同元素也可能有不同的类型，javascript数组是动态的，会根据需要增长或者缩减，每一个数组都有一个length属性。它不是只读的，可以通过设置这个属性值，从数组的末尾移除项，或者添加新项

二．创建数组

（1）数组字面量表示方法：

         Var colors=[true,1,”green”]; //创建包含3个字符串的数组。

         Var arr=[];//创建一个空数组

         Var b=[1,{x:1,y:2},[2,{x:3,y:4}]];//创建包含对象直接量或其他数组直接量

   （2）调用构造函数Array()，new 操作符可以省略:

         Var a=new Array(); 等同于Var arr=[];//创建一个空数组

         Var b=new Array(10);//创建指定长度的数组

         Var c=new Array(“red”);//创建一个包含1项，及字符串“red”的数组。

三.数组元素的读写

     在读取和设置数组值时，使用方括号，方括号中是一个非负整数值的任意表达式，

       Var colors=[“red”,”blue”,”green”];//定义一个字符串数组

       alert(colors[0]);//读取第一项的值

       colors[2]=”black”;//修改第三项

       colors[3]=”brown”;//新增第四项

       Alert(colors.length);//4,数组的长度值，等于最后一项的索引加1

四．数组元素的检测

     Array.isArray()方法，检测某个值是不是数组，而不管它是在哪个全局执行环境中创建的。If(Array.isArray(value)){//对数组执行某些操作}

五．数组方法：

     （1）Array.join();将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串。

 <script>

var a=[1,2,3,4];

document.body.innerHTML=‘<b>‘+a.join()+‘</b>‘+‘</br>‘;//1,2,3,4

document.write(‘<b>‘+typeof(a.join(‘ ‘))+‘</b>‘+‘</br>‘);//string

document.write(‘<b>‘+a.join(‘ ‘)+‘</b>‘+‘</br>‘);//1 2 3 4

document.write(‘<b>‘+a.join(‘-‘)+‘</b>‘);//1-2-3-4

</script>

   （2）Array.reverse(),将数组中的元素颠倒顺序，返回逆序的数组

         var a=[1,2,3,4];

         document.write(‘<b>‘+a.reverse().join("*")+‘</b>‘);//4*3*2*1

 （3）Array.sort(),默认没有参数时将数组元素按照字母表顺序进行排序，要是按照某一规定进行排序，则必须传递一个比较函数

        var b=["22","555","44","1"];

document.write(‘<b>‘+b.sort()+‘</b>‘+‘</br>‘);//1,22,44,555

var c=["2","555","44","11"];

document.write(‘<b>‘+c.sort(function(a,b){ return a-b})+‘</b>‘+‘</br>‘);//2,11,44,555

 （3）Array.concat(),创建并返回一个新数组。，它的元素包括调用contact()的原始数组的元素和concat()的每个参数。

        var d=["2","5","4","1"];

document.write(‘<b>‘+d.concat(6,8)+‘</b>‘+‘</br>‘);//2,5,4,1,6,8

（4）Array.splice()方法，返回数组的一个片段或者子数组，它的两个参数分别指定了片段的开始与结束，返回的数组包含第一个参数指定的位置和所有到不含第二参数指定的位置之间的所有数组元素，只有一个参数时，返回从这个参数开始到数组结尾的的所有元素。

         var e=["2","5","4","1"];

document.write(‘<b>‘+e.splice(1,3)+‘</b>‘+‘</br>‘);//5,4,1

var f=["2","5","4","1"];

document.write(‘<b>‘+f.splice(2)+‘</b>‘+‘</br>‘+‘<hr>‘);//4,1

（5）栈方法

     Push()方法可以接收任意数量的参数，将他们逐个添加到数组的末尾，并返回修改数组的新长度，而pop()方法，则是相反的，从数组末尾移除最后一项，减少数组的长度，最后返回移除的项。

     var g=["red","yellow","blue"];

document.write(‘<b>‘+"修改后数组的新长度为："+g.push("green","pink")+‘</b>‘+‘</br>‘);

  //修改后数组的新长度为：5

document.write(‘<b>‘+"删除的数组值为："+g.pop()+‘</b>‘+‘</br>‘+‘<hr>‘);//删除的数组值为：pink

（6）类似队列的方法

      Shift(),能够移除数组中的一个项，并返回该项，然后把所有随后的元素下移一个位置来填补数组头部的空缺，同时将数组长度减1；unshift(),在数组的前端添加任意个项并将已存在的元素移动到更高索引的位置来获得足够的空间，最后返回新数组的长度。

     var e=["red","yellow","blue"];

document.write(‘<b>‘+"删除的数组的一个元素是："+e.shift()+‘</b>‘+‘</br>‘);//删除的数组的一个元素是：red

document.write(‘<b>‘+"数组前端添加元素后，数组的长度："+e.unshift("red","black")+‘</b>‘+‘</br>‘+‘<hr>‘);//数组前端添加元素后，数组的长度：4

 （7）转换方法

        所有对象都具有toLocaleString(),toString(),valueOf(),

       调用数组的toString() 方法会返回由数组中每个值的字符串形式拼接而成的字符串，该字符串是以逗号分隔的字符串。与join()方法没有参数时，返回的字符串一样效果。

      调用数组的valueOf() 方法，返回的还是数组。

      调用数组的toLocaleString()，把数组转换为本地字符串

        var f=["red","yellow","blue"];

document.write(‘<b>‘+"本身的类型为："+typeof(f)+‘</b>‘+‘</br>‘);

         //本身的类型为：object

document.write(‘<b>‘+f.toString()+‘</b>‘+‘</br>‘);//red,yellow,blue

document.write(‘<b>‘+"使用toString后的类型变为："+typeof(f.toString())+‘</b>‘+‘</br>‘);//使用toString后的类型变为：string

document.write(‘<b>‘+f.valueOf()+‘</b>‘+‘</br>‘);//red,yellow,blue

document.write(‘<b>‘+"使用valueOf()后的类型变为："+typeof(f.valueOf())+‘</b>‘+‘</br>‘+‘<hr>‘);//使用valueOf()后的类型变为：object

 （7）位置方法

      ES5为数组添加了两个位置方法：indexOf(),lastIndexOf(),用来搜索整个数组中具有给定值的元素，返回找到的第一个元素的索引或者如果没有找到就返回-1，接收两个参数，第一个参数为要查找的项，第二个参数为可选的，表示查找起点位置的索引，indexOf()方法从数组的开头向后查找，lastIndexOf()则从数组末尾开始向前查找。

    var h=["red","yellow","blue","red"];

document.write(‘<b>‘+"red所在数组的位置是："+h.indexOf("red")+‘</b>‘+‘</br>‘);

       //red所在数组的位置是：0

document.write(‘<b>‘+"从1的位置开始找blue所在数组的位置是："+h.indexOf("blue",1)+‘</b>‘+‘</br>‘);//从1的位置开始找blue所在数组的位置是：2

document.write(‘<b>‘+"使用，lastindexOf(),red所在数组的位置是："+h.lastIndexOf("red")+‘</b>‘+‘</br>‘+‘<hr>‘);//使用，lastindexOf(),red所在数组的位置是：3

（8）迭代方法

      ES5为数组定义了5个迭代方法，每个方法都接收两个参数，一个参数是要在每一项上运行的函数，第二个参数是可选的，运行函数的作用域对象。而对于第一个参数，这个函数会接收三个参数，数组项的值，该项在数组中的位置，和数组对象本身。

1）forEach()从头到尾遍历数组，为每个元素调用指定的函数，该方法没有返回值，而且必须得所有元素都传递给调用的函数之后才能终止遍历，也就是说没有break语句随时退出这个循环，要是真要提前终止，必须把forEach()方法放在一个try块中。

  var data=[1,2,3,4,5];

var sum=0;

data.forEach(function(value){sum+=value;});

document.write(‘<b>‘+"sum的值为："+sum+‘</b>‘+‘</br>‘);//sum的值为：15

data.forEach(function(v,i,data){data[i]=v+3;});

document.write(‘<b>‘+"data中的值为："+data+‘</b>‘+‘</br>‘+‘<hr>‘);

        //data中的值为：4,5,6,7,8

      2)map(),对数组中的每一项运行给定函数，返回每次函数调用的结果组成数组，map()返回的是新数组，它不修改调用的数组。

       var data2=[1,2,3,4,5];

var sum=0;

data=data2.map(function(x){return sum+=x});

document.write(‘<b>‘+"原来数组："+data2+‘</b>‘+‘</br>‘);//原来数组：1,2,3,4,5

document.write(‘<b>‘+"sum的值："+sum+‘</b>‘+‘</br>‘);//原来数组：15

document.write(‘<b>‘+"新数组中的值为："+data+‘</b>‘+‘</br>‘+‘<hr>‘);//新数组中的值为：1,3,6,10,15

  3)filter()对数组中的每一项运行给定的函数，该函数是用来逻辑判定的，返回true，或者false，返回的数组元素是函数会返回true的项组成数组的一个子集，压缩空缺并删除undefined和null元素，可以使用filter()

    var data3=[1,2,3,4,5];

data33=data3.filter(function(x){return x<3;});

document.write(‘<b>‘+"新数组中的值为："+data33+‘</b>‘+‘</br>‘);//新数组中的值为：1,2

data333=data3.filter(function(x){return x%2==0;});

document.write(‘<b>‘+"新数组中的值为："+data333+‘</b>‘+‘</br>‘+‘<hr>‘);//新数组中的值为：2,4

  4)every()和some(),是数组的逻辑判定，对数组中的每一项运行给定的函数，对于every(),只有数组中的每一个元素都满足函数，才返回true,而some()就只要求，有满足的的项，就返回true,就类似于数学中的与/或的逻辑表达式求值

      var data4=[1,2,3,4,5];

data44=data4.every(function(x){return x<3;});

document.write(‘<b>‘+"使用every()的返回值："+data44+‘</b>‘+‘</br>‘);//使用every()的返回值：false

data444=data4.some(function(x){return  x<3});

document.write(‘<b>‘+"使用some()的返回值："+data444+‘</b>‘+‘</br>‘+‘<hr>‘);//使用some()的返回值：true

（9）归并方法

     也是ES5新增的数组方法，用指定的函数，将数组元素进行合并

     1)reduce()，从数组的第一项开始，逐个遍历到最后

     2)reduceRight()，从数组的最后一项开始，向前遍历的第一项

   这两个方法都接收两个参数，一个在每一项上调用的函数和（可选的）作为归并基础的初始值，传给reduce()和reduceRight()的函数接收4个参数：前一个值，当前值，项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项，第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

    var data5=[1,2,3,4,5];

var sum=data5.reduce(function(x,y){return x+y},0);

document.write(‘<b>‘+"sum的值："+sum+‘</b>‘+‘</br>‘);//sum的值：15

var sum1=data5.reduce(function(x,y,index,data5){return x+y});

document.write(‘<b>‘+"sum1的值："+sum1+‘</b>‘+‘</br>‘);//sum1的值：15

var sum2=data5.reduce(function(x,y,index,data5){return x*y},2);

document.write(‘<b>‘+"sum1的值："+sum2+‘</b>‘+‘</br>‘);//sum2的值：240

本文出自 “梦想需要坚持” 博客，请务必保留此出处http://xiyin001.blog.51cto.com/9831864/1761195

javascript Array学习与使用

标签：javascript   array   

原文地址：http://xiyin001.blog.51cto.com/9831864/1761195