数组遍历的方法

112 阅读 0 评论 74 点赞

我是靠谱客的博主个性白开水，这篇文章主要介绍数组遍历的方法，现在分享给大家，希望可以做个参考。

1. for 循环

复制代码

1
2
3
4
5
let arr = [1, 2, 3]
for(let i = 0; i < arr.length; i++){
    console.log(arr[i]) 
}

2. forEach 方法

复制代码

1
2
3
4
5
6
7
8
9
10
const arr1 = [1, 2, 3, 4, 5];  //声明数组
arr1.forEach(function(item) {
    console.log(item)   //item为每一项，不是每一项的索引（切记）
})

//使用箭头函数
arr1.forEach(item => {
    console.log(item)   //item为每一项，不是每一项的索引（切记）
})

这个语法看起来要简洁很多，不需要通过索引去访问数组项，但缺点也很明显，不支持break，continue等

复制代码

1
2
3
4
5
6
7
8
9
10
[1,2,3,4,5].forEach(function(i){
  if (i === 3) {
    return;    //return时，打印结果：1，2，4，5
    //break;     //break时，Uncaught SyntaxError: Illegal break statement(语法错误)
    //continue;  //continue时，Uncaught SyntaxError: Illegal continue statement: no surrounding iteration statement
  } else {
    console.log(i)
  }
})

这段代码的 “本意” 是想从第一个元素开始遍历，遇到某一项等于3之后就结束遍历，否则打印出所遍历过的数组项。可是结果却是 “违背本意” ，因为它的输出为 1，2，4，5

注意：forEach 的代码块中不能使用 break、continue，它会抛出异常。

array.forEach(function(item, index, arr), thisValue)
参数：
function(item, index, arr) 必需 ----- item: （必需）当前元素 index: (可选) 当前元素的索引值 arr: （可选）当前元素所属的对象
thisValue: 当执行回调函数 function 时，用作 this 的值。
返回值：
undefined (没有返回值)

3. every 方法

every和forEach使用方法一样，不同的是every可以实现 break，continue 那样的效果。

简单的说， return false 等同于 break， return true 等同于 continue，如果不写，默认是 return false

复制代码

1
2
3
4
5
6
7
8
9
10
[1,2,3,4,5].every(function(i){
  if (i === 3) {
    return false
  } else {
    console.log(i)
    return true  //如果不写，默认是return false 结果为: 1
  }
})
结果： 1, 2

注意： every 的代码块中不能使用 break、continue，它会抛出异常。

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
array.every(function(currentValue,index,arr), thisValue)
返回值：
布尔值。如果所有元素都通过检测返回 true，否则返回 false。
举例：
[32, 33, 16, 40].every(item => {
return item < 35
})
结果： false

4. filter 方法

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。不会改变原数组

复制代码

1
2
3
4
5
6
7
8
const words = [1, 3, 4, 8, 5, 2];
const result = words.filter(word => {
  word = word + 3
  return word > 6
});
console.log(result);  // > Array [4, 8, 5]
console.log(words)   // > Array [1, 3, 4, 8, 5, 2]

可以用来筛选一个数组中符合条件的元素

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
参数：
callback: 用来测试数组的每个元素的函数。返回true表示该元素通过测试，保留该元素，false则不保留。参数与forEach()和every()等相同
thisArg：与forEach()和every()等相同
返回值：
一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

5. map 方法

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

复制代码

1
2
3
4
5
6
7
8
9
10
const array1 = [1, 4, 9, 16];
const map1 = array1.map(function(item) {
    return item * 2
})
//箭头函数
// const map1 = array1.map(item => item * 2);

console.log(map1);   // 输出：[2, 8, 18, 32]
console.log(array1);  //输出：[1, 4, 9, 16]

根据上述代码可以看出 map()不会改变原数组，会返回一个新数组。下面举一个我经常在敲代码时用map()实现的 看起来改变了原数组的例子

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const personList = [
    {name: 'aaa', age: 18},
    {name: 'bbb', age: 23},
    {name: 'ccc', age: 25}
]
// 看起来改变了原数组--修改（添加）对象数组中对象的某个属性
personList.map(item => {  //使用forEach()也可以实现  将map替换为forEach
    item.age += 1 // 修改
    item.gender = '男'  //添加
})
console.log(personList)
输出：
[
    {name: "aaa", age: 19, gender: "男"},
    {name: "bbb", age: 24, gender: "男"},
    {name: "ccc", age: 26, gender: "男"}
]

