var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/JavaScript-logo.png/64px-JavaScript-logo.png';
var obj = {
id: 1,
color: [240, 219, 79]
};
console.log(obj.color); // (3) [240, 219, 79]
img.onload = function() {
ctx.drawImage(img, 0, 0);
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
var pixelColor = [data[0], data[1], data[2]];
console.log(pixelColor); // (3) [240, 219, 79]
console.log(pixelColor == obj.color); // false
var objectId = getObjectId(pixelColor);
console.log(objectId); // undefined
}
function getObjectId(color) {
if (obj.color == color)
{
return obj.id;
}
return;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<canvas id="canvas" width="64" height="64"></canvas>
</body>
</html>I'm trying to use the pixelColor array assembled from ImageData as an argument for a getObjectId() function that will return the id of an object with the specified color array. Why is the function returning undefined? And why is the if condition in it unfulfilled?
Edit: added the getter function.
uj5u.com熱心網友回復：
您getObjectId正在比較傳遞給 的引數obj.color，這是一個陣列。
在 JavaScript 中，陣列是物件，而物件具有標識。等式運算子喜歡==或===檢查此身份，而不是物件的所有內容都相同。（==也做了一些時髦的隱式型別轉換，這就是為什么===除非你真的需要有趣的行為，否則最好選擇這種做法）
身份允許在不改變其他類似物件的情況下修改物件，也不必成為一個新的、不同的物件：
var a = [1, 2, 3];
var b = [1, 2, 3];
var c = b;
b.push(4);
console.log(a, b); // prints [1, 2, 3] [1, 2, 3, 4]
console.log(c == b, c); // prints true [1, 2, 3, 4]
您正在尋找的是所謂的結構平等，而 JavaScript 沒有提供內置的方法來做到這一點。有一堆庫和 StackOverflow 答案提供了一個函式來執行此操作，但在您的情況下，如果您假設輸入也是一個陣列，您可以使用Array#every，將陣列的每個組件與輸入中的相應組件進行比較：
if (obj.color.every((x, i) => x == color[i])) {
return obj.id;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/443235.html