Home

主题

数组字符串其他方法（遍历方法&高阶函数） ​

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}`)
    // 可枚举属性：name
    // 可枚举属性：sex
}

console.log(`age属性：${foo.age}`)
// age属性：18

5.for…of ​

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

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

for-of循环也支持字符串遍历

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

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

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会去遍历判断是否数组中的每一项都满足条件，遇到不满足的直接停止遍历返回false

some则是当某一项满足条件时停止遍历，返回true。

// every
const foo = [5,1,3,7,4].every((item, index) => {
    console.log(`索引：${index}，数值：${item}`)
    // 索引：0，数值：5
    // 索引：1，数值：1
    return item > 2
})
console.log(foo) // false
 
// some
const foo = [5,1,3,7,4].some((item, index) => {
    console.log(`索引：${index}，数值：${item}`)
    // 索引：0，数值：5
    return item > 2
})
console.log(foo) // true

7.filter() ​

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。 它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。 该方法不会改变原数组。

const foo = [5,1,3,7,4].filter((item,index) => {
    console.log(`索引：${index}，数值：${item}`)
    // 索引：0，数值：5
    // 索引：1，数值：1
    // 索引：2，数值：3
    // 索引：3，数值：7
    // 索引：4，数值：4
    return item > 2
})
console.log(foo) // [5, 3, 7, 4]

8.map() ​

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

map：支持return，相当与原数组克隆了一份，把克隆的每项改变了，也不影响原数组。

const foo = [5,1,3,7,4].map((item,index) => {
    console.log(`索引：${index}，数值：${item}`)
    // 索引：0，数值：5
    // 索引：1，数值：1
    // 索引：2，数值：3
    // 索引：3，数值：7
    // 索引：4，数值：4
    return item + 2
})
console.log(foo) // [7, 3, 5, 9, 6]

9.reduce() / reduceRight() ​

reduce() 从左到右将数组元素做“叠加”处理，返回一个值。

reduceRight() 从右到左。

const foo = [5,1,3,7,4].reduce((total, cur) => {
    console.log(`叠加：${total}，当前：${cur}`)
    // 叠加：5，当前：1
    // 叠加：6，当前：3
    // 叠加：9，当前：7
    // 叠加：16，当前：4
    return total + cur
})
console.log(foo) // 20
// 计算并返回给定数组 arr 中所有元素的总和
function sum(arr) {
    let a = arr.reduce((total, num) => {
        return total + num
    })
    return a
}

let arr = [1, 2, 3, 4];
console.log(sum(arr)); // 10

10.Object.keys(obj)遍历对象的属性 ​

Object.keys方法的参数是一个对象，返回一个数组。

该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

const obj = {
    p1: 123,
    p2: 456
};
Object.defineProperty(obj, "age", { value : 18 })

// 只返回可枚举的属性
console.log(obj); // { p1: 123, p2: 456 }
console.log(obj.age); // 18

// 只返回可枚举的属性
const a = Object.keys(obj)
console.log(a); // ["p1", "p2"]

11.Object.getOwnPropertyNames() 遍历对象的属性 ​

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

const obj = {
    p1: 123,
    p2: 456
};
Object.defineProperty(obj, "age", { value : 18 })

// 只返回可枚举的属性
console.log(obj); // { p1: 123, p2: 456 }
console.log(obj.age); // 18

// 可返回不可枚举的属性
const a = Object.getOwnPropertyNames(obj)
console.log(a); // ["p1", "p2"]

以上遍历方法的区别 ​

一：map()，filter()，forEach()循环的共同之处 ​

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

Released under the MIT License.

Copyright © 2018-present raopan 饶盼 base on VitePress 2.0.0-alpha.17