JS 常用遍历方法&高阶函数
关于JS的一些总结, 持续更新中……
1.for()
最常用的for循环，经常用的数组遍历，也可以遍历字符串。
const arr = [1, 2, 3];
const str = "abc";
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
console.log(str[i]);
}
2.while() / do while()
while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 **do while**至少会执行一次操作.
while(条件){
执行...
}
------------
do{
执行...
}
while(条件)
3.forEach()
拷贝一份遍历原数组。
return无法终止循环。不过可以起到continue效果。- 本身是不支持的
continue与break语句的我们可以通过some和every来实现。
const arr = [5, 1, 3, 7, 4];
arr.forEach((item, index) => {
if (item < 2) return;
console.log(`索引：${index}，数值：${item}`);
arr[5] = 0;
});
console.log(arr);
// 打印结果：
// 索引：0，数值：5
// 索引：2，数值：3
// 索引：3，数值：7
// 索引：4，数值：4
// [5, 1, 3, 7, 4, 0]
4.for...in
for...in是 ES5 标准， 此方法遍历数组效率低，主要是用来循环遍历对象的属性。- 遍历数组的缺点：数组的下标
index值是数字，for-in遍历的index值"0","1","2"等是字符串。 Object.defineProperty，建立的属性，默认不可枚举。
const foo = {
name: "bar",
sex: "male",
};
Object.defineProperty(foo, "age", { value: 18 });
for (const key in foo) {
console.log(`可枚举属性：${key}`);
}
console.log(`age属性：${foo.age}`);
// 打印结果：
// 可枚举属性：name
// 可枚举属性：sex
// age属性：18
5.for...of
for…of是ES6新增的方法，但是for…of不能去遍历普通的对象，**for…of**的好处是可以使用**break**跳出循环。
for-of这个方法避开了for-in循环的所有缺陷- 与
forEach()不同的是，它可以正确响应break、continue和return语句 for-of循环不仅支持数组，还支持大多数类数组对象，例如DOMNodeList 对象[6]。-
for-of循环也支持字符串遍历
// for of 循环直接得到的就是值
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value);
}
面试官：说一下 **for...in** 和 **for...of** 区别？
（1）for…in 用于可枚举数据，如对象、数组、字符串
（2）for…of 用于可迭代数据，如数组、字符串、Map、Set
6.every / some
返回一个布尔值。当我们需要判定数组中的元素是否满足某些条件时，可以使用every / some。这两个的区别是，every会去判断判断数组中的每一项，而 some则是当某一项满足条件时返回。
// every
const foo = [5, 1, 3, 7, 4].every((item, index) => {
console.log(`索引：${index}，数值：${item}`);
return item > 2;
});
console.log(foo);
// every 打印：
// 索引：0，数值：5
// 索引：1，数值：1
// false
// some
const foo = [5, 1, 3, 7, 4].some((item, index) => {
console.log(`索引：${index}，数值：${item}`);
return item > 2;
});
console.log(foo);
// some 打印：
// 索引：0，数值：5
// true
7.filter()
filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。- 它的参数是一个函数，所有数组成员依次执行该函数，返回结果为
true的成员组成一个新数组返回。 - 该方法不会改变原数组。
const foo = [5, 1, 3, 7, 4].filter((item, index) => {
console.log(`索引：${index}，数值：${item}`);
return item > 2;
});
console.log(foo);
// 打印结果：
// 索引：0，数值：5
// 索引：1，数值：1
// 索引：2，数值：3
// 索引：3，数值：7
// 索引：4，数值：4
// [5, 3, 7, 4]
8.map()
map即是 “映射”的意思 ，原数组被“映射”成对应新数组。map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组。
const foo = [5, 1, 3, 7, 4].map((item, index) => {
console.log(`索引：${index}，数值：${item}`);
return item + 2;
});
console.log(foo);
// 打印结果：
// 索引：0，数值：5
// 索引：1，数值：1
// 索引：2，数值：3
// 索引：3，数值：7
// 索引：4，数值：4
// [7, 3, 5, 9, 6]
9. reduce() / reduceRight()
reduce 从左到右将数组元素做“叠加”处理，返回一个值。reduceRight 从右到左。
const foo = [5, 1, 3, 7, 4].reduce((total, cur) => {
console.log(`叠加：${total}，当前：${cur}`);
return total + cur;
});
console.log(foo);
// 打印结果：
// 叠加：5，当前：1
// 叠加：6，当前：3
// 叠加：9，当前：7
// 叠加：16，当前：4
// 20
10.Object,keys 遍历对象的属性
Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。
const obj = {
p1: 123,
p2: 456,
};
Object.keys(obj); // ["p1", "p2"]
11.Object.getOwnPropertyNames() 遍历对象的属性
Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。
const arr = ["Hello", "World"];
Object.keys(arr); // ["0", "1"]
Object.getOwnPropertyNames(arr); // ["0", "1", "length"]
以上遍历方法的区别：
一：map()，forEach()，filter()循环的共同之处：
1.forEach，map，filter循环中途是无法停止的，总是会将所有成员遍历完。
2.他们都可以接受第二个参数，用来绑定回调函数内部的 this 变量，将回调函数内部的 this 对象，指向第二个参数，间接操作这个参数（一般是数组）。
二：map()、filter()循环和forEach()循环的不同：
forEach 循环没有返回值；map，filter 循环有返回值。
三：map()和filter()都会跳过空位，for 和 while 不会
四：some()和every():
some()只要有一个是true，便返回true；而every()只要有一个是false，便返回false.
五：reduce()，reduceRight()：
reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员）。
六：Object对象的两个遍历 Object.keys 与 Object.getOwnPropertyNames：
他们都是遍历对象的属性，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但Object.keys不能返回不可枚举的属性；Object.getOwnPropertyNames能返回不可枚举的属性。