使用 JavaScript 以相反的顺序循环遍历对象

作者

在 JavaScript 中以相反的顺序循环遍历对象

Loop through Object in Reverse Order using JavaScript

以相反的顺序循环对象：

  1. 使用该Object.keys()方法获取对象键的数组。
  2. 调用reverse()方法反转数组。
  3. 使用该forEach()方法遍历数组并以相反的顺序访问对象的键和值。
索引.js
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

// 👇️ ['c', 'b', 'a']
const reversedKeys = Object.keys(obj).reverse();

reversedKeys.forEach(key => {
  console.log(key, obj[key]); // 👉️ c three, b two, a one
});

第一步是使用
Object.keys方法获取对象键的数组。

索引.js
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

const keys = Object.keys(obj);
console.log(keys); // 👉️ ['a', 'b','c']
该Object.keys()方法返回对象的键，其排序方式与通过手动遍历对象的属性给出的方式相同。

我们使用
Array.reverse()
方法来反转键数组。

该reverse()方法原地反转数组中的元素并返回结果。

索引.js
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

const keys = Object.keys(obj);
console.log(keys); // 👉️ ['a', 'b','c']

const reversed = keys.reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']
在这种情况下它是无关紧要的，但请注意该reverse() 方法会更改原始数组的内容。
索引.js
const arr = ['a', 'b', 'c'];

const reversed = arr.reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉️ ['c', 'b', 'a']

为了避免改变原始数组，您通常必须在调用reverse()方法之前创建一个副本。

索引.js
const arr = ['a', 'b', 'c'];

const reversed = [...arr].reverse();
console.log(reversed); // 👉️ ['c', 'b', 'a']

console.log(arr); // 👉️ ['a', 'b', 'c']

最后一步是使用
Array.forEach方法迭代反向键数组。

然后我们可以使用每个键来访问对象中的值。

索引.js
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

const reversedKeys = Object.keys(obj).reverse();

reversedKeys.forEach((key, index) => {
  console.log(key, obj[key]); // 👉️ c three, b two, a one

  console.log(index); // 👉️ 0 1 2
});

使用该方法时，您还可以访问当前迭代的索引
Array.forEach()。

如果您只需要访问对象的值，请改用该Object.values()方法。

在 JavaScript 中以相反的顺序循环遍历对象的值

这是一个三步过程：

  1. 使用该Object.values()方法获取对象值的数组。
  2. 调用reverse()方法反转数组。
  3. 使用该forEach()方法以相反的顺序遍历值数组。
索引.js
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

// 👇️ [ 'three', 'two', 'one' ]
const reversedValues = Object.values(obj).reverse();

reversedValues.forEach(value => {
  console.log(value); // 👉️ three, two, one
});

Object.values ()方法返回对象值的数组。

索引.js
const obj = {
  a: 'one',
  b: 'two',
  c: 'three',
};

// 👇️ [ 'one', 'two', 'three' ]
console.log(Object.values(obj));

// 👇️ [ 'three', 'two', 'one' ]
console.log(Object.values(obj).reverse());

我们使用Array.reverse()方法来反转数组，并使用
forEach()方法遍历反转后的数组。

我们传递给方法的函数Array.forEach被数组中的每个元素调用。

该forEach()方法返回undefined，所以我们必须执行某种变异来保持状态。

索引.js
const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// 👇️ [3, 2, 1]
const reversedValues = Object.values(obj).reverse();

let total = 0;

reversedValues.forEach(value => {
  console.log(value); // 👉️ 3, 2, 1

  total += value;
});

console.log(total); // 👉️ 6

On each iteration, we add the current object value to the total variable to
preserve the state.

# Loop through an Object’s entries in Reverse Order in JavaScript

You can also reverse the output of the Object.entries() method to iterate over
an object in reverse order.

index.js
const obj = {
  a: 1,
  b: 2,
  c: 3,
};

// 👇️ [ [ 'c', 3 ], [ 'b', 2 ], [ 'a', 1 ] ]
const reversedEntries = Object.entries(obj).reverse();

reversedEntries.forEach(([key, value]) => {
  console.log(key, value); // 👉️ c 3, b 2, a 1
});

The Object.entries method returns
an array of the given object’s key-value pairs.

index.js
const reversedEntries = Object.entries(obj).reverse();

// 👇️ [ [ 'c', 3 ], [ 'b', 2 ], [ 'a', 1 ] ]
console.log(reversedEntries);

On each iteration, we use
destructuring assignment to assign
the key and value to variables and log them to the console.

index.js
const [key, value] = ['a', 1];

console.log(key); // 👉️ a
console.log(value); // 1

The key variable gets assigned the first array element and the value
variable – the second.

I’ve also written an article on
how to loop through an array in reverse order.

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：