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

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;
  }
}

原文地址:https://www.cnblogs.com/harsin/p/11421504.html

时间: 2024-10-19 23:11:15

js中的各种遍历(forEach, map, for, for...in, for...of)的相关文章

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历,都内置forEach方法. 数组 遍历 普通遍历 最简单的一种,也是使用频率最高的一种. let arr = ['a', 'b', 'c', 'd', 'e'] for (let i = 0; i < ar

关于js中for in和foreach in的区别

js 中for in 和foreach in的区别 两个的作用都用来遍历对象,但为什么有了for in语句了还要foreach in语句呢,后来看了下foreach in开发的文档,foreach in是作为E4X标准的一部分在javascript 1.6中发布的,而且E4X不是ECMAScript标准的一部分. foreach…in语句已被废弃,E4X中的大部分特性已被删除,但考虑到向后兼容,foreach…in只会被禁用而不会被删除,可以使用ES6中新的for…of语句来代替. var 小青

JS中find(), findIndex(), filter(), forEach(), some(), every(), map()方法

1. find()与findIndex() find()方法,用于找出第一个符合条件的数组成员.它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员.如果没有符合条件的成员,则返回undefined. [1, 2, 5, -1, 9].find((n) => n < 0)    //找出数组中第一个小于 0 的成员    // -1 find()方法的回调函数可以接受三个参数,依次为当前的值.当前的位置和原数组. findIndex()方

JavaScript中的数组遍历forEach()与map()方法以及兼容写法

原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是我

js中in运算符,forEach与map的用法-基础知识总结------彭记(016)

in运算符: <script> /*1.能够遍历对象的属性*/ var obj = { 'name':'jack', age:20 }; for(var key in obj){ console.log(key + ":" + obj[key]); } /*2.还可以判断 对象 是否可以访问某个属性,而不关注这个属性是否在当前对象中定义*/ console.log('name' in obj); //true console.log('toString' in obj);

js中数组API之foreach、map的用法

forEach语法: arr.forEach(function(value, index, array){--}) 实例: // forEach var arr = [1,2,3,4,5]; arr.forEach(function(value, index, array){ array[index] *= 2; }); console.log(arr); //[2,4,6,8,10] map语法: var newArr = arr.map(function(value, index, arra

php中的循环遍历 foreach list each

foreach语句遍历数组foreach语句用于循环遍历数组,每进行一次循环,当前数组元素的值就会被赋值给变量value(也可以是其它变量),数组指针会逐一的移动. 代码示例: foreach($array as $value){  //$array要遍历的数组,$value为指针指向数组当前的值,as起到赋值的作用 code to executed;} foreach语句也可以获得数组的键名,如下:  代码示例: foreach($array as $key => $value){ echo

js 中数组的遍历

var x = ['a','b','c'] x.forEach(function(val,k){ console.log(val + '--' +k); }) a--0 b-- 1 c-- 2 var str = x.map(function(val,k){return val +'--'+k};).join('\n'); str = a -- 0  b -- 1  c -- 2

js中的filter方法和map方法

filter方法是对数据中的元素进行过滤,也就是说是不能修改原数组中的数据,只能读取原数组中的数据,callback需要返回布尔值 为true的时候,对应的元素留下来, 为false的时候,对应的元素过滤掉 filter方法的使用: 对应的结果: 如果我们尝试对原数组中的元素进行修改,会有什么效果了? 结果如下: 会发现数据不会发生改变的. 也就是说:filter方法是对原数组的元素进行过滤,返回到一个新的数组中去.不影响原始的数组. map方法的使用: 结果如下: 所以:map方法是可以原数组