今天的任务中创建一个destroyer()函数，其功能是对所给的数组根据参数删除这些元素。也就是说给destroyer()传入一个参数arrjs 查找子元素，而且这个参数是类似这样的[1,2,3,4,5,2,3,1,3],1,3，要做的事情就是从数组[1,2,3,4,5,2,3,1,3]删除所有的1和3元素。

  实现思路

  知道要完成的任务之后，要有一个实现思路，其简单的可以概括为：

  将涉及到的JavaScript方法

  有思路了，就好办了，这里简单罗列一些将要用到的JavaScript方法：

  上面的知识点是后面所有解决方案都将会涉及到的。为了更好的理解后面的解决方案，简单的回忆一下这几个知识点。

  arguments是一个类数组对象。代表传给一个function的参数列表。它是函数内部的本地变量，已不再是函数的属必了。可以在函数内部通过使用arguments对象来获取函数的所有参数。

  特别强调了，arguments对象仅在函数内部有效，在函数外部调用arguments对象会出现一个错误。来看一个简单的示列：

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer (arr) {
   // 将所传的参数转换成数组args
   var args = arguments;
   console.log(args); //[[1,2,1,3,2,1,3,4,2,6],1,2]
   for (var i = 0, len = arguments.length; i < len; i++) {
       console.log(arguments[i]);        
   }
}
destroyer([1,2,1,3,2,1,3,4,2,6],1,2);`</pre>

  从上面的示例，可以知道，通过arguments[0]可以获取到的数组arr，也就是目标数组。同时通过JavaScript的push()、splice()或者shift()之类的方法来删除args数组中的第一个元素，从而得到需要从arr中移除的参数，其也是一个数组，比如说将其称为removeArgs。

  其实除了这些方法之外，可以通过arguments带一个参数，就可以直接得到需要移除的参数removeArgs数组：

  <pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">removeArgs = Array.prototype.slice.call(arguments, 1); // [1, 2]</pre>

  这样一来，就得到了目标数组js 查找子元素，比如说将其称之为newArray和需要移除的数组removeArgs。那么就可以Array.prototype.indexOf()获取removeArgs中的索引值index，如果其等于-1，就表示元素不在数组removeArgs中，否则将返回对应的索引值：

  <pre class="undefined" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`[1,2].indexOf(1) = 0
