JS遍历总结

2021-05-25 09:35:17   12  举报





AI智能生成

JavaScript遍历主要有三种方式：for循环、forEach方法和map方法。for循环是最基础的遍历方式，通过设置起始值、结束值和步长来控制遍历过程。forEach方法是数组自带的遍历方法，可以直接对数组中的每个元素进行操作。map方法也是数组自带的遍历方法，但它会返回一个新的数组，不会改变原数组。此外，JavaScript还提供了一些其他遍历方法，如some、every、filter等，它们都接受一个回调函数作为参数，用于对数组中的每个元素进行判断或处理。总之，JavaScript提供了丰富的遍历方式，可以根据具体需求选择合适的方法来实现遍历操作。

javascript

数组

对象

遍历

前端开发

作者其他创作

大纲/内容

对象遍历

Object.keys()（推荐）

var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
console.log(key,obj[key]);
});

返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

forin（推荐）

var obj = {'0':'a','1':'b','2':'c'};

for(var i in obj) {

console.log(i,":",obj[i]);

}

循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).

Object.getOwnPropertyNames(obj)（推荐）

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){

console.log(key,obj[key]);

});

返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

Reflect.ownKeys(obj)

var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){

console.log(key,obj[key]);

});

返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

数组遍历

for（推荐）

for(j = 0,len=arr.length; j < len; j++) {}

当数组较大时优化效果才会比较明显

foreach（推荐）

arr.forEach((item,index,array)=>{}

item数组中的当前项, index当前项的索引, array原始数组

没有返回值

数组中有几项，那么传递进去的匿名回调函数就需要执行几次

map

arr.map(function(value,index,array){}

map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）

forof（推荐）

for (var value of myArray) {
console.log(value);
}

可以正确响应break、continue和return语句

ES6中，新增了for-of遍历方法。它被设计用来遍历各种类数组集合，例如DOM NodeList对象、Map和Set对象，甚至字符串也行

// for-of遍历数组，不带索引，i即为数组元素
for(let i of arrTmp){
console.log(i)
}
//输出 "value1" "value2" "value3"

// for-of遍历Map对象
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
//输出 1 2 3

// for-of遍历字符串
let iterable = "china中国";
for (let value of iterable) {
console.log(value);
}
//输出 "c" "h" "i" "n" "a" "中" "国"

这种方式是es6里面用到的，性能要好于for…in，但仍然比不上普通for循环。

该种方式通常是直接获取显性的值，而无法直接获取索引。

forin（推荐）

var arr=["张三","李四","王五","赵六"];

for (var i in arr){

console.log(i,":",arr[i]);

}

filter

var arr = [
{ id: 1, text: 'aa', done: true },
{ id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))

不会改变原始数组,返回新数组

every

var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.every( function( item, index, array ){
return item > 3;
}));
false

every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。

some

var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){
return item > 3;
}));
true

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

reduce

var total = [0,1,2,3,4].reduce((a, b)=>a + b); //10

reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
});

reduce接受一个函数，函数有四个参数，分别是：上一次的值，当前值，当前值的索引，数组

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
},5);

reduce还有第二个参数，我们可以把这个参数作为第一次调用callback时的第一个参数

reduceRight

var arr = [0,1,2,3,4];
arr.reduceRight(function (preValue,curValue,index,array) {
return preValue + curValue;
}); // 10

reduceRight()方法的功能和reduce()功能是一样的，不同的是reduceRight()从数组的末尾向前将数组中的数组项做累加。

find

var stu = [
{
name: '张三',
gender: '男',
age: 20
},
{
name: '王小毛',
gender: '男',
age: 20
},
{
name: '李四',
gender: '男',
age: 20
}
]

stu.find((element) => (element.name == '李四'))

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

findIndex

[1,2,3].findIndex(x => x == 4);
// Returns an index value of -1.

对于数组中的每个元素，findIndex 方法都会调用一次回调函数（采用升序索引顺序），直到有元素返回 true。只要有一个元素返回 true，findIndex 立即返回该返回 true 的元素的索引值。如果数组中没有任何元素返回 true，则 findIndex 返回 -1

findIndex 不会改变数组对象。

keys，values，entries

for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历