js 中数组、对象遍历方法总结

文章目录

- 数组方法
- 类数组及对象应用
- 对象应用补充

数组方法

push()

功能：向数组的末尾添加一个或多个元素，并返回新的长度。
示例：

javascript">let arr = [1, 2, 3];
let newLength = arr.push(4);
console.log(arr); // [1, 2, 3, 4]
console.log(newLength); // 4

pop()

功能：从数组的末尾删除一个元素，并返回该元素的值。
示例：

javascript">let arr = [1, 2, 3];
let lastElement = arr.pop();
console.log(arr); // [1, 2]
console.log(lastElement); // 3

shift()

功能：从数组的开头删除一个元素，并返回该元素的值。
示例：

javascript">let arr = [1, 2, 3];
let firstElement = arr.shift();
console.log(arr); // [2, 3]
console.log(firstElement); // 1

unshift()

功能：向数组的开头添加一个或多个元素，并返回新的长度。
示例：

javascript">let arr = [1, 2, 3];
let newLength = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(newLength); // 4

splice()

功能：用于添加或删除数组中的元素。它可以接受三个参数：起始索引、要删除的元素个数和要添加的元素。
示例1（删除元素）：

javascript">let arr = [1, 2, 3, 4, 5];
arr.splice(2, 2);
console.log(arr); // [1, 2, 5]

示例2（添加元素）：

javascript">let arr = [1, 2, 3];
arr.splice(1, 0, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 2, 3]

slice()
- 功能：返回一个新的数组，包含从开始索引到结束索引（不包括结束索引）的元素。
- 示例：
```
javascript">let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 4);
console.log(newArr); // [2, 3, 4]
```

concat()

功能：用于合并两个或多个数组，并返回一个新的数组。
示例：

javascript">let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4, 5, 6]

join()
- 功能：将数组中的所有元素连接成一个字符串，返回连接后的字符串。
- 示例：
```
javascript">let arr = [1, 2, 3];
let str = arr.join('-');
console.log(str); // 1-2-3
```

reverse()

功能：颠倒数组中元素的顺序，并返回颠倒后的数组。
示例：

javascript">let arr = [1, 2, 3];
let reversedArr = arr.reverse();
console.log(arr); // [3, 2, 1]
console.log(reversedArr); // [3, 2, 1]

sort()

功能：对数组的元素进行排序，并返回排序后的数组。默认情况下，它会将元素转换为字符串，然后按照Unicode码点顺序进行排序。
示例：

javascript">let arr = [3, 1, 2];
let sortedArr = arr.sort();
console.log(arr); // [1, 2, 3]
console.log(sortedArr); // [1, 2, 3]

如果要按照数字大小进行排序，可以传递一个比较函数：

javascript">let arr = [3, 1, 2];
let sortedArr = arr.sort((a, b) => a - b);
console.log(arr); // [1, 2, 3]
console.log(sortedArr); // [1, 2, 3]

indexOf()

功能：返回数组中指定元素第一次出现的索引，如果不存在则返回 - 1。
示例：

javascript">let arr = [1, 2, 3, 2];
let index = arr.indexOf(2);
console.log(index); // 1

lastIndexOf()

功能：返回数组中指定元素最后一次出现的索引，如果不存在则返回 - 1。
示例：

javascript">let arr = [1, 2, 3, 2];
let index = arr.lastIndexOf(2);
console.log(index); // 3

forEach()

功能：对数组中的每个元素执行一次提供的函数。
示例：

javascript">let arr = [1, 2, 3];
arr.forEach((element) => {console.log(element * 2);
});
// 输出：2、4、6

map()

功能：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。
示例：

javascript">let arr = [1, 2, 3];
let newArr = arr.map((element) => element * 2);
console.log(newArr); // [2, 4, 6]

filter()

功能：创建一个新数组，包含通过所提供函数实现的测试的所有元素。
示例：

javascript">let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter((element) => element % 2 === 0);
console.log(newArr); // [2, 4]

reduce()

功能：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
示例：

javascript">let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator+currentValue, 0);
console.log(sum); // 10

find()

功能：返回数组中满足提供的测试函数的第一个元素的值。如果没有找到，则返回undefined。
示例：

