ES8 的 "Object.values()" 与 "Object.entries()" 实战解析-JavaScript中文网-JavaScript教程资源分享门户

ES8 在 Object 对象上新增了两个方法：Object.values() 和 Object.entries()，它们可以让我们更方便地获取对象的属性值和键值对数组。本文将详细讲解这两个方法的使用方法以及实战案例，希望能够帮助大家更好地理解和应用它们。

Object.values()

Object.values() 方法返回一个数组，其中包含了对象的所有属性值。这个数组的顺序与对象属性在代码中的顺序一致。示例代码如下：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj);
console.log(values); // [1, 2, 3]

在实际开发中，Object.values() 方法可以用来遍历对象的属性值，例如：

const obj = { a: 1, b: 2, c: 3 };
for (const value of Object.values(obj)) {
  console.log(value);
}
// 1
// 2
// 3

同时，Object.values() 方法也可以用来判断一个对象是否为空对象，例如：

const obj = {};
const isEmpty = Object.values(obj).length === 0;
console.log(isEmpty); // true

Object.entries()

Object.entries() 方法返回一个数组，其中包含了对象的所有键值对数组。这个数组的顺序与对象属性在代码中的顺序一致。每个键值对数组的第一个元素是属性名，第二个元素是属性值。示例代码如下：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj);
console.log(entries); // [['a', 1], ['b', 2], ['c', 3]]

在实际开发中，Object.entries() 方法可以用来遍历对象的键值对，例如：

const obj = { a: 1, b: 2, c: 3 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}
// a 1
// b 2
// c 3

同时，Object.entries() 方法也可以用来将对象转换为 Map 对象，例如：

const obj = { a: 1, b: 2, c: 3 };
const map = new Map(Object.entries(obj));
console.log(map); // Map { 'a' => 1, 'b' => 2, 'c' => 3 }

实战案例

下面我们来看一个实际的案例，通过 Object.values() 和 Object.entries() 方法来实现一个简单的搜索引擎。假设我们有一个存储了多篇文章的对象，每篇文章都有标题和内容：

// javascriptcn.com 代码示例
const articles = {
  'article-1': {
    title: 'JavaScript 从入门到放弃',
    content: '...'
  },
  'article-2': {
    title: 'React 入门教程',
    content: '...'
  },
  'article-3': {
    title: 'Vue.js 实战教程',
    content: '...'
  },
  // ...
};

我们希望可以通过关键字来搜索文章，搜索结果返回所有标题或内容中包含该关键字的文章。代码如下：

// javascriptcn.com 代码示例
function searchArticles(articles, keyword) {
  const results = [];

  for (const [id, article] of Object.entries(articles)) {
    const { title, content } = article;

    if (title.includes(keyword) || content.includes(keyword)) {
      results.push({ id, title });
    }
  }

  return results;
}

const results = searchArticles(articles, 'JavaScript');
console.log(results);
// [
//   { id: 'article-1', title: 'JavaScript 从入门到放弃' },
//   { id: 'article-2', title: 'React 入门教程' }
// ]

通过 Object.entries() 方法，我们可以很方便地遍历每篇文章的标题和内容，并判断是否包含关键字。同时，我们也可以通过 Object.values() 方法来获取文章的所有标题或内容，进一步优化搜索效率。

总结

Object.values() 和 Object.entries() 方法是 ES8 中新增的两个方法，它们可以让我们更方便地获取对象的属性值和键值对数组。在实际开发中，我们可以通过它们来遍历对象、判断对象是否为空对象、将对象转换为 Map 对象等。同时，它们也可以用来实现一些实际的应用场景，例如搜索引擎等。希望本文能够帮助大家更好地理解和应用这两个方法。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6509679a95b1f8cacd421b7f