`</pre>

  然后使用===或者!==来做比较

  <pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">removeArgs.indexOf(value) === -1;</pre>

  如果其值不为-1将返回false。

  <pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">[1,2].indexOf(1) = 0  => false[1,2].indexOf(2) = 1  => false</pre>

  而我们的目标就是从newArray中移除removeArgs中有相同的元素。比如说：

  <pre class="ini" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">newArray = [1,2,1,3,2,1,3,4,2,6]removeArgs= [1,2]</pre>

  也就是说从[1,2,1,3,2,1,3,4,2,6]移除所有的1和2，最后得到的数组arr：

  <pre class="ini" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">arr = [3, 3, 4, 6]</pre>

  要从一个数组中过滤掉对应的参数，大家肯定会想到filter()方法，如果其callback函数返回的值为false时，就会从数组中删除这个值，从而将符合条件的元素组成一个新的数组。也就是我们最终需要的数组arr。

  解决方案

  要实现这个功能，实现方案非常的多，下面罗列一些搜集来的解决方案，以供大家学习和参考：

  方法1

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   // 获取目标数组
   var newArray = arguments[0]; // [1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
   // 声明一个空数组，用来存储需要从newArray中删除的元素
   var removeArgs = [];    for (var i = 1, len = arguments.length; i < len; i++) {
       removeArgs.push(arguments[i]);        
   }    // 声明filter()方法的callback函数
   function isFalse (value) {
       return removeArgs.indexOf(value) === -1;        
   }    return newArray.filter(isFalse);// newArray中删除1,2}`</pre>

  在Chrome中运行后：

  <pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">destroyer([1,2,1,3,2,1,3,4,2,6],1,2); // [3, 3, 4, 6]</pre>

  方法2

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var newArray = arguments[0]; //[1,2,1,3,2,1,3,4,2,6]
   var removeArgs = [];    for (var i = 1, len = arguments.length; i < len; i++) {
       removeArgs.push(arguments[i]);        
   }    function isFalse (value) {
     for (var j = 0; j < removeArgs.length; j++) {        if (removeArgs[j] == value) {          return false;
       }        
     }      return true;
   }    return newArray.filter(isFalse); // 从newArray数组中删除1,2}`</pre>

  方法3

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var args = Array.prototype.slice.call(arguments); // [[1,2,1,3,2,1,3,4,2,6],1,2]
   args.splice(0, 1); // 从数组中args删除第一个元素[1,2,1,3,2,1,3,4,2,6], args数组变成[1,2]
   // arr = [1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
   return arr.filter(function(value) {        return args.indexOf(value) === -1;
   });
}`</pre>

  方法4

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var removeArgs = Array.prototype.slice.call(arguments, 1); // [1, 2]
   // arr = [1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
   return arr.filter(function(value) {        return removeArgs.indexOf(value) < 0;
   });
}`</pre>

  方法5

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var args = arguments;//[[1, 2, 1, 3, 2, 1, 3, 4, 2, 6], 1, 2]
   function isFalse (value) {
     for (var i = 1, len = args.length; i < len; i++){        if (args[i] == value) {          return false;
       }
     }      return true;
   }    // arr = [1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
   return arr.filter(isFalse);
}`</pre>

  方法6

  <pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var args = Array.prototype.slice.call(arguments); //[[1, 2, 1, 3, 2, 1, 3, 4, 2, 6], 1, 2]
   var newArray = args.shift(); //[1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
   // 这里args = [1,2]
   function isFalse (a) {
     return args.every( function (b) {
       return a !== b;
     });
   }    return newArray.filter(isFalse);
}`</pre>

  方法7

  <pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var removeArgs = Array.prototype.slice.call(arguments, 1);// [1,2]
   function isFalse (a) {
     return !removeArgs.some (function (b) {
       return a === b;
     })
   }    return arr.filter(isFalse);
}`</pre>

  方法8

  <pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var removeArgs = Array.prototype.slice.call(arguments, 1); // [1,2]
   removeArgs.forEach(function(value) {        // arr = [1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
       var index = arr.indexOf(value);        while (index > -1) {
           arr.splice(index, 1);
           index = arr.indexOf(value);
       }
   });    return arr;
}`</pre>

  方法9

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   // arguments = [[1, 2, 1, 3, 2, 1, 3, 4, 2, 6],1,2]
   for (var i = 1; i < arguments.length; i++) {        // arr = [1, 2, 1, 3, 2, 1, 3, 4, 2, 6]
       for (var j = 0; j < arr.length; j++) {            if (arguments[i] == arr[j]) {
               arr.splice(j, 1);
               --j;
           }
       }
   }    return arr;
}`</pre>

  也可以换成这样的方式：

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   for (var i = 1; i < arguments.length; i++) {        for (var j = arr.length - 1; j >= 0; j--) {            if (arguments[i] == arr[j]) {
               arr.splice(j, 1);
           }
       }
   }    return arr;
}`</pre>

  方法10

  除了上述方法之外，还可以使用ES6中的一些方法：

  比如：

  <pre class="php" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr) {
   var removeArgs = new Set(Array.prototype.slice.call(arguments, 1)); //Set {1, 2}
   function isFalse (value) {
     return !removeArgs.has(value);
   }    return arr.filter(isFalse);
}`</pre>

  也可以将上述方法改成：

  <pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; font-size: 14px; padding: 0.5em; color: rgb(131, 148, 150); margin-top: 0px; margin-bottom: 20px; line-height: 20px; background-color: rgb(0, 43, 54);">`function destroyer(arr, ...items) {
   var removeArgs = new Set(items); // Set {1, 2}
   function isFalse (value) {
       return !removeArgs.has(value);
   }    return arr.filter(isFalse);
}`</pre>

  总结

  上面使用了十种方法实现了我们要完成的任务。不管什么使用什么方法，都有自己的优势和弊端。我想说的是，只要大家掌握了基础，对这JavaScript这些基础知识了解通透，我们就可以从不同的角度和使用不同的方法达到我们的目标，或者完成我们所要完成的任务。当然如果你经验十足，您能找到最简单，最高效的方案。如果您有更好的解决方案，欢迎在下面的评论中与我们分享。最后再给大家提供一个视频：