Javascript: Avoir des problèmes avec .map() sur IE

Question

Ce code fonctionne très bien sur Chrome, FFX, etc. Il prend le contenu d'une zone de texte et sépare toutes les lignes dans différents éléments de tableau (les nouvelles lignes sont représentées par des éléments de tableau vides) . Lors du test sur IE, il génère une erreur. Code:

Ceci est la valeur de tregex et l'appel:

var tregex = /\n|([^\r\n.!?]+([.!?]+|$))/gim; 

var source = $('#text').val().match(tregex).map($.trim); 

Le code lance ce message d'erreur en raison de .map() (IE uniquement)

User Agent: Mozilla/4.0 (compatible: MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Horodatage: Fri, 13 Jul 2012 21:52:48 UTC

Message: Cet objet ne gère pas cette propriété ou méthode ligne: 128 Char: 6 Code: 0 URI: http://mydomain.com/src/common.js

Pourquoi? De toute façon je peux le soutenir sur IE7 +? (Cela a été testé sur IE8).

Answer 1

IE est un navigateur terrible, et en tant que tel n'a pas de fonction de carte intégrée (au moins pas dans IE7-8). Puisque vous essayez d'appeler la carte sur les résultats d'une correspondance d'expression régulière (par opposition à l'appel sur un objet de résultats jQuery), la seule carte que vous pouvez utiliser est la carte intégrée (que l'IE n'a pas).

De nombreuses bibliothèques simulent toutefois la carte pour vous, y compris jQuery, Underscore et Mochikit.

Voici un exemple de la façon dont vous pouvez utiliser jQuery de faire ce que vous essayez de faire:

$.map($('#text').val().match(tregex), $.trim); 

Answer 2

Je suis assez sûr que Array.map() a été ajouté seulement dans IE9. Vous devriez faire une boucle dans le tableau manuellement à la place.

Answer 3

Vous pouvez ajouter le support tout en incluant la shim pour elle:

// Production steps of ECMA-262, Edition 5, 15.4.4.19 
// Reference: http://es5.github.com/#x15.4.4.19 
if (!Array.prototype.map) { 
    Array.prototype.map = function(callback, thisArg) { 

    var T, A, k; 

    if (this == null) { 
     throw new TypeError(" this is null or not defined"); 
    } 

    // 1. Let O be the result of calling ToObject passing the |this| value as the argument. 
    var O = Object(this); 

    // 2. Let lenValue be the result of calling the Get internal method of O with the argument "length". 
    // 3. Let len be ToUint32(lenValue). 
    var len = O.length >>> 0; 

    // 4. If IsCallable(callback) is false, throw a TypeError exception. 
    // See: http://es5.github.com/#x9.11 
    if ({}.toString.call(callback) != "[object Function]") { 
     throw new TypeError(callback + " is not a function"); 
    } 

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined. 
    if (thisArg) { 
     T = thisArg; 
    } 

    // 6. Let A be a new array created as if by the expression new Array(len) where Array is 
    // the standard built-in constructor with that name and len is the value of len. 
    A = new Array(len); 

    // 7. Let k be 0 
    k = 0; 

    // 8. Repeat, while k < len 
    while(k < len) { 

     var kValue, mappedValue; 

     // a. Let Pk be ToString(k). 
     // This is implicit for LHS operands of the in operator 
     // b. Let kPresent be the result of calling the HasProperty internal method of O with argument Pk. 
     // This step can be combined with c 
     // c. If kPresent is true, then 
     if (k in O) { 

     // i. Let kValue be the result of calling the Get internal method of O with argument Pk. 
     kValue = O[ k ]; 

     // ii. Let mappedValue be the result of calling the Call internal method of callback 
     // with T as the this value and argument list containing kValue, k, and O. 
     mappedValue = callback.call(T, kValue, k, O); 

     // iii. Call the DefineOwnProperty internal method of A with arguments 
     // Pk, Property Descriptor {Value: mappedValue, Writable: true, Enumerable: true, Configurable: true}, 
     // and false. 

     // In browsers that support Object.defineProperty, use the following: 
     // Object.defineProperty(A, Pk, { value: mappedValue, writable: true, enumerable: true, configurable: true }); 

     // For best browser support, use the following: 
     A[ k ] = mappedValue; 
     } 
     // d. Increase k by 1. 
     k++; 
    } 

    // 9. return A 
    return A; 
    };  
} 

Vous pouvez également inclure le es5shim qui ajoute .map et toutes les autres méthodes de tableau manquantes dans IE7-8 plus d'autres produits comme Function#bind

Answer 4

Je crois que votre code peut fonctionner dans FF et Chrome par accident. Vouliez-vous utiliser jQuery.map? Vous utilisez Array.map qui n'est pas pris en charge dans IE avant 9.

Considérez ce qui suit en remplacement.

var source = $.map($('#text').val().match(tregex), $.trim); 

Ceci utilise l'implémentation de carte de jQuery pour faire une boucle et effectuer la découpe.