让代码更简单

当前位置:代码狗 > 经验教程 > 网友经验 > 正文

JavaScript数组详解与14种操作方法

所谓数组,就是有序的元素序列。各种编程语言中都免不了与数组打交道,那么大家知道JavaScript中数组的用法吗?知道JavaScript中数组是如何声明的吗?知道JavaScript数组是如何初始化的吗?

JavaScript数组声明

  1. var 数组的名称=new Array();
  2. var 数组的名称=[];

JavaScript数组初始化

  1. var 数组的名称=new Array(‘值1’,值2,‘值3’,…)//js 是一种弱类型的脚本语言索引可以存储不同的数据类型.
  2. var 数组的名称=[值1,值2,值3,…]
  3. var 数组的名称=new Array()

下面是一个数组声明初始化获取值的简单例子。

<script type="text/javascript">
var arr=new Array('Hello','InLett',100,true,34.23);
// 根据索引获取值
alert(arr[1]);//输出结果InLett
</script>

14中数组操作方法

  1. join():将数组成员通过一个分割符合并成字符串
    例:

    <script type="text/javascript">
    var arr=[12,23,1,0,23,45];
    var str=['L','O','V','E'];
    // alert(str.join('-'));//输出结果为L-O-V-E
    alert(arr.join('*')); //输出结果为12*23*1*0*23*45
    </script>

    效果如下图所示:

    JavaScript数组详解与14种操作方法

    JavaScript数组详解与14种操作方法

  2. push()和pop(): 在数组的最后添加或是删除成员
    <script type="text/javascript">
    var arr1=['html','JavaScript','css'];
    var num= arr1.push('jQuery'); 
    alert(arr1);
    </script>
    <script type="text/javascript">
    var arr1=['html','JavaScript','css'];
    arr1.pop();
    alert(arr1);
    </script>
  3. unshift()和shift(): 在数组的最前面添加或是删除成员
    <script type="text/javascript">
    var arr1=['html','JavaScript','css'];
    arr1.unshift('jQuery');
    alert(arr1);
    </script>
    <script type="text/javascript"> 
    var arr1=['html','JavaScript','css']; 
    arr1.shift(); 
    alert(arr1); 
    </script>
  4. reverse(): 表示为将数组的数据进行翻转
    <script type="text/javascript"> 
    var num1=[1,2,3,4,5,6];
    num1.reverse(); 
    alert(num1); 
    </script>
  5. indexOf()和lastIndexOf:这两个方法都是用来搜索整个数组中具有给定值的元素,返回找到的第一个元素的索引,如果没找到,则返回-1.
    indexOf表示返回数组中元素第一次出现的索引值,
    lastIndexOf则是反向搜索.

    <script type="text/javascript"> 
    var num2=[1,2,13,1,2,2]; 
    var index= num2.indexOf(2);//返回第一次出现2的索引 
    alert(index);//输出结果为1 
    </script>

    第一个值表示要查询的数据;第二个值表示起始要查询的索引;查询不到返回-1

    <script type="text/javascript">
    var num2=[1,2,13,1,2,2];
    var index= num2.indexOf(2,3);
    //var index=num2.indexOf(2,6); //查询不到返回-1
    alert(index);//输出结果为4
    </script>
  6. splice():在数组中添加成员
    <script type="text/javascript">
    var num4=[1,2,3,4,5,6];
    num4.splice(1,2,7,8,9);//第一个值1表示要开始添加成员的索引位置;第二个值2表示删除2两个成员(包含自身);第三个值7,8,9 表示 在此位置上添加 7,8,9
    alert(index);//输出结果为1789456
    </script>
  7. slice():从一个数组中选择(截取)元素
    第一个值表示开始截取的位置索引;第二个值表示截取结束位置的索引,但是并不包含结束位置索引所对应的成员

    <script type="text/javascript">
    var num5=[2,3,4,5,6,7];
    var num6= num5.slice(2,4);
    alert(num6);//输出结果为4,5
    </script>
  8. sort():返回排序后的数组.如果数组包含undefined,会被排序到数组的尾部.如果不带参数的用sort(),数组元素以字母表顺序排序.
    <script type="text/javascript">
    var a=[2,33,1111,444];
    a.sort();
    alert(a);
    </script>
    <script type="text/javascript">
    var a=['a','c','g','j','r','e','d','q','z','u'];
    a.sort();
    alert(a);
    </script>
    <script type="text/javascript">
    var c=['a','abc','def','b','zyujg','jgi','j',1,222,777,55,44,66,8888,99];
    c.sort();
    alert(c);
    </script>

    如果是数字从小到大排序:

    <script type="text/javascript">
    var a=[2,33,1111,444]
    a.sort(function(a,b){
    return a-b
    })
    alert(a);
    </script>
  9. concat():创建并返回一个新的数组
    <script type="text/javascript">
    var a = [1,2,3]; 
    var b = a.concat(4,5); 
    var c = a.concat([4,5]); 
    console.log(a); //返回的还是1,2,3
    console.log(b); //返回1,2,3,4,5
    console.log(c); //返回1,2,3,4,5
    </script>

    这个方法还可以用来复制数组。

    <script type="text/javascript">
    var a = [1,2,3]; 
    var b = a.concat(); 
    console.log(a); //返回1,2,3
    console.log(b); //返回1,2,3
    </script>
  10. toString()和toLocaleString()toString()方法将每个元素转化为字符串,类似于不传参的join()方法.

    toLocaleString()方法是toString()的本地化版本.

  11. forEach()方法,从头至尾遍历数组,为每个元素调用指定的函数.
    <script type="text/javascript">
    var a = [1,2,3,4,5]; 
    var sum = 0; 
    a.forEach(function (value) {
    sum += value
    }) 
    console.log(sum); //sum = 15
    </script>
  12. map()方法:
    和forEach()类似,调用数组的每个元素传递给指定函数,并返回一个数组,所以它和forEach()的区别在于,有一个返回值.不修改原数组,返回的数组长度和原数组相同.

    <script type="text/javascript">
    var a = [1,2,3,4,5]; 
    var b = a.map(function (value) {
    return value+1
    }) 
    console.log(b); //返回2,3,4,5,6
    </script>
  13. filter()方法,返回的是调用数组的一个子集。
    <script type="text/javascript">
    var a = [1,2,3,4,5]; 
    var b = a.filter(function (value) {
    return value > 3
    }) 
    console.log(b); //返回4,5
    </script>

    注:如果使用map()方法,返回的是false, false, false, true, true
    filter()会跳过稀疏数组中缺少的元素,他的返回数组总是稠密的.所以可以用一下方法来压缩稀疏数组的空缺.
    例:

    <script type="text/javascript">
    var a = [1,2,,,5]; 
    var b = a.filter(function (value) {
    return true
    }) 
    console.log(b); //返回1,2,5
    </script>
  14. every()和some()
    every()方法是只有数组中所以元素都满足某个条件才会返回true;some()方法是只要有满足条件的值,就返回true。
    以every()方法为例:

    <script type="text/javascript">
    var a = [1,2,3,4,5];
    var b=a.every(function (value) {
    return value < 10
    })
    var c=a.every(function (value) {
    return value % 2 === 0
    }) 
    alert(b); //true
    alert(c)//false
    </script>

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