javascript">let arr = [5, 12, 8, 130, 44];
let found = arr.find((element) => element > 10);
console.log(found); // 12

findIndex()

功能：返回数组中满足提供的测试函数的第一个元素的索引。如果没有找到，则返回 - 1。
示例：

javascript">let arr = [5, 12, 8, 130, 44];
let index = arr.findIndex((element) => element > 10);
console.log(index); // 1

every()

功能：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
示例：

javascript">let arr = [1, 2, 3, 4, 5];
let allGreaterThanZero = arr.every((element) => element > 0);
console.log(allGreaterThanZero); // true

some()

功能：测试数组中是不是至少有一个元素通过了被提供的函数测试。它返回一个布尔值。
示例：

javascript">let arr = [1, 2, 3, 4, 5];
let atLeastOneEven = arr.some((element) => element % 2 === 0);
console.log(atLeastOneEven); // true

includes()

功能：用来判断一个数组是否包含一个指定的值，返回布尔值。
示例：

javascript">let arr = [1, 2, 3];
let hasTwo = arr.includes(2);
console.log(hasTwo); // true

flat()

功能：会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
示例：

javascript">let arr = [1, 2, [3, 4]];
let flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4]

可以指定扁平化的深度，例如：

javascript">let arr = [1, 2, [3, [4, 5]]];
let flattened = arr.flat(2);
console.log(flattened); // [1, 2, 3, 4, 5]

flatMap()

功能：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与map后再flat的效果相同，但flatMap通常更高效。
示例：

javascript">let arr = [1, 2, 3];
let newArr = arr.flatMap((x) => [x * 2]);
console.log(newArr); // [2, 4, 6]

entries()

功能：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
示例：

javascript">let arr = ['a', 'b', 'c'];
let iterator = arr.entries();
for (let [index, element] of iterator) {console.log(index, element);
}
// 0 'a'
// 1 'b'
// 2 'c'

keys()

功能：返回一个包含数组中每个索引的Array Iterator对象。
示例：

javascript">let arr = ['a', 'b', 'c'];
let iterator = arr.keys();
for (let key of iterator) {console.log(key);
}
// 0
// 1
// 2

values()

功能：返回一个新的Array Iterator对象，该对象包含数组中每个索引的值。
示例：

javascript">let arr = ['a', 'b', 'c'];
let iterator = arr.values();
for (let value of iterator) {console.log(value);
}
// 'a'
// 'b'
// 'c'

类数组及对象应用

类数组遍历
- 什么是类数组：类数组对象是一个拥有length属性和若干索引属性的对象，但它没有数组的方法，如slice、map等。常见的类数组对象有arguments对象（在函数内部）和DOM节点列表。
- 应用场景和示例 - 使用for循环遍历arguments对象
  - 场景描述：在一个函数中，需要处理不定数量的参数，arguments对象可以获取这些参数，通过遍历arguments可以对每个参数进行操作。
  - 示例代码：
```
javascript">function sum() {let result = 0;for (let i = 0; i < arguments.length; i++) {result += arguments[i];}return result;
}
console.log(sum(1, 2, 3)); // 6
```
- 应用场景和示例 - 使用Array.from方法将类数组转换为数组后遍历
  - 场景描述：当想使用数组的方法（如forEach）来遍历类数组对象时，可以先将其转换为数组。Array.from方法可以将类数组对象或可迭代对象转换为真正的数组。
  - 示例代码：
```
javascript">let domList = document.getElementsByTagName('div');// 这是一个类数组对象
let divArray = Array.from(domList);
divArray.forEach((div) => {console.log(div);
});
```
对象遍历
- 应用场景和示例 - 使用for...in循环遍历对象的可枚举属性
  - 场景描述：当需要获取对象的所有可枚举属性（包括继承的可枚举属性）并进行操作时，如打印属性名和属性值，for...in循环很有用。
  - 示例代码：
