美文网首页JavaScript基础精炼
JS基础精炼之Array方法精炼

JS基础精炼之Array方法精炼

作者: 查查查查查查克 | 来源:发表于2016-07-25 16:32 被阅读66次
    • 创建:
    var colors1 = new Array('blue','red');    //构造函数形式
    var colors2 = ['blue','red'];    //数组字面量形式
    
    • Array.isArray():检测数组
    if(Array.isArray(arr)){
        //
    }
    
    • 数组的toString()
    var arr = ['green','blue','red'];
    console.log(arr.toString());    //'green,blue,red'(返回以逗号间隔的字符串)
    
    • 数组的valueOf()
    var arr = ['green','blue','red'];
    console.log(arr.valueOf());    //['green','blue','red'];(返回原数组)
    
    • push()
    var colors = ['blue'];
    console.log(colors.push('green','red'));    //3(返回推入后数组的长度)
    console.log(colors)    //['blue','green','red'](将元素推入数组末端)
    
    • pop()
    var colors = ['blue','green','red'];
    console.log(colors.pop());    //'red'(返回弹出的那个元素)
    console.log(colors)    //['blue','green'](从数组末端弹出一个元素)
    
    • unshift()
    var colors = ['red'];
    console.log(colors.unshift('blue','green'));    //3(返回推入后数组的长度)
    console.log(colors);    //['blue','green','red'](将元素整体推入数组前端)
    
    • shift()
    var colors = ['blue','green','red'];
    console.log(colors.shift());    //'blue'(返回弹出的那个元素)
    console.log(colors);    //['green','red'](从数组前端弹出一个元素)
    
    • reverse()
    var values = [1,2,3,4,5];
    console.log(values.reverse());    //[5,4,3,2,1](反转数组元素顺序)
    
    • sort()
    var values = [1,3,15,8];
    console.log(values.sort());    //[1,15,3,8](对每项调用toString()后升序排列)
    
    function compare(value1,value2){    //(自定义一个比较函数)
      if(value1 < value2){
          return -1;
      } else if(value1 > value2){
          return 1;
      } else{
          return 0;
      }
    }
    var values = [1,3,15,8];
    console.log(values.sort(compare));    //[1,3,8,15](按比较函数的规则进行了排序)
    

    比较函数接收两个参数,如果第一个参数应该位于第二个之前则返回一个负数,如果两个参数相等 则返回 0,如果第一个参数应该位于第二个之后则返回一个正数。——《JavaScript高级程序设计(第3版)》

    • concat():增量复制
    var colors = ['blue','red','gray'];
    var colors2 = colors.concat();
    console.log(colors2);    //['blue','red','gray'](colors2是colors的一个副本)
    console.log(colors);    //['blue','red','gray'](原数组不变)
    
    var colors = ['blue','red','gray'];
    var colors2 = colors.concat({});
    console.log(colors2);    //['blue','red','gray',Object](colors2复制了colors之后并入参数值。如果参数值是一或多个数组,逐一将数组元素并入;如果不是数组,则直接并入)
    console.log(colors);    //['blue','red','gray'](原数组不变)
    
    • slice():截取复制
    var  colors = ['red','orange','yellow','green','blue','indigo','purple'];
    var colors2 = colors.slice(4);
    console.log(colors2);    //['blue','indigo','purple'](从索引4处截取到最后)
    console.log(colors);    //['red','orange','yellow','green','blue','indigo','purple'](原数组不变)
    
    var  colors = ['red','orange','yellow','green','blue','indigo','purple'];
    var colors2 = colors.slice(4,6); 
    console.log(colors2);    //['blue','indigo'](从索引4处截取到索引6,不包括6)
    console.log(colors);    //['red','orange','yellow','green','blue','indigo','purple'](原数组不变)
    
    • splice():删除与插入
      arr.splice(startIndex,deleteCount,insertValue1,insertValue2,***);
    var colors = ['red','green','blue'];
    var resultColors = colors.splice(1,2);    //从索引1处开始删除2个元素
    console.log(resultColors);    //['green','blue'](返回一个被删除元素组成的数组)
    console.log(colors);    //['red'](原数组改变)
    
    var colors = ['red','green','blue'];
    var resultColors = colors.splice(1,0,'black','white');    //从索引1处删除0个元素并插入元素
    console.log(resultColors);    //[](空数组,因为没有元素被删除)
    console.log(colors);    //['red','black','white','green','blue']
    
    • indexOf() 、 lastIndexOf():查找元素位置
      arr.indexOf(value, startIndex)
    var arr = [1,4,5,8,3,5,6];
    console.log(arr.indexOf(7));    //-1(找不到则返回-1)
    
    var arr = [1,4,5,8,3,5,6];
    console.log(arr.indexOf(5));    //2(第一次找到的位置)
    
    var arr = [1,4,5,8,3,5,6];
    console.log(arr.indexOf(5, 3));    //5(从索引3的位置开始查找元素5的位置)
    
    var arr = [1,4,5,8,3,5,6];
    console.log(arr.lastIndexOf(5));    //5(从末端往前查找元素5的位置)
    
    • every()
      迭代方法。对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则返回 true。
    var arr = [1,2,3,4,5];
    var everyResult = arr.every(function(item, index, array){
        return item > 0;
    });
    console.log(everyResult);    //true
    
    • some()
      迭代方法。对数组中的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。
    var arr = [1,2,3,4,5];
    var someResult = arr.some(function(item, index, array){
        return item > 5;
    });
    console.log(someResult);    //false
    
    • filter()
      迭代方法。对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。
    var arr = [1,2,3,4,5];
    var filterResult = arr.filter(function(item, index, array){
        return item > 3;
    });
    console.log(filterResult);    //[4,5]
    
    • map()
      迭代方法。对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
    var arr = [1,2,3,4,5];
    var mapResult = arr.map(function(item, index, array){
        return item * 2;
    });
    console.log(mapResult);    //[2,4,6,8,10]
    
    • forEach()
      迭代方法。对数组中的每一项运行给定函数。没有返回值。
    var arr = [1,2,3,4,5];
    arr.forEach(function(item, index, array){
        //do something
    });
    
    • reduce() 、 reduceRight()
      归并方法。迭代数组的所有项,然后构建一个最终返回的值。
    var values = [1,2,3,4,5];
    var sum = values.reduce(fucntion(prev, cur, index, array){
        return prev + cur;
    });
    console.log(sum);    //15(第一次:1+2=3;第二次:3+3=6;第三次:6+4=10;第四次:10+5=15)
    

    相关文章

      网友评论

        本文标题:JS基础精炼之Array方法精炼

        本文链接:https://www.haomeiwen.com/subject/wxuijttx.html