基于数组的数组对象创建destroyer函数

今天的任务中创建一个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数组：

这样一来，就得到了目标数组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。

js 查找子元素_js 查找子元素_js数组中查找指定元素

而我们的目标就是从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：

要从一个数组中过滤掉对应的参数，大家肯定会想到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中运行后：

方法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

方法5

js 查找子元素_js数组中查找指定元素_js 查找子元素

<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>

js 查找子元素_js 查找子元素_js数组中查找指定元素

也可以换成这样的方式：

方法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>

也可以将上述方法改成：

总结

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

文章由官网发布，如若转载，请注明出处：https://www.veimoz.com/1568

数组对象数组 js 查找子元素 js数组中查找指定元素

0 评论

622