循环和迭代

Mr.Liu大约 6 分钟

循环和迭代

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])
}

while() / do while()

while、do while主要的功能是，当满足while后边所跟的条件时，来执行相关业务。这两个的区别是，while会先判断是否满足条件，然后再去执行花括号里面的任务，而do while则是先执行一次花括号中的任务，再去执行while条件，判断下次还是否再去执行do里面的操作。也就是说 do while至少会执行一次操作.

while(条件){
     执行...
}
------------
do{
    执行...
}
while(条件)

map()

1、map即是 “映射”的意思，原数组被“映射”成对应新数组。

2、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]

forEach()

拷贝一份遍历原数组。

1、return无法终止循环。不过可以起到continue效果。

2、本身是不支持的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]

for...in

1、for...in 是 ES5 标准，此方法遍历数组效率低，主要是用来循环遍历对象的属性。

2、遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串。

3、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

for...of

for…of是ES6新增的方法，但是for…of不能去遍历普通的对象，for…of的好处是可以使用break跳出循环。

1、for-of这个方法避开了for-in循环的所有缺陷

2、与forEach()不同的是，它可以正确响应break、continue和return语句

3、for-of循环不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象。

4、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

every() 元素是否全满足

依据判断条件，数组的元素是否全满足，若满足则返回ture

let arr = [1,2,3,4,5]
let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1) // false
let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2) // true

some() 元素是否满足一个

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture *可以做元素在不在数组中的验证

let arr = [1,2,3,4,5]
let arr1 = arr.some( (i, v) => i < 3)
console.log(arr1) // true
let arr2 = arr.some( (i, v) => i > 10)
console.log(arr2) // false

filter() 过滤数组

1、filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

2、它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。

3、该方法不会改变原数组

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]

obj.keys() 遍历数组键名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
    console.log(key); // 0,1,2,3
}

obj.getOwnPropertyNames() 遍历对象的属性

Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回不可枚举的属性。

const arr = ['Hello', 'World'];
Object.keys(arr) // ["0", "1"]
Object.getOwnPropertyNames(arr) // ["0", "1", "length"]

obj.values() 遍历数组键值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
    console.log(val); // 1,2,3,4
}

obj.entries() 遍历数组键名和键值

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
`console.log(e); // 1,2,3,4
}

reduce()计算数组相加后的总和

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 reduce() 可以作为一个高阶函数，用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。 案例一

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    console.log(numbers.reduce(getSum))//125
}

案例二

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

reduceRight()计算数组相加后的总和

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。注意: reduce() 对于空数组是不会执行回调函数的。

var numbers = [65, 44, 12, 4];
 
function getSum(total, num) {
    return total + num;
}
function myFunction(item) {
    console.log(numbers.reduceRight(getSum))//125
}

valueOf() 返回数组的原始值

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf();
console.log(v)//Banana,Orange,Apple,Mango

遍历方法的区别

一：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能返回不可枚举的属性。