jQuery $.map 的 Angular 等价物?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15411620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:59:27  来源:igfitidea点击:

Angular equivalent of jQuery $.map?

javascriptjqueryangularjsecmascript-5

提问by Benmj

I'm transitioning from relying on jQuery to building apps in AngularJS. It's recommended in a number of placesto notmix jQuery and Angular code.

我正在从依赖 jQuery 过渡到在 AngularJS 中构建应用程序。我们建议在一些地方,以混合jQuery和角码。

One thing I miss though is the jQuery $.map function for arrays. I know this could be re-written using the native Javascript map function, but this is not implemented in all browsers (notably, IE < v9).

我想念的一件事是数组的 jQuery $.map 函数。我知道这可以使用原生 Javascript映射函数重写,但这并不是在所有浏览器中都实现的(尤其是 IE < v9)。

So, is there an Angular equivalent, or should I got back to writing for (var x = 0; x < foo; x += 1) {...}so I can stop including jQuery?

那么,是否有 Angular 等价物,或者我应该重新编写代码for (var x = 0; x < foo; x += 1) {...}以便停止包含 jQuery?

UPDATESometimes knowing what to search for is all you need. Bergie says 'look for polyfills'. Here's a reference guide (from the Modernizr crew) for a bunch of resources for making modern code work on older browsers: HTML5 Cross Browser Polyfills

更新有时您只需要知道要搜索什么。Bergie 说“寻找 polyfills”。这是一个参考指南(来自 Modernizr 工作人员),其中包含大量资源,可用于在旧浏览器上运行现代代码:HTML5 Cross Browser Polyfills

采纳答案by Rob M.

Check here: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map

在这里查看:https: //developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/map

Mozilla has supplied an Array.map polyfill for unsupported browsers

Mozilla 为不受支持的浏览器提供了一个 Array.map polyfill

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 (typeof callback !== "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, : 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;
  };      
}

回答by Edward Brey

No, there is no equivalent in Angular. And as you discovered, no you don't need to fall back to writing imperative code.

不,在 Angular 中没有等价物。正如您所发现的,不,您不需要退回到编写命令式代码。

Instead, just use the mapfunction that is built directly into JavaScript. If you need to support IE8, insert the polyfillat the beginning of your scripts.

相反,只需使用map直接内置在 JavaScript 中的函数即可。如果您需要支持 IE8,请在脚本的开头插入polyfill