美文网首页
js中的各种遍历(forEach, map, for, for.

js中的各种遍历(forEach, map, for, for.

作者: 风吹过的空气 | 来源:发表于2018-06-06 16:31 被阅读903次

    forEach

    es5出来的方法,这是我在react中用的最多的遍历方法之一,用法如下:

    models.forEach(model => app.model(model));
    

    dva里面经常这么写。

    写法很简单,经常用于通过这个数组内的数据创造新的结构,但是forEach的问题在于它不能跳出循环。

    map

    也是用的最多的方法之一,用法如下

    {data.map(d => (
              <div className="balance-row">
                <div className="balance-col currency">{d.currency.toUpperCase()}</div>
                <div className="balance-col balance">
                  <div>
                    <FormattedNumber value={d.balance} />
                  </div>
                  <div className="light-text lock">
                    <i className="icon anticon icon-lock" /><FormattedNumber value={d.locked} />
                  </div>
                </div>
              </div>
            ))}
    

    react 里面经常这么写。

    const value = [1, 22, 4, 5].map(d => d  + 1);
    value; // [2, 23, 5, 6]
    

    用于改变一个数组内容,相当于改变了原数组

    for ... in

    for (let prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        // 继续操作prop和obj
      }
    }
    

    for ... in也可以用于遍历数组,但是不推荐

    for ... of

    ES6中加了一个新的遍历方式,主要是用来弥补forEach 和 for...in的短板,它还可以遍历字符串、map对象、set对象、generator对象。
    注意:它只能遍历带有iterable属性的对象,所以不能遍历对象,除非刻意给object加上一个iterable属性。
    这个老厉害了!

    Map

    let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
     
    for (let [key, value] of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
     
    for (let key of iterable) {
      console.log(key);
    }
    // [a, 1]
    // [b, 2]
    // [c, 3]
    

    Set

    let iterable = new Set([1, 1, 2, 2, 3, 3]);
     
    for (let value of iterable) {
      console.log(value);
    }
    // 1
    // 2
    // 3
    

    Generator

    function * fibonacci() { // a generator function
      let [prev, curr] = [0, 1];
      while (true) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
      }
    }
     
    for (let n of fibonacci()) {
      console.log(n);
      // truncate the sequence at 1000
      if (n >= 1000) {
        break;
      }
    }
    

    相关文章

      网友评论

          本文标题:js中的各种遍历(forEach, map, for, for.

          本文链接:https://www.haomeiwen.com/subject/lmwbsftx.html