原数组为什么看起来改变了呢？？因为对象是引用类型，内存地址不变，这个对象就是不变的，而对对象的属性进行操作不会改变内存地址，所以原数组是没改变的

那用map()新生成的对象数组和原对象数组是不是浅拷贝呢？？？

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const personList = [
    {name: 'aaa', age: 18},
    {name: 'bbb', age: 23},
    {name: 'ccc', age: 25}
]
const newList = personList.map(item => {
    item.age += 1
    return item
})
console.log(newList)      //[{name: "aaa", age: 19},{name: "bbb", age: 24},{name: "ccc", age: 26}]
console.log(personList)  //[{name: "aaa", age: 19},{name: "bbb", age: 24},{name: "ccc", age: 26}]

新数组和原数组看起来一样，看一下改变新数组 ，原数组会改变吗？
newList[0].name = '哈哈哈哈哈哈'

console.log(newList)      //[{name: "哈哈哈哈哈哈", age: 19},{name: "bbb", age: 24},{name: "ccc", age: 26}]
console.log(personList)  //[{name: "哈哈哈哈哈哈", age: 19},{name: "bbb", age: 24},{name: "ccc", age: 26}]

根据结果可以看到，修改新数组会改变原数组

如何才能实现修改新数组不改变原数组呢？？？？（使用 map 重新格式化数组中的对象）

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const personList = [
    {name: 'aaa', age: 18},
    {name: 'bbb', age: 23},
    {name: 'ccc', age: 25}
]
const newList = personList.map(item => {
    const rObj = {}
    rObj.name = item.name
    rObj.age = item.age
    return rObj
})
console.log(newList)      //[{name: "aaa", age: 18},{name: "bbb", age: 23},{name: "ccc", age: 25}]
console.log(personList)  //[{name: "aaa", age: 18},{name: "bbb", age: 23},{name: "ccc", age: 25}]

newList[0].name = '哈哈哈哈哈哈'

console.log(newList)      //[{name: "哈哈哈哈哈哈", age: 18},{name: "bbb", age: 23},{name: "ccc", age: 25}]
console.log(personList)  //[{name: "aaa", age: 18},{name: "bbb", age: 23},{name: "ccc", age: 25}]

这样改变新数组就不会改变原数组了

语法和forEach()类似

6. for ... in

复制代码

1
2
3
4
5
6
7
8
9
10
var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

7. for ... of （重头戏）

复制代码

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

有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。

复制代码

1
2
3
4
for (variable of iterable) {
    //statements
}

迭代数组

复制代码

1
2
3
4
5
6
7
8
9
10
let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

迭代String

复制代码

1
2
3
4
5
6
7
8
9
let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

迭代Map

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

迭代Set

复制代码

1
2
3
4
5
6
7
8
9
let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

迭代arguments 对象

复制代码

1
2
3
4
5
6
7
8
9
10
(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

for-of 和 for-in 的区别

for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.

for-of 语句只遍历可迭代对象的数据。

最后

以上就是个性白开水最近收集整理的关于数组遍历的方法的全部内容，更多相关数组遍历内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：面试题
浏览次数：112 次浏览
发布日期：2023-05-18 12:38:01
本文链接：https://www.kaopuke.com/article/k-p-k_14_ujocfw_13__23__14_x.html

数组遍历的方法

1. for 循环

2. forEach 方法

3. every 方法

4. filter 方法

5. map 方法

6. for ... in

7. for ... of （重头戏）

迭代数组

迭代String

迭代Map

迭代Set

迭代arguments 对象

`for-of` 和 `for-in` 的区别

最后

评论列表共有 0 条评论

发表评论取消回复

数组遍历的方法

1. for 循环

2. forEach 方法

3. every 方法

4. filter 方法

5. map 方法

6. for ... in

7. for ... of （重头戏）

迭代数组

迭代String

迭代Map

迭代Set

迭代arguments 对象

for-of 和 for-in 的区别

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

`for-of` 和 `for-in` 的区别

发表评论取消回复