In JavaScript, binary operations do not function well with options

Question

In JavaScript, binary operations do not function well with options

Here is my situation... there are array items with binary options like

$item[0] = 0010
$item[1] = 1000
$item[2] = 0110
$item[3] = 1101

each bit represents an option

I want to compare these options with the customer's requested option, let's say it's 0010

So, I need a logic to display only $item[0] and $item[2] because the second byte is 1. However, when there is no customer option check: 0000, then I must show all items

Only when some options are displayed should there be a filter...

I wish I paid more attention in math class... I am lost now, please help!

Note: This code snippet is from here: http://jsfiddle.net/yHxue/ but I'm having trouble understanding this line:

markers[m].setMap(((markers[m].props & props)>>>0===props)? ((props)?map:null): null);

, so I tried rewriting it, but mine doesn't work!

javascript arrays binary

Answer 1

Answer №1

If you're dealing with numeric data, simply apply the bitwise & operator to each element.

var customerOption = parseInt("0010", 2)

$item.forEach(function(n, i) {
    if (customerOption === 0 || ((n & customerOption) == customerOption))
        alert(i); // display this item
});

If your data consists of strings, then conversion to a number is necessary for each item.

Repeat the same process as above, but...

parseInt(n, 2);

var $item = [];
$item[0] = "0010"
$item[1] = "1000"
$item[2] = "0110"
$item[3] = "1101"

var customerOption = parseInt("0010", 2)

$item.forEach(function(n, i) {
    if (customerOption === 0 || ((parseInt(n, 2) & customerOption) == customerOption))
        document.querySelector("pre").textContent += "\n0010 matched index: " + i;
});

document.querySelector("pre").textContent += "\n\n"

var customerOption = parseInt("0110", 2)

$item.forEach(function(n, i) {
    if (customerOption === 0 || ((parseInt(n, 2) & customerOption) == customerOption))
        document.querySelector("pre").textContent += "\n0110 matched index: " + i;
});

<pre></pre>

Answer 2

If you're dealing with numeric data, simply apply the bitwise & operator to each element.

var customerOption = parseInt("0010", 2)

$item.forEach(function(n, i) {
    if (customerOption === 0 || ((n & customerOption) == customerOption))
        alert(i); // display this item
});

If your data consists of strings, then conversion to a number is necessary for each item.

Repeat the same process as above, but...

parseInt(n, 2);

var $item = [];
$item[0] = "0010"
$item[1] = "1000"
$item[2] = "0110"
$item[3] = "1101"

var customerOption = parseInt("0010", 2)

$item.forEach(function(n, i) {
    if (customerOption === 0 || ((parseInt(n, 2) & customerOption) == customerOption))
        document.querySelector("pre").textContent += "\n0010 matched index: " + i;
});

document.querySelector("pre").textContent += "\n\n"

var customerOption = parseInt("0110", 2)

$item.forEach(function(n, i) {
    if (customerOption === 0 || ((parseInt(n, 2) & customerOption) == customerOption))
        document.querySelector("pre").textContent += "\n0110 matched index: " + i;
});

<pre></pre>

Answer 3

Answer №2

Transform all the strings (both items and the mask) into numerical values using parseInt(string, 2).

If the value of mask is 0, simply include all the items. Otherwise:

Proceed to use the & operator to identify the shared 1 bits:

var common = item & mask;

Next, evaluate common:

If you require any of the masked bits, then non-zero value for common is sufficient.
If you need all the bits specified in the mask, then common should match with mask.

UPDATE:

markers[m].setMap(
  ((markers[m].props & props) >>> 0 === props) ?
  ((props) ? map : null) :
  null
);

markers[m].props & props identifies mutual 1 bits, as previously mentioned; >>> 0 ensures a positive number. This outcome is compared against props to confirm that all common bits align with those in props (similar to the second case mentioned earlier). If all bits from props are present, and if props isn't zero, then markers[m] is assigned to map; otherwise, it's set to null.

Answer 4

Transform all the strings (both items and the mask) into numerical values using parseInt(string, 2).

If the value of mask is 0, simply include all the items. Otherwise:

Proceed to use the & operator to identify the shared 1 bits:

var common = item & mask;

Next, evaluate common:

If you require any of the masked bits, then non-zero value for common is sufficient.
If you need all the bits specified in the mask, then common should match with mask.

UPDATE:

markers[m].setMap(
  ((markers[m].props & props) >>> 0 === props) ?
  ((props) ? map : null) :
  null
);

markers[m].props & props identifies mutual 1 bits, as previously mentioned; >>> 0 ensures a positive number. This outcome is compared against props to confirm that all common bits align with those in props (similar to the second case mentioned earlier). If all bits from props are present, and if props isn't zero, then markers[m] is assigned to map; otherwise, it's set to null.

Answer 5

Answer №3

