JS中各种循环遍历方式：for-in，for-of，forEach _返回值

1. for…in 、for…of
如果要通过for...of循环，获取数组的索引，可以借助数组实例的方法和keys方法。
let list = [4, 5, 6];for (let i in list) {console.log(i + '-' + list[i]); // 打印： 0-4，1-5，2-6}for (let i of list) {console.log(i); // 打印： 4，5，6}
for…in循环数组的键名是数字，但是for…in循环是以字符串作为键名“0”、“1”、“2”等等。for…in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。某些情况下，for…in循环会以任意顺序遍历键名。for…in循环主要是为遍历对象而设计的，不适用于遍历数组。for…of循环有着同for…in一样的简洁语法，但是没有for…in那些缺点。不同于方法，它可以与break、和配合使用。for of 不能遍历对象，只能遍历带有接口的，例如Set,Map,,Array 。2. ()
(): 对数组的每个元素执行一次给定的函数。
let arr= [44, 555, 6666];arr.forEach((val, idx, array) => {console.log(val);// val: 当前值console.log(idx);// idx：当前下标console.log(array);// array: 当前数组});
结果：
440[ 44, 555, 6666 ]5551[ 44, 555, 6666 ]66662[ 44, 555, 6666 ]
() 不会返回新的数组，而是在原数组的基础上改变数组，可以用于数组的修改。
let a = [1, 2, 3, 4, 5, 6];a.forEach((num, index, a) => {// 三个参数分别为：子元素，索引，原数组a[index] = num + 1;})console.log(a)// [2,3,4,5,6,7]
无法直接遍历{}大括号括起来的对象，此时应使用for循环遍历，或者采用.keys遍历对象的属性。
.keys()方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。
//传入对象，返回包含对象可枚举属性和方法的数组let obj = {'name': 'xiaoming', 'age': 18};console.log(Object.keys(obj)); // ["name","age"]//传入数组，返回索引值var arr = ["a", "b", "c"];console.log(Object.keys(arr)); //["0", "1", "2"]//传入json对象,获取属性与值const json = { name: '张三', age: 18 }Object.keys(json).forEach(key => {console.info(key + ':', json[key]); // name:,张三 age:,18})
.()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )
var obj = { foo: 'bar', baz: 42 };console.log(Object.values(obj)); // ['bar', 42]// array like objectvar obj = { 0: 'a', 1: 'b', 2: 'c' };console.log(Object.values(obj)); // ['a', 'b', 'c']// array like object with random key ordering// when we use numeric keys, the value returned in a numerical order according to the keysvar an_obj = { 100: 'a', 2: 'b', 7: 'c' };console.log(Object.values(an_obj)); // ['b', 'c', 'a']// getFoo is property which isn't enumerablevar my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });my_obj.foo = 'bar';console.log(Object.values(my_obj)); // ['bar']// non-object argument will be coerced to an objectconsole.log(Object.values('foo')); // ['f', 'o', 'o']
3. ()
(): 筛选条件，不改变原数组，返回一个符合函数条件的元素的新数组。

文章插图