遍历数组、对象的方法

遍历数组

for、for …of、forEach

const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

for (let i = 0, len = list.length; i < len; i++) {
  if (list[i] === 5) {
    break;
    // continue;
  }
  console.log(list[i]);
    //[1,2,3,4] break
    //[1,2,3,4,6,7,8,undefined,10,11] continue
}

for (const item of list) {
  if (item === 5) {
    break; 
    // continue;
  }
  console.log(item);
    //[1,2,3,4] break
    //[1,2,3,4,6,7,8,undefined,10,11] continue
}

list.forEach((item, index, arr) => {
  if (item === 5) return;
  console.log(index); //[0,1,2,3,4,5,6,7,8,9,10]
  // console.log(item);//[1, 2, 3, 4, 5, 6, 7, 8, 10, 11]
});

• for …of 直接访问的是实际元素。for 遍历数组索引，forEach 回调函数参数更丰富，元素、索引、原数组都可以获取，且不改变原数组 没有返回值。

• for …of 与 for 如果数组中存在空元素，同样会执行。

• for of 方法适用遍历 数组/ 类数组/字符串/map/set 等拥有迭代器对象的集合

• forEach 无法跳出循环；for 和 for …of 可以使用 break 或者 continue 跳过或中断

filter、map

const data = [
  { name: '头部导航', type: 'nav', id: 1 },,
  { name: '轮播', type: 'content', id: 2 },
  { name: '页脚', type: 'nav', id: 3 },
];
const resultList = data.filter(item => {
  return item.type === 'nav';
});
console.log(resultList)
//0: {name: '头部导航', type: 'nav', id: 1}
//1: {name: '页脚', type: 'nav', id: 3}

const newList = data.map(item => {
  return item.id;
});
console.log(newList);
//0: 1
//2: 2
//3: 3

• 二者都是生成一个新数组，都不会改变原数组

• 二者都会跳过空元素。

• map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致。

• filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同。

• map 生成的新数组元素是可自定义。

• filter 生成的新数组元素不可自定义，与对应原数组元素一致。

some、every

const list = [
  { name: '头部导航', backward: false },
  { name: '轮播', backward: true },
  { name: '页脚', backward: false },
];
const someBackward = list.some((currentValue,index,arr) => currentValue.backward);
// someBackward: true
const everyNewest = list.every((currentValue,index,arr) => !currentValue.backward);
// everyNewest: false

• 两个方法都不会改变原数组，会返回一个布尔值；

• 两个方法都不会对空数组进行检测；

• some:若某一元素满足条件，返回 true，循环中断；所有元素不满足条件，返回 false。

• every:若有一元素不满足条件，返回 false，循环中断；所有元素满足条件，返回 true。

• 回调函数接收三个参数:

• • currentValue：必须。当前元素的值；
  • index：可选。当前元素的索引值；
  • arr：可选。当前元素属于的数组对象。

find、findIndex

const list = [
  { name: '头部导航', id: 1 },
  { name: '轮播', id: 2 },
  { name: '页脚', id: 3 },
];
const result = list.find((item) => item.id === 3);
console.log(result)
//{name: '页脚', id: 3}

const index = list.findIndex((item) => item.id === 3);
console.log(index)
//2

• 二者都是用来查找数组元素。

• find 方法返回数组中满足 callback 函数的第一个元素的值，如果不存在返回 undefined。

• findIndex 它返回数组中找到的元素的索引，而不是其值，如果不存在返回 -1。

reduce、reduceRight

let arr = [1, 2, 3, 4]
let sum = arr.reduce((total, cur, index, arr) => {
    console.log(total, cur, index);
    return total + cur;
})
console.log(arr, sum);//[1, 2, 3, 4] 10
//1 2 1
//3 3 2
//6 4 3

let arr = [1, 2, 3, 4]
let sum = arr.reduceRight((total, cur, index, arr) => {
    console.log(total, cur, index);
    return total + cur;
}, 5)
console.log(arr, sum);//[1, 2, 3, 4] 15
//5 4 3
//9 3 2
//12 2 1
//14 1 0

• reduce 方法接收两个参数，第一个参数是回调函数（callback） ，第二个参数是初始值（initialValue),回调函数接收四个参数：

• • total：上一次调用回调返回的值，或者是提供的初始值（initialValue）；

  • currentValue：当前被处理的元素；

  • currentIndex：当前元素的索引；

  • arr：当前元素所属的数组对象。

keys()、values()、entries()

let arr = ["Banana", "Orange", "Apple", "Mango"];
const iterator1 = arr.keys();
const iterator2 = arr.values() 
const iterator3 = arr.entries() 

for (let item of iterator1) {
  console.log(item);//0 1 2 3
}


for (let item of iterator2) {
  console.log(item);//Banana Orange Apple Mango
}


for (let item of iterator3) {
  console.log(item);//[0, 'Banana'][1, 'Orange'][2, 'Apple'][3, 'Mango']
}

• keys() 返回数组的索引值；values() 返回数组元素；entries() 返回数组的键值对

遍历对象

for…in

Object.prototype.fun = () => {};
const obj = { 1: 'a', 2: 'b' };
for (const i in obj) {  
  console.log(i, ':', obj[i]);
    //1 : a
    //2 : b
    //fun : () => {}
}
for (const i in obj) {  
  if (Object.prototype.hasOwnProperty.call(obj, i)) {     
    console.log(i, ':', obj[i]); 
     //1 : a
     //2 : b
  }
}

• for in 方法不仅会遍历当前的对象所有的可枚举属性，还会遍历其原型链上的属性。

Object/keys()、Object.values()、Object.entries()

let obj = { 
  id: 1, 
  name: 'hello', 
  age: 18 
};
console.log(Object.keys(obj)); //['id', 'name', 'age']
console.log(Object.values(obj)); //[1, 'hello', 18]
console.log(Object.entries(obj)); //['id', 1]['name', 'hello']['age', 18]

• 这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性（不含继承的和Symbol属性）组成的数组

• Object.keys()：返回包含对象键名的数组；

• Object.values()：返回包含对象键值的数组；

• Object.entries()：返回包含对象键名和键值的数组。