I have a jQuery plugin used in the web-application which is working well in IE 10 and 11. But it failed in IE 7.
When I investigate I came to know that the value of filter method is undefined.
The line of code fails is as follow:
if (splitters.filter(Boolean).length === 0) {
I am using jQuery 1.8.3
It's JavaScript filter() method , it's only supported in IE 9+ as per the MDN documentation
Check polyfill option from MDN for older browser.
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
I'm looking for an alternative for the find() method of an array. I'm using it on Android Browser and Array.prototype.find() doesn't work there. Definition Array Support
var test= this.arrayOfValues.find(function (value) {
return (value.name === device.value)
});
If you do not care so much about programming your own, and if indexOf is somehow not usable, have a look at Underscore.js#find. As an alternative, as #NinaScholz recommended in the comments, use the Polyfill from mozilla.org:
if (!Array.prototype.find) {
Array.prototype.find = function(predicate) {
if (this === null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;
for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return value;
}
}
return undefined;
};
}
I am getting the following error in IE 8
Object doesn't support this property or method
Helper.prototype.getUniqueArray = function(a) {
/*console.log(a);*/
return a.filter(function(elem, pos, self) {
if (elem === '') {
return false;
}
return self.indexOf(elem) === pos;
});
};
Please help me make this work in IE9 and lower.
Use pollyfill for .filter() as specified at the MDN docs:
Polyfill
filter() was added to the ECMA-262 standard in the 5th edition; as such it may not be present in all implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of filter() in ECMA-262 implementations which do not natively support it. This algorithm is exactly the one specified in ECMA-262, 5th edition, assuming that fn.call evaluates to the original value of Function.prototype.call(), and that Array.prototype.push() has its original value.
if (!Array.prototype.filter) {
Array.prototype.filter = function(fun/*, thisArg*/) {
'use strict';
if (this === void 0 || this === null) {
throw new TypeError();
}
var t = Object(this);
var len = t.length >>> 0;
if (typeof fun !== 'function') {
throw new TypeError();
}
var res = [];
var thisArg = arguments.length >= 2 ? arguments[1] : void 0;
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
// NOTE: Technically this should Object.defineProperty at
// the next index, as push can be affected by
// properties on Object.prototype and Array.prototype.
// But that method's new, and collisions should be
// rare, so use the more-compatible alternative.
if (fun.call(thisArg, val, i, t)) {
res.push(val);
}
}
}
return res;
};
}
I am currently learning javascript from the definitive guide and many code examples use xyx.call(undefined,/*args*/) instead of just calling the function as xyz(/*args*/).
I know that if the executing context is set to undefined then the value of this will refer to the global object . I'am not able to figure out why this is done in most examples as they don't depends on values from the global object. Can anybody help me understand the difference.
Some implementation of Array.protype.reduce
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(callbackfn, initialValue) {
"use strict";
var O = Object(this),
lenValue = O.length,
len = lenValue >>> 0,
k,
accumulator,
kPresent,
Pk,
kValue;
if (typeof callbackfn !== 'function') {
throw new TypeError();
}
if (len === 0 && initialValue === undefined) {
throw new TypeError();
}
k = 0;
if (initialValue !== undefined) {
accumulator = initialValue;
} else {
kPresent = false;
while(!kPresent && k < len) {
Pk = k.toString();
kPresent = O.hasOwnProperty(Pk);
if (kPresent) {
accumulator = O[Pk];
}
k += 1;
}
if (!kPresent) {
throw new TypeError();
}
}
while(k < len) {
Pk = k.toString();
kPresent = O.hasOwnProperty(Pk);
if (kPresent) {
kValue = O[Pk];
accumulator = callbackfn.call(undefined, accumulator, kValue, k, O);
}
k += 1;
}
return accumulator;
};
}
and some use :
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(callback /*, initialValue*/) {
'use strict';
if (this == null) {
throw new TypeError('Array.prototype.reduce called on null or undefined');
}
if (typeof callback !== 'function') {
throw new TypeError(callback + ' is not a function');
}
var t = Object(this), len = t.length >>> 0, k = 0, value;
if (arguments.length == 2) {
value = arguments[1];
} else {
while (k < len && ! k in t) {
k++;
}
if (k >= len) {
throw new TypeError('Reduce of empty array with no initial value');
}
value = t[k++];
}
for (; k < len; k++) {
if (k in t) {
value = callback(value, t[k], k, t);
}
}
return value;
};
}
so in one method the callback function is called using call() and in other implementation its not
JavaScript is functional OO language.It have different pattern to invoke a function. xyz(/*args*/) and xyx.call(undefined,/*args*/) are two different kind of invocations.
xyz(/*args*/) - In this case this have window as its value.
xyx.call(undefined,/*args*/) - In this case this will be nothing but context whatever we pass in call like in this case undefined.
Only special thing of using xyx.call(undefined,/*args*/) is that you have reliability of choosing your context in your function call.When you are writing object oriented JavaScript at that time value of context matters a lot. That's why it is more explicit to use xyx.call(undefined,/*args*/) over xyz(/*args*/).
The reason your examples are using call for Array functions has to do with JavaScript's multiple (somewhat needless) array types.
As well as the standard object type that returns true on arr instanceof Array, there are also NodeLists returned from a document.querySelectorAll function, and other similar types. The important thing is, these other types don't have all of Array's helper functions (reduce, map, forEach).
However, they still have all that they technically need for those functions to work; and the .call method helps you to do that. So, let's say I have two collections.
var arr = [1,2,3];
var nodelist = document.querySelectorAll('.baby');
arr.map(function(val) { return val + 1; }); // Okay!
nodelist.map(function(val) { return val.innerHTML; }); // doesn't work
I can pull off the .map call on the nodelist with call, by giving it a different target-object.
Array.prototype.map.call(nodelist, function...etc)
// Technically, this works too; just grabbing the method from our arr
// instance, but it's cleaner to refer to the original
// type's method.
arr.map.call(nodelist, function...etc)
To explain the code samples you posted; those are "polyfills" - browsers should have a "reduce" function themselves, but older browsers might not. So, we create it ourselves to replicate the same functionality.
I need the index of the first value in the array, that matches a custom compare function.
The very nice underscorej has a "find" function that returns the first value where a function returns true, but I would need this that returns the index instead. Is there a version of indexOf available somewhere, where I can pass a function used to comparing?
Thanks for any suggestions!
Here's the Underscore way to do it - this augments the core Underscore function with one that accepts an iterator function:
// save a reference to the core implementation
var indexOfValue = _.indexOf;
// using .mixin allows both wrapped and unwrapped calls:
// _(array).indexOf(...) and _.indexOf(array, ...)
_.mixin({
// return the index of the first array element passing a test
indexOf: function(array, test) {
// delegate to standard indexOf if the test isn't a function
if (!_.isFunction(test)) return indexOfValue(array, test);
// otherwise, look for the index
for (var x = 0; x < array.length; x++) {
if (test(array[x])) return x;
}
// not found, return fail value
return -1;
}
});
_.indexOf([1,2,3], 3); // 2
_.indexOf([1,2,3], function(el) { return el > 2; } ); // 2
There's a standard function in ECMAScript 2015 for Array.prototype.findIndex(). Currently it's implemented in all major browsers apart from Internet Explorer.
Here's a polyfill, courtesy of the Mozilla Developer Network:
// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
Object.defineProperty(Array.prototype, 'findIndex', {
value: function(predicate) {
// 1. Let O be ? ToObject(this value).
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If IsCallable(predicate) is false, throw a TypeError exception.
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
// 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
var thisArg = arguments[1];
// 5. Let k be 0.
var k = 0;
// 6. Repeat, while k < len
while (k < len) {
// a. Let Pk be ! ToString(k).
// b. Let kValue be ? Get(O, Pk).
// c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
// d. If testResult is true, return k.
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
return k;
}
// e. Increase k by 1.
k++;
}
// 7. Return -1.
return -1;
},
configurable: true,
writable: true
});
}
You could do something like this:
Array.prototype.myIndexOf = function(f)
{
for(var i=0; i<this.length; ++i)
{
if( f(this[i]) )
return i;
}
return -1;
};
Regarding Christian's comment: if you override a standard JavaScript method with a custom one with a different the same signature and different functionality, bad thing will likely happen. This is especially true if you're pulling in 3rd party libraries which may depend on the original, say, Array.proto.indexOf. So yeah, you probably want to call it something else.
As others have noted, easy enough to roll your own, which you can keep short and simple for your particular use case:
// Find the index of the first element in array
// meeting specified condition.
//
var findIndex = function(arr, cond) {
var i, x;
for (i in arr) {
x = arr[i];
if (cond(x)) return parseInt(i);
}
};
var moreThanTwo = function(x) { return x > 2 }
var i = findIndex([1, 2, 3, 4], moreThanTwo)
Or if you're a CoffeeScripter:
findIndex = (arr, cond) ->
for i, x of arr
return parseInt(i) if cond(x)
The javascript array method filter returns a subset of the array that return true from the function passed.
var arr= [1, 2, 3, 4, 5, 6],
first= arr.filter(function(itm){
return itm>3;
})[0];
alert(first);
if you must support IE before #9 you can 'shim' Array.prototype.filter-
Array.prototype.filter= Array.prototype.filter || function(fun, scope){
var T= this, A= [], i= 0, itm, L= T.length;
if(typeof fun== 'function'){
while(i<L){
if(i in T){
itm= T[i];
if(fun.call(scope, itm, i, T)) A[A.length]= itm;
}
++i;
}
}
return A;
}
How about such find function ?
(function () {
if (!Array.prototype._find) {
Array.prototype._find = function (value) {
var i = -1, j = this.length;
if (typeof(value)=="function")
for(; (++i < j) && !value(this[i]););
else
for(; (++i < j) && !(this[i] === value););
return i!=j ? i : -1;
}
}
}());
Here comes the coffeescript version of nrabinowitz's code.
# save a reference to the core implementation
indexOfValue = _.indexOf
# using .mixin allows both wrapped and unwrapped calls:
# _(array).indexOf(...) and _.indexOf(array, ...)
_.mixin ({
# return the index of the first array element passing a test
indexOf: (array, test) ->
# delegate to standard indexOf if the test isn't a function
if (!_.isFunction(test))
return indexOfValue(array, test)
# otherwise, look for the index
for item, i in array
return i if (test(item))
# not found, return fail value
return -1
})
using underscore I came up with something copied from their find implementation using _.any:
findIndex = function (obj, iterator, context) {
var idx;
_.any(obj, function (value, index, list) {
if (iterator.call(context, value, index, list)) {
idx = index;
return true;
}
});
return idx;
};
What do you think - do you have any better solutions?