Js中遍历数组和对象的常用方法(含ES6)

数组遍历

for、forEach()、for ...of

三者都是基本的由左到右遍历数组

for             遍历数组索引

forEach()     回调函数参数更丰富，元素、索引、原数组都可以获取。(无法跳出循环)

for ...of     遍历数组元素。

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

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

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

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

some()、every()

二者都是用来做数组条件判断的，都是返回一个布尔值
二者都可以被中断

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

every() 与 some() 相反：若有某一个元素不满足条件，返回 false，循环中断；所有元素满足条件，返回 true。

const list = [
  { name: "头部导航", backward: false },

  { name: "轮播", backward: true },

  { name: "页脚", backward: false },
];

const someBackward = list.some((item) => item.backward); // someBackward: true

const everyNewest = list.every((item) => !item.backward); // everyNewest: false

filter()、map()

二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组，是在回调函数中操作元素对象）
二者都会跳过空元素。

map()      会将回调函数的返回值组成一个新数组，数组长度与原数组一致,生成的新数组元素是可自定义。

filter()     会将符合回调函数条件的元素组成一个新数组，数组长度与原数组不同,生成的新数组元素不可自定义，与对应原数组元素一致。

//.filter()
const list = [
  { name: "头部导航", type: "nav", id: 1 },
   empty,
  { name: "轮播", type: "content", id: 2 },
  { name: "页脚", type: "nav", id: 3 },
];

const resultList = list.filter((item) => {
  console.log(item);
  return item.type === "nav";
});

// resultList: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

//.map()
const newList = list.map((item) => {
  console.log(item);
  return item.id;
});

// newList: [1, empty, 2, 3]

find()、findIndex()

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

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

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

const list = [
  { name: "头部导航", id: 1 },
  { name: "轮播", id: 2 },
  { name: "页脚", id: 3 },
];

const result = list.find((item) => item.id === 3); // result: { name: '页脚', id: 3 }

result.name = "底部导航";

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

list[index].name; // '底部导航';

对象遍历

for ...in

使用 for in 循环时，返回的是所有能够通过对象访问的、可枚举的属性，既包括存在于实例中的属性，也包括存在于原型中可枚举的属性。如果只需要获取对象的实例属性，可以使用 hasOwnProperty 进行过滤。

Object.prototype.fun = () => { };

const obj = { a: 11, b: 22 };
for (const i in obj) {
  console.log(i, ":", obj[i]);
}
// a: 11
// b: 22
// fun : () => {} 

// 进行过滤,不属于自身的属性将被 hasOwnProperty 过滤
for (const i in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, i)) {
      console.log(i, ":", obj[i]);
  }
} 
// a: 11
// b: 22

Object.keys()

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。

Object.prototype.fun = () => {};

const str = "ab";
console.log(Object.keys(str)); // ['0', '1']

const arr = ["a", "b"];
console.log(Object.keys(arr)); // ['0', '1']

const obj = { a: 11, b: 22 };
console.log(Object.keys(obj)); // ['a', 'b']

Object.values()

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性值组成的数组。

Object.prototype.fun = () => {};

const str = "ab";
console.log(Object.values(str)); // ['a', 'b']

const arr = [11, 22];
console.log(Object.values(arr)); // [11, 22]

const obj = { a: 11, b: 22 };
console.log(Object.values(obj)); // [11, 22]

Object.getOwnPropertyNames()

用于获取对象自身所有的可枚举的属性值，但不包括原型中的属性，然后返回一个由属性名组成的数组。

Object.prototype.fun = () => {};
Array.prototype.fun = () => {};

const str = "ab";
console.log(Object.getOwnPropertyNames(str)); // ['0', '1', 'length']

const arr = ["a", "b"];
console.log(Object.getOwnPropertyNames(arr)); // ['0', '1', 'length']

const obj = { a: 11, b: 22 };
console.log(Object.getOwnPropertyNames(obj)); // ['a', 'b']