let choices = ['0010', '1000', '0110', '1111'];
const findMandatoryChoices = (userChoice) => {
    let userChoiceInt = parseInt(userChoice, 2);
    if (userChoiceInt) {
        return choices.filter((binarySequence) => {
            return parseInt(binarySequence, 2) & userChoiceInt;
        });
    } else {
        return choices;
    }
};

You should use it in this manner:

findMandatoryChoices('0010');

Answer 6

let choices = ['0010', '1000', '0110', '1111'];
const findMandatoryChoices = (userChoice) => {
    let userChoiceInt = parseInt(userChoice, 2);
    if (userChoiceInt) {
        return choices.filter((binarySequence) => {
            return parseInt(binarySequence, 2) & userChoiceInt;
        });
    } else {
        return choices;
    }
};

You should use it in this manner:

findMandatoryChoices('0010');

Answer 7

Answer №4

However, in the absence of customer options check : 0000 I must display all items

In twos complement, -1 is represented as all ones (1111) in binary

if (!props) props = -1;

When testing for a specific value in binary, use both bitwise AND (&) and strict equality (===)

needle === (needle & haystack)

For example, searching for needle = 1001 in haystack = 0001 will result in false, even though 1001 & 0001 evaluates to truthy 0001

In certain cases, it may not be advisable to rely on exact matches

You can create code that uses callbacks to process an array

function applyByFlag(flag, callbackTrue, callbackFalse) {
    if (!flag)
        flag = -1;
    function nop() {}
    if (!callbackTrue) callbackTrue = nop;
    if (!callbackFalse) callbackFalse = nop;
    boxes.forEach(function (e, i, a) {
        if (flag & e) // non-exact test
            callbackTrue.call(e, e, i, a);
        else
            callbackFalse.call(e, e, i, a);
    });
}

It's recommended to modify the test to work with e.props

Answer 8

However, in the absence of customer options check : 0000 I must display all items

In twos complement, -1 is represented as all ones (1111) in binary

if (!props) props = -1;

When testing for a specific value in binary, use both bitwise AND (&) and strict equality (===)

needle === (needle & haystack)

For example, searching for needle = 1001 in haystack = 0001 will result in false, even though 1001 & 0001 evaluates to truthy 0001

In certain cases, it may not be advisable to rely on exact matches

You can create code that uses callbacks to process an array

function applyByFlag(flag, callbackTrue, callbackFalse) {
    if (!flag)
        flag = -1;
    function nop() {}
    if (!callbackTrue) callbackTrue = nop;
    if (!callbackFalse) callbackFalse = nop;
    boxes.forEach(function (e, i, a) {
        if (flag & e) // non-exact test
            callbackTrue.call(e, e, i, a);
        else
            callbackFalse.call(e, e, i, a);
    });
}

It's recommended to modify the test to work with e.props

Answer 9

Answer №5

Your code is almost complete; just remember to include an extra check for when the props value is zero:

for(var m=0; m < markers.length; m++) {
    var show = (markers[m].props & props)>>>0===props || props == 0;
    markers[m].setMap(show ? map : null);
}

Check out the demo here!

The expression markers[m].props & props will result in either a 0 (if not all bits of props match) or the actual value of props (if all bits match).

The added ">>>0" will convert the expression into an unsigned 32-bit integer value, though it's optional if you use this revised expression instead:

var show = (markers[m].props & props) || props == 0;

Answer 10

Your code is almost complete; just remember to include an extra check for when the props value is zero:

for(var m=0; m < markers.length; m++) {
    var show = (markers[m].props & props)>>>0===props || props == 0;
    markers[m].setMap(show ? map : null);
}

Check out the demo here!

The expression markers[m].props & props will result in either a 0 (if not all bits of props match) or the actual value of props (if all bits match).

The added ">>>0" will convert the expression into an unsigned 32-bit integer value, though it's optional if you use this revised expression instead:

var show = (markers[m].props & props) || props == 0;

In JavaScript, binary operations do not function well with options

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Step-by-step guide on utilizing a for loop to print out each element of an array on the console

Using jQuery to add a class after a specified delay

Steps to make background color transparent in Phaser 3

How can ternary conditional operators be transformed into if statements?

Guide to invoking an API in Next.js 13 by utilizing specific variables within a client component

There appears to be an issue with the functionality of the JavaScript calculation function

Append a sequence of eight characters following a specific character in a CharArray to create a new String

Is it possible to apply (max / min) to a mongoose string?

Encountering TypeScript error TS2345 while attempting to reject a Promise with an error

Organizing a two-dimensional array

Trigger function when an option is chosen from the jQuery UI autocomplete suggestion list

Having trouble with V-For image paths not locating the image files? Need help on adding the right file path while using v-for?

Challenges encountered with the login page within the script document

Add the necessary js, html, and css files to enhance an angular project

I am unable to close the hamburger menu by clicking on it

struggling to get react-router working with reactjs

Error displaying component with react-router v5 not found

Ways to retrieve an object from a separate function in JavaScript

How can I make my navbar stay fixed in place and also activate the transform scale functionality?

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler