JavaScript算法练习:Slasher Flick

Slasher Flick

Return the remaining elements of an array after chopping off n elements from the head. The head meaning the beginning of the array, or the zeroth index

简单点说就是对所给的数组做截取操作。看上去就是对数组做数组元素的删除,可能你会想到数组中的shift()方法,可是这个方法只能删除数组的第一个元素。而我们要实现的功能是:对所给数组,根据第二个参数进行截取操作,如果第二个参数大于数组的长度,则返回一个空数组,否则将返回第二个参数作为索引值之后的所有元素组成的数组。

在JavaScript中这样来实现。创建一个slasher()函数,并且给这个函数传递两个参数arrhowMany。然后返回截取后的数组:

function slasher(arr, howMany) {
    // 这里添加处理方法

    return arr;
}

实现思路

根据前面所说的,实现slasher()的思路:

  • 如果howMany等于0,返回原数组arr
  • 如果howMany大于等于arr.length,使用数组的方法将arr内的所有项目删除,将返回一个空数组[]
  • 其他情况,从arr中删除从第一个元素算起到howMany指的元素,返回一个新数组

实现这些功能,可以使用数组中的shift()slice()splice()方法。简单回忆一下:

比如:

var arr = [1,2,3,4,5,6,7,8,9];
console.log(arr.shift()); // 1
console.log(arr.slice(0,3)); // [1, 2, 3]
console.log(arr.splice(0,3)); // [1, 2, 3]

实现方案

文章开头也提到过了,实现slasher()函数功能,通过数组的shift()slice()splice()方法都可以实现。接下来,看看这几种方法是如何实现的。

方法1: shift()

数组shift()方法删除数组的第一个元素,其实这个离我们需要的删除数组howMany个元素,相距甚远。似乎无法实现一样,其实不然,配合for循环就能达到我们需要的功能:

function slasher(arr, howMany) {
    for (var i= 0; i < howMany; i++){
        arr.shift();
        // arr = [1,2,3,4,5,6,7,8,9] howMany=3
        // 遍历次数 i=? i<howMany  i++  arr.shift()  arr
        // 1st     0    yes        1    1          [2,3,4,5,6,7,8,9]
        // 2nd     1    yes        2    2          [3,4,5,6,7,8,9]
        // 3rd     2    yes        3    3          [4,5,6,7,8,9]
        // 4th     3    no
    }
    return arr;
}

slasher([1,2,3,4,5,6,7,8,9],3);  // [4, 5, 6, 7, 8, 9]
slasher([1,2,3,4,5,6,7,8,9],0);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]
slasher([1,2,3,4,5,6,7,8,9],10); // []

方法2:slice()

slice()方法可以截取数组中的一部分元素,并且将这些元素存入到一个新的数组对象中。并且返回这个新数组。如此一来,在slasher()函数中,可以这样做:

  • 如果howMany等于0,将返回原数组arr
  • 如果howMany大于等于arr.lengtharr.slice(arr.length)arr中取不到元素,将返回一个空数组[]
  • 其他情况,arr.slice()arr内的元素第-arr.length + howMany算起到数组最后一个元素截取,并返回

那么slasher()函数就可以这样写:

function slasher(arr, howMany) {
    var len = arr.length;
    if (howMany === 0) {
        return arr;
    } else if (howMany >= len) {
        return arr.slice(len);
    } else {
        return arr.slice(-len + howMany);
    }
}

slasher([1,2,3,4,5,6,7,8,9],0);  //[1, 2, 3, 4, 5, 6, 7, 8, 9]
slasher([1,2,3,4,5,6,7,8,9],10); // []
slasher([1,2,3,4,5,6,7,8,9],4);  //[5, 6, 7, 8, 9]

方法3: splice()

splice()方法可以指定从数组中第几个元素开始删除多少个元素,然后返回这个修改后的数组。即:

  • 如果howMany等于0,将返回原数组arr
  • 如果howMany大于等于arr.length,使用Array.splice()arr內的所有元素刪除,将返回一个空数组[]
  • 其他情況,使用Array.splice()arr內的元素从第一个元素算起到howMany指定的元素,并且返回修改后的数组

代码如下:

function slasher (arr, howMany) {
    var len =  arr.length;
    if (howMany === 0) {
        return arr;
    } else if (howMany >= len) {
        arr.splice(0, len);
        return arr;
    } else {
        arr.splice(0, howMany);
        return arr;
    }
}

slasher([1,2,3,4,5,6,7,8,9],0);  // [1, 2, 3, 4, 5, 6, 7, 8, 9]
slasher([1,2,3,4,5,6,7,8,9],10); // []
slasher([1,2,3,4,5,6,7,8,9],4);  // [5, 6, 7, 8, 9]

总结

文章分别使用数组的Array.shift()Array.slice()Array.splice()方法实现对所给数组,根据第二个参数进行截取操作,如果第二个参数大于数组的长度,则返回一个空数组,否则将返回第二个参数作为索引值之后的所有元素组成的数组。

如果您有更好的方案,欢迎在下面的评论中与我们一起分享。

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/javascript/slasher-flick-in-javascript.html

返回顶部