为什么我不能在此片段中生成唯一对象数组？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么我不能在此片段中生成唯一对象数组？相关的知识，希望对你有一定的参考价值。

我有以下代码片段，我希望过滤原始数组（过滤器）并获得唯一的过滤器数组。

我想我尝试了所有可能的方法，它（uniqueFilters数组）仍然是11个成员原始数组。

怎么了？

如何确保将此数组实际过滤为其中的一些独特元素？ （他们都来自同一个地方并且是相同的）

更新： - 答案成功解决了js代码中的问题。 - 在实际的应用程序中，我还必须处理打字稿以使用建议的答案。所以也许会帮助别人：

let newUniqueFilters = Array.from(new Map(filters.map(f => [f._id, f] as [string, any])).values());


var filters = [{
	"_id": "filter1",
	"filterIndex": 1,
	"filterLabel": "Blur",
	"filterURL": "url(#filter1)",
	"filterEffects": [{
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 5
		}]
	}]
}, {
	"_id": "filter2",
	"filterIndex": 2,
	"filterLabel": "Shadow",
	"filterURL": "url(#filter2)",
	"filterEffects": [{
		"name": "feOffset",
		"attributes": [{
			"name": "dx",
			"value": 20
		}, {
			"name": "dy",
			"value": 20
		}, {
			"name": "result",
			"value": "offOut"
		}, {
			"name": "in",
			"value": "SourceAlpha"
		}]
	}, {
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 7
		}, {
			"name": "in",
			"value": "offOut"
		}, {
			"name": "result",
			"value": "blurOut"
		}]
	}, {
		"name": "feBlend",
		"attributes": [{
			"name": "mode",
			"value": "normal"
		}, {
			"name": "in2",
			"value": "blurOut"
		}, {
			"name": "in",
			"value": "SourceGraphic"
		}]
	}]
}, {
	"_id": "filter2",
	"filterIndex": 2,
	"filterLabel": "Shadow",
	"filterURL": "url(#filter2)",
	"filterEffects": [{
		"name": "feOffset",
		"attributes": [{
			"name": "dx",
			"value": 20
		}, {
			"name": "dy",
			"value": 20
		}, {
			"name": "result",
			"value": "offOut"
		}, {
			"name": "in",
			"value": "SourceAlpha"
		}]
	}, {
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 7
		}, {
			"name": "in",
			"value": "offOut"
		}, {
			"name": "result",
			"value": "blurOut"
		}]
	}, {
		"name": "feBlend",
		"attributes": [{
			"name": "mode",
			"value": "normal"
		}, {
			"name": "in2",
			"value": "blurOut"
		}, {
			"name": "in",
			"value": "SourceGraphic"
		}]
	}]
}, {
	"_id": "filter1",
	"filterIndex": 1,
	"filterLabel": "Blur",
	"filterURL": "url(#filter1)",
	"filterEffects": [{
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 5
		}]
	}]
}, {
	"_id": "filter1",
	"filterIndex": 1,
	"filterLabel": "Blur",
	"filterURL": "url(#filter1)",
	"filterEffects": [{
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 5
		}]
	}]
}, {
	"_id": "filter1",
	"filterIndex": 1,
	"filterLabel": "Blur",
	"filterURL": "url(#filter1)",
	"filterEffects": [{
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 5
		}]
	}]
}, {
	"_id": "filter2",
	"filterIndex": 2,
	"filterLabel": "Shadow",
	"filterURL": "url(#filter2)",
	"filterEffects": [{
		"name": "feOffset",
		"attributes": [{
			"name": "dx",
			"value": 20
		}, {
			"name": "dy",
			"value": 20
		}, {
			"name": "result",
			"value": "offOut"
		}, {
			"name": "in",
			"value": "SourceAlpha"
		}]
	}, {
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 7
		}, {
			"name": "in",
			"value": "offOut"
		}, {
			"name": "result",
			"value": "blurOut"
		}]
	}, {
		"name": "feBlend",
		"attributes": [{
			"name": "mode",
			"value": "normal"
		}, {
			"name": "in2",
			"value": "blurOut"
		}, {
			"name": "in",
			"value": "SourceGraphic"
		}]
	}]
}, {
	"_id": "filter1",
	"filterIndex": 1,
	"filterLabel": "Blur",
	"filterURL": "url(#filter1)",
	"filterEffects": [{
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 5
		}]
	}]
}, {
	"_id": "filter2",
	"filterIndex": 2,
	"filterLabel": "Shadow",
	"filterURL": "url(#filter2)",
	"filterEffects": [{
		"name": "feOffset",
		"attributes": [{
			"name": "dx",
			"value": 20
		}, {
			"name": "dy",
			"value": 20
		}, {
			"name": "result",
			"value": "offOut"
		}, {
			"name": "in",
			"value": "SourceAlpha"
		}]
	}, {
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 7
		}, {
			"name": "in",
			"value": "offOut"
		}, {
			"name": "result",
			"value": "blurOut"
		}]
	}, {
		"name": "feBlend",
		"attributes": [{
			"name": "mode",
			"value": "normal"
		}, {
			"name": "in2",
			"value": "blurOut"
		}, {
			"name": "in",
			"value": "SourceGraphic"
		}]
	}]
}, {
	"_id": "filter1",
	"filterIndex": 1,
	"filterLabel": "Blur",
	"filterURL": "url(#filter1)",
	"filterEffects": [{
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 5
		}]
	}]
}, {
	"_id": "filter2",
	"filterIndex": 2,
	"filterLabel": "Shadow",
	"filterURL": "url(#filter2)",
	"filterEffects": [{
		"name": "feOffset",
		"attributes": [{
			"name": "dx",
			"value": 20
		}, {
			"name": "dy",
			"value": 20
		}, {
			"name": "result",
			"value": "offOut"
		}, {
			"name": "in",
			"value": "SourceAlpha"
		}]
	}, {
		"name": "feGaussianBlur",
		"attributes": [{
			"name": "stdDeviation",
			"value": 7
		}, {
			"name": "in",
			"value": "offOut"
		}, {
			"name": "result",
			"value": "blurOut"
		}]
	}, {
		"name": "feBlend",
		"attributes": [{
			"name": "mode",
			"value": "normal"
		}, {
			"name": "in2",
			"value": "blurOut"
		}, {
			"name": "in",
			"value": "SourceGraphic"
		}]
	}]
}]

// first method:
var uniqueFilters = [];
for(let i = 0; i < filters.length; i++) {
    if(uniqueFilters.indexOf(filters[i]) == -1){
        uniqueFilters.push(filters[i])
    }
}
console.log("first method")
console.log("original array length:" + filters.length)
console.log("unique array length:" + uniqueFilters.length)

// second method:
//var uniqueFilters = filters.filter(function(elem, index, self) {
//        return index == self.indexOf(elem);
//});
//console.log("second method")
//console.log("original array length:" + filters.length)
//console.log("unique array length:" + uniqueFilters.length)

// suggested method 1:
var newUniqueFilters = Array.from(new Map(filters.map(f => [f._id, f])).values());
console.log(newUniqueFilters)
答案

你可以使用Map：

filters = Array.from(new Map(filters.map(f => [f._id, f])).values());

这假设它足以比较唯一标识过滤器的_id值。

请注意，比较对象本身（使用indexOf或类似方法）将永远不会显示重复项，因为所有对象都是不同的引用（副本），即使它们看起来相同。一般情况下，{} === {}总是假的。

另一答案

它不起作用，因为过滤器数组中的每个元素都有不同的内存位置，并且对象通过内存位置进行比较。

因此，每当您在uniqueFilters中比较过滤器数组中存在的该对象时，它就不存在，因为每个对象都有不同的内存位置。所以它将推送uniqueFilters中的每个元素。

另一答案

尝试更改此行

if（uniqueFilters.indexOf（filters [i]）== -1）{to if（uniqueFilters.indexOf（filters [i]）=== -1）{

如果不工作，您也可以尝试将特定属性与所有uniqueFilter进行比较

以上是关于为什么我不能在此片段中生成唯一对象数组？的主要内容，如果未能解决你的问题，请参考以下文章

使用在另一个片段（NPE）中生成的值设置片段的 TextView [重复]

如何将此 JavaScript 代码片段翻译成 Parenscript？

从mysql的片段中加载ListView

数组和适配器不能调用虚空片段

在片段着色器中，为啥我不能使用平面输入整数来索引 sampler2D 的统一数组？

10个JavaScript代码片段，使你更加容易前端开发。