js中的常用遍历

可迭代协议

• 字符串
• 数组
• 映射
• 集合
• arguments 对象
• NodeList等DOM集合类型

1.普通for循环，可以通过break终止循环

var arr = [1, 2, 3,4]
for(var i = 0; i < arr.length; i++) { // 这里的i是代表数组的下标
    console.log(i); // 0, 1, 2
    if(i > 2){
    break;//跳出循环
    }
};

2.for…in…更多是用来遍历对象，很少用来遍历数组,因为它会遍历对象的整个原型链，性能很差不推荐用来遍历数组，获取的是对象的键名。

// for...in..
for(var i in arr) {
    //do something
};

3.Es新增的遍历方式，遍历获取的是对象的键值。适用遍历数组/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是，它可以正确响应break、continue和return语句

// for...of...
const iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (const entry of iterable) {
  console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (const [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

4.forEach对于数组的操作很友好，但是无法中断遍历

// forEach()
arr.forEach((item, index, arr) => {
    //do something});
});
//记得偶尔可以使用解构赋值
const items = [
  ['name', '张三'],
  ['title', 'Author']
];

const map = new Map();

items.forEach(
  ([key, value]) => map.set(key, value)
);

5.some(),用来判断是否有元素符合func条件。
some()方法会依次执行数组每一个元素，当任一callback返回值匹配为true则会直接返回true，如果所有callback项匹配皆为false，则返回flase.

let arr = [1,2,3]
arr.some((item,index,arr) =>{
    return item > 2;//true
})

6.every()用于检查数组所有元素是否都满足条件（通过函数提供）

var arr = [1, 2, 3];
arr.every((item, index, arr) => { // item为数组中的元素，index为下标，arr为目标数组
    return item == 0; // flase
})

7.filter()方法创建一个新数组，过滤符合条件的元素。

let arr = [1,2,3]
let a = arr.filter(item =>{
  return item > 1
})
console.log(a) // [2,3]
//删除任何虚假值（0，null，undefined）
["","e",null,undefind,0,"h",12].filter(v =>v) //["e","h",12]

8.map()，映射，实际上是对原数组的每一个元素都遍历一遍，并操作，同时返回一个的值。

语法：array.map(function(currentValue,index,arr), thisValue)

let  arr =[1,2,3,4,5,6];
 arr.map((item)=>{
       return item*10
 })    
 打印结果 [10, 20, 30, 40, 50, 60]
 //2.
let list = [{name:"李斯"，age:12},{name:"王武"，age:18}，{name:"亚瑟"，age:16}]
let age = list.map(item => {
      return item.name
})
//打印结果 ["李斯","王武","亚瑟"]
 

9.recuce(),条件求和，条件统计，查询最值

arr.reduce(function(prev,cur,index,arr){
...
}, init);

• arr 表示原数组；

• prev 表示上一次调用回调时的返回值，或者初始值 init;

• cur 表示当前正在处理的数组元素；

• index表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；

• init 表示初始值。
  其中Array 对象方法

• concat() 连接两个或更多的数组，并返回结果。

• copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。 entries() 返回数组的可迭代对象。

• every() 检测数值元素的每个元素是否都符合条件。 fill() 使用一个固定值来填充数组。

• filter() 检测数值元素，并返回符合条件所有元素的数组。 find() 返回符合传入测试（函数）条件的数组元素。

• find() 返回符合传入测试（函数）条件的数组元素。

• findIndex() 返回数组中第一个匹配fn函数中条件的索引没有则返回undefined(不改变原数组)。

• from() 通过给定的对象中创建一个数组。 includes() 判断一个数组是否包含一个指定的值。

• indexOf() 搜索数组中的元素，并返回它所在的位置。 isArray() 判断对象是否为数组。

• join() 把数组的所有元素放入一个字符串。 keys() 返回数组的可迭代对象，包含原始数组的键(key)。

• lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。 map() 通过指定函数处理数组的每个元素，并返回处理后的数组。

• pop() 删除数组的最后一个元素并返回删除的元素。 push() 向数组的末尾添加一个或更多元素，并返回新的长度。

• reduce() 将数组元素计算为一个值（从左到右）。 reduceRight() 将数组元素计算为一个值（从右到左）。

• reverse() 反转数组的元素顺序。 shift() 删除并返回数组的第一个元素。

• slice() 选取数组的一部分，并返回一个新数组。 some() 检测数组元素中是否有元素符合指定条件。

• sort() 对数组的元素进行排序。 splice() 从数组中添加或删除元素。 toString() 把数组转换为字符串，并返回结果。

• unshift() 向数组的开头添加一个或更多元素，并返回新的长度。 valueOf() 返回数组对象的原始值。