jQuery — Array and Object Operations

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

jQuery.globalEval()

We can use the jQuery.globalEval() method to run some JavaScript code globally.

For example, we can write:

jQuery.globalEval("let newVar = true;");

to run some code.

jQuery.grep()

The jQuery.grep() method finds the element of an array that satisfies the filter function.

For example, we can write:

const arr = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1];
const filteredArr = jQuery.grep(arr, function(n, i) {
  return (n !== 5 && i > 4);
});

console.log(filteredArr)

Then we returned an array that has the result that satisfies the condition in the callback we passed into grep .

n has the array entry. i has its index.

jQuery.hasData()

The jQuery.hasData() method lets us check if a piece of data is saved into an element.

For example, if we have:

<p> </p>

Then we can use it by writing:

const p = jQuery("p")[0];
console.log(jQuery.hasData(p));
$.data(p, "testing", 123);
console.log(jQuery.hasData(p))

We call hasData on the p element to check if there are any data saved into it.

So the first console log should log false and the 2nd one should log true .

jQuery.inArray()

The jQuery.inArray() method lets us check if an element is in the array.

It returns the index of it if it’s found and -1 otherwise.

For example, we can write:

console.log($.inArray(5 + 5, ["8", "9", "10", 10 + ""]));

to check if 10 is in the array.

It should return -1 since it’s not in the array.

jQuery.isEmptyObject()

We can check if an element is an empty object with the jQuery.isEmptyObject() .

For example, if we have:

console.log(jQuery.isEmptyObject({}));

This should log true since we passed in an empty object into the method.

jQuery.isPlainObject()

The jQuery.isPlainObject() method lets us check if a JavaScript object is a plain object.

A plain object is an object literal.

For example, if we have:

console.log(jQuery.isPlainObject({}))
console.log(jQuery.isPlainObject("test"))

Then the first console log logs true and the 2nd one logs false .

jQuery.isXMLDoc()

We can check if a document object is an XML document with thejQuery.isXMLDoc() method.

For example, we can write:

console.log(jQuery.isXMLDoc(document))

Then the console log logs false .

jQuery.makeArray()

We can use the jQuery.makeArray() method to convert an element list to an array.

For example, if we have:

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>

Then we can write:

const elems = document.getElementsByTagName("div");
const arr = jQuery.makeArray(elems);
console.log(arr)

We get the divs with getElementsByTagName .

Then we call jQuery.makeArray to convert the element list to an array.

jQuery.map()

The jQuery.map() method translates all items in an array or object to a new array of items.

For example, we can write:

const fakeArray = {
  "length": 2,
  0: "foo",
  1: "bar"
};
const realArray = $.makeArray(fakeArray)
const mapped = $.map(realArray, function(val, i) {
  return val + val;
});

console.log(mapped);

fakeArray is an object with numeric keys and a length property.

We call $.makeArray to convert that into a real array.

Then we call $.map to map the array entries into new values.

So mapped is [“foofoo”, “barbar”] .

Conclusion

We can do various objects and array operations with jQuery methods.