常用数据遍历的方法

---

部分参考学习了大神的思想

1.forEach (无返回值,修改功能):只能用于数组 (正在遍历的元素，索引，数组本身)

遍历纯数组

var arr = [“hellow”, “c#”, “javascript”];
//(当前正在遍历的元素，当前索引，正在遍历的数组)
arr.forEach(function (value, index, arr) {
   console.log(value, index, arr);
});
输出：

遍历对象数组

let obj_arr = [
  {
    id: "20200101",
    name: "张三",
    birth: "2000-10-03",
    sex: "男",
    job: "计算机",
  },
  {
    id: "20200102",
    name: "李四",
    birth: "2000-11-03",
    sex: "男",
    job: "旅游",
  },
  {
    id: "20200103",
    name: "王五",
    birth: "2000-11-05",
    sex: "女",
    job: "科技",
  },
];
obj_arr.forEach(function (value, index, arr) {
  console.log(value, index, arr);
});

输出：

---

2.filter()筛选(不会修改原数组)： 只用于数组,过滤出数组中满足条件的项，并组成新的数组返回

对数组过滤

var arr = [1, 2, 3, 4, 5, 6];
通过filter函数遍历数组，数组中的元素会依次赋值给回调函数的形参value (当前正在遍历的元素，当前索引，正在遍历的数组)
let result = arr.filter(function (value, index, arr) {
   console.log(value, index, arr);
   //当元素满足条件返回true，元素被保留，否则元素被舍弃
   return value > 3 ? true : false;
});
result为：[4, 5, 6]

对对象数组过滤

let objArr = [
  { id: 1, label: "影视" },
  { id: 2, label: "动漫" },
  { id: 3, label: "音乐" },
];
let result = objArr.filter((val, index, arr) => {
  console.log(val, index, arr);
  return val.label === "音乐";
});

result为：{id: 3, label: “音乐”}
输出：

---

3.find()、findIndex()(不会修改原数组)找出第一个符合条件的数组成员并返回该 值/索引

let num = [1, 2, -10, -20, 3, 4];

find()：返回第一个符合条件的值
let new_num = num.find((n) => n < 0);
new_num为：-10 ;

findIndex()：返回第一个符合条件的索引
let new_num_index = num.findIndex((n) => n < 0);
new_num_index为：2 ;

---

4.every()：数组中每一项都满足条件才能返回true (正在遍历的元素，当前索引，数组本身）

对数组检查

如果该数组里的元素全部大于0，则返回ture
let arr = [1, 2, 3, 4, 5];
let result = arr.every(function (val, index, arr) {
   console.log(val, index, arr);
   return val >= 0 ? true : false;
});
result为：ture
输出：

对对象数组检查

检查任务是否全部完成

let objArr = [
  { id: 1, word: "学习", isOk: true },
  { id: 2, word: "睡觉", isOk: false },
  { id: 3, word: "听音乐", isOk: true },
];
let isAllOK = objArr.every(function (val, index) {
  return val.isOk;
});

result为：false

---

5.some()：数组中有一个满足指定条件就返回true (正在遍历的元素，当前索引，数组本身）

对数组检查

如果该数组里的元素有一个大于或等于0，则返回ture
let arr = [-1, -2, 0];
let result = arr.some(function (val, index, arr) {
    console.log(val, index, arr);
    return val >= 0 ? true : false;
});
result为：ture
输出：

---

6.reduce()、reduceRight() 统计数组：(累计器,当前值,当前下标,该数组本身)

注意：如果没有设置累计器的初始值，则会把数据的第一个值作为累计器的值，数组值和对应的索引从1开始执行reduceRight(); 执行方向相反的统计数组

对数组统计

let arr = [1, 15, 23, 4, 56];
统计数组中大于10的数有几个
let result = arr.reduce(function (num, val, index, arr) {
    console.log(num, val, index, arr);
    if (val > 10) {
      num++;
    }
return num;
}, 0);
result为：3
输出：

对对象数组统计

统计对象数组中已完成的任务有几个

let objArr = [
  { id: 1, word: "学习", isOk: true },
  { id: 2, word: "睡觉", isOk: false },
  { id: 3, word: "听音乐", isOk: true },
];
let result = objArr.reduce(function (num, val) {
  console.log(num, val);
  if (val.isOk) {
    num++;
  }
  return num;
}, 0);
console.log(result);

result为：2
输出：

---

7.map()方法(不改变原数组)：

map函数的原理和forEach类似，但map会自动将每次遍历的返回值加入新数组，最后返回新数组

对数组修改

var a = [0, 3, 5, 4, 2, 7, 6];
let result = a.map((val, index, arr) => {
   return val + 1; // 把元素数组里的元素逐个加1，再自动加入到新数组中
});
result为：[1, 4, 6, 5, 3, 8, 7]

对对象数组修改

let objArr = [
  { id: 1, name: "xm", money: 110 },
  { id: 2, name: "ls", money: 120 },
  { id: 3, name: "zs", money: 130 },
];
let result = objArr.map((val, index) => {
  let obj2 = { ...val };
  obj2.money += 100;
  return obj2;
});

result为：

---

8.es6中的entries()和next(): 一步步遍历

数据：

let arr = [
  {
    week: "星期一",
    time: "12:00",
  },
  {
    week: "星期二",
    time: "11:00",
  },
];

let result = arr.entries();
console.log(result.next().value[1]);    //{week:‘星期一’,time:‘12:00’}
console.log(result.next().value[1]);    //{week:‘星期二’,time:“11:00”}
console.log(result.next().value[1]);    //undefined

---

9.for in 循环 (常用于对象)(获得键名)

遍历纯对象型数据(获得键名)

let obj = {
    name: “yrh”,
    age: 19,
    sex: “男”,
};
for (let key in obj) {
    console.log(key, obj[key]);
}
输出：

遍历纯数组

var arr = [ “yrh”, 21 , “男”];
for (let key in arr) {
    console.log(key, arr[key]);
}
输出：

遍历对象数组

var obj_arr = [
    { name: “zs”, age: 12, sex: “男” },
    { name: “ls”, age: 16, sex: “女” },
];
for (let key in obj_arr) {
    console.log(key, obj_arr[key]);
}
输出：

---

10.for of 循环：不能用于对象 (常用于对象数组)

遍历纯数组型数据

var arr = [“yrh”, 21, “男”];
for (let value of arr) {
    console.log(value);
}
输出：

遍历二维数组

let arr = [
    [“username”, “张三”],
    [“age”, “18”],
];
for (let [key, val] of arr) {
    console.log(“键：” + key + “;值：” + val);
}
输出：

遍历对象数组

let obj_arr = [
  {
    id: "20200101",
    name: "张三",
    birth: "2000-10-03",
    sex: "男",
    job: "计算机",
  },
  {
    id: "20200102",
    name: "李四",
    birth: "2000-11-03",
    sex: "男",
    job: "旅游",
  },
  {
    id: "20200103",
    name: "王五",
    birth: "2000-11-05",
    sex: "女",
    job: "科技",
  },
];
for (let stu of obj_arr) {
  console.log(stu, stu["name"], stu.birth);
}

输出：

---

11.entries(),keys()以及values():对键值对的遍历

let person = [
  { id: 1, name: “zs”, age: 12 },
  { id: 2, name: “zs”, age: 12 },
  { id: 3, name: “zs”, age: 12 },
];

1.entries()遍历键值对

for (let [index, val]   of   person.entries()) {
    console.log(index, val);
}
输出：

2.values()遍历键值（默认）

for (let val   of   person.values()) {
    console.log(val);
}
输出：

3.key()遍历键名

for (let index   of   person.keys()) {
    console.log(index);
}
输出：

---

12.call,apply,bind：修改this，函数的调用者

call,apply,bind作用一样,只是它们的传参方式不同。
call和apply都有调用方法的特点，bind还有另外调用。
dog.eat.call(cat, "鱼", "肉"); dog.eat.apply(cat, ["鱼", "肉"]); dog.eat.bind(cat,"鱼", "肉");

let dog = {
  name: "旺财",
  sayName() {
    console.log("我是", this.name);
  },
  eat(food1, food2) {
    console.log("我喜欢吃", food1 + food2);
  },
};
let cat = {
  name: "喵喵",
};
// call可以调用函数，call可以改变函数中this指向
// dog.sayName.call(cat);  //输出：我是喵喵
// dog.eat.apply(cat, ["鱼", "肉"]);
let fun = dog.sayName.bind(cat);
fun(); //输出：我喜欢吃鱼肉