```
javascript">let person = {name: 'John',age: 30,city: 'New York'
};
for (let key in person) {console.log(key + ': ' + person[key]);
}
// 输出：
// name: John
// age: 30
// city: New York
```
- 应用场景和示例 - 使用Object.keys获取对象属性名数组后遍历
  - 场景描述：如果只想获取对象自身的可枚举属性名，而不包括继承的属性名，Object.keys方法返回一个由对象自身可枚举属性名组成的数组。然后可以使用数组的遍历方法（如forEach）来操作这些属性。
  - 示例代码：
```
javascript">let person = {name: 'John',age: 30,city: 'New York'
};
let keys = Object.keys(person);
keys.forEach((key) => {console.log(key + ': ' + person[key]);
});
// 输出：
// name: John
// age: 30
// city: New York
```
- 应用场景和示例 - 使用Object.values获取对象属性值数组后遍历
  - 场景描述：当只关心对象的属性值，并且想对这些属性值进行操作（如求和、查找最大值等）时，Object.values方法返回一个由对象自身可枚举属性值组成的数组，然后可以用数组的遍历方法来处理。
  - 示例代码：
```
javascript">let person = {salary1: 5000,salary2: 6000,salary3: 7000
};
let values = Object.values(person);
let sum = 0;
values.forEach((value) => {sum += value;
});
console.log(sum); // 18000
```
- 应用场景和示例 - 使用Object.entries获取对象属性名 - 值对数组后遍历
  - 场景描述：如果需要同时获取对象的属性名和属性值，并且以键值对的形式进行操作，Object.entries方法返回一个包含对象自身可枚举属性的键值对数组。可以使用forEach或者for...of循环来遍历这个数组。
  - 示例代码：
```
javascript">let person = {name: 'John',age: 30,city: 'New York'
};
let entries = Object.entries(person);
entries.forEach(([key, value]) => {console.log(key + ': ' + value);
});
// 输出：
// name: John
// age: 30
// city: New York
```

对象应用补充

Object.getOwnPropertyNames()方法遍历
- 功能：该方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性）组成的数组。与Object.keys()不同的是，它会包含不可枚举属性。
- 示例：
```
javascript">let obj = {};
Object.defineProperty(obj, 'hiddenProperty', {value: 'secret',enumerable: false
});
let propertyNames = Object.getOwnPropertyNames(obj);
console.log(propertyNames); 
// ["hiddenProperty"]
```
- 应用场景：当需要获取对象的所有自身属性，包括那些不应该在for...in循环或者Object.keys()中显示的不可枚举属性时，就可以使用Object.getOwnPropertyNames()。例如，在一些需要完整属性列表的调试工具或者序列化函数中很有用。
使用Reflect.ownKeys()遍历
- 功能：Reflect.ownKeys()方法返回一个由目标对象自身的所有属性键（包括字符串和符号属性，不管是可枚举还是不可枚举）组成的数组。
- 示例：
```
javascript">let symbolKey = Symbol('key');
let obj = {normalProp: 'value',[symbolKey]: 'symbolValue'
};
let allKeys = Reflect.ownKeys(obj);
console.log(allKeys); 
// ["normalProp", Symbol(key)]
```
- 应用场景：在处理可能包含符号属性或者需要获取对象所有属性键（不管枚举性和类型）的复杂场景下非常有用。比如，在实现对象的深度克隆功能时，需要完整地复制对象的所有属性，包括符号属性，Reflect.ownKeys()就能派上用场。
使用for...of循环结合Object.entries()的替代方式 - 自定义迭代器（Symbol.iterator）
- 功能：可以在对象的原型上定义Symbol.iterator方法，使对象可迭代。这样就可以使用for...of循环来遍历对象，就像遍历数组一样。
- 示例：
```
javascript">let myObject = {a: 1,b: 2,c: 3,[Symbol.iterator]: function() {let keys = Object.keys(this);let index = 0;return {next: () => {if (index < keys.length) {let key = keys[index];index++;return { value: [key, this[key]], done: false };} else {return { done: true };}}};}
};
for (let [key, value] of myObject) {console.log(key, value);
}
```
- 应用场景：当希望对象能够像数组、集合等可迭代类型一样被for...of循环遍历，并且可以自定义遍历的顺序和逻辑时，这种方式很有用。比如，在实现一个自定义的数据结构，它具有类似对象的属性存储方式，但又希望有特殊的遍历行为时，就可以使用这个方法。