The Object.values() method translates this sentence into English.

Basic Concept of the Object.values() Method

Object.values() is a static method introduced in ECMAScript 2016 (ES7) that returns an array of a given object's own enumerable property values. This method is similar to Object.keys() but returns property values instead of property names.

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

Comparison with Object.keys()

Object.values() complements Object.keys(), where the former returns property values and the latter returns property names:

const user = {
  name: 'Zhang San',
  age: 30,
  isAdmin: true
};

console.log(Object.keys(user));   // ['name', 'age', 'isAdmin']
console.log(Object.values(user)); // ['Zhang San', 30, true]

Handling Different Types of Properties

Object.values() only returns the object's own enumerable property values, excluding inherited properties:

const parent = { a: 1, b: 2 };
const child = Object.create(parent);
child.c = 3;
child.d = 4;

console.log(Object.values(child)); // [3, 4]

Handling Non-Object Arguments

When non-object arguments are passed, Object.values() first converts them into objects:

// Numbers and booleans are converted to empty objects
console.log(Object.values(42));    // []
console.log(Object.values(true));  // []

// Strings are converted to array-like objects
console.log(Object.values('foo')); // ['f', 'o', 'o']

Relationship with Arrays

For arrays, Object.values() returns the array element values:

const arr = ['a', 'b', 'c'];
console.log(Object.values(arr)); // ['a', 'b', 'c']

Practical Use Cases

Iterating Over Object Values

const scores = { math: 90, english: 85, science: 92 };

// Calculate total score
const total = Object.values(scores).reduce((sum, score) => sum + score, 0);
console.log(total); // 267

Checking if an Object Contains a Specific Value

function hasValue(obj, value) {
  return Object.values(obj).includes(value);
}

const colors = { red: '#FF0000', green: '#00FF00', blue: '#0000FF' };
console.log(hasValue(colors, '#00FF00')); // true

Combining with Other ES6+ Features

const products = {
  p1: { name: 'Laptop', price: 999 },
  p2: { name: 'Phone', price: 699 },
  p3: { name: 'Tablet', price: 499 }
};

// Get all prices and find the highest price
const prices = Object.values(products).map(p => p.price);
const maxPrice = Math.max(...prices);
console.log(maxPrice); // 999

Performance Considerations

Object.values() creates and returns a new array, which may impact performance for large objects:

// Large object example
const largeObj = {};
for (let i = 0; i < 1000000; i++) {
  largeObj[`key${i}`] = i;
}

// This creates an array with 1 million elements
const values = Object.values(largeObj);

Browser Compatibility

Although Object.values() is an ES7 feature, most modern browsers support it:

// Compatibility check
if (typeof Object.values === 'function') {
  // Safely use Object.values()
} else {
  // Use a polyfill or alternative method
}

Comparison with for...in Loops

Object.values() provides a more concise way to get object values, avoiding some issues with for...in loops:

const obj = { a: 1, b: 2 };

// Using for...in
const values1 = [];
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    values1.push(obj[key]);
  }
}

// Using Object.values()
const values2 = Object.values(obj);

console.log(values1); // [1, 2]
console.log(values2); // [1, 2]

Relationship with Object.entries()

Object.values() and Object.entries() are often used together:

const person = { name: 'Li Si', age: 25, job: 'Developer' };

// Get key-value pair arrays
const entries = Object.entries(person);
console.log(entries);
// [ ['name', 'Li Si'], ['age', 25], ['job', 'Developer'] ]

// Get only values
const values = Object.values(person);
console.log(values); // ['Li Si', 25, 'Developer']

Handling Symbol Properties

Object.values() does not return Symbol property values:

const symbolKey = Symbol('symbolKey');
const obj = {
  [symbolKey]: 'symbolValue',
  regularKey: 'regularValue'
};

console.log(Object.values(obj)); // ['regularValue']

Application on Class Instances

Object.values() can also be used on class instances:

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, my name is ${this.name}`;
  }
}

const user = new User('Wang Wu', 28);
console.log(Object.values(user)); // ['Wang Wu', 28]

Interaction with JSON

Object.values() is particularly useful when working with JSON data:

const jsonData = '{"id":1,"title":"ES7 Features","published":true}';
const parsedData = JSON.parse(jsonData);

// Get all values
const values = Object.values(parsedData);
console.log(values); // [1, "ES7 Features", true]

Application in Functional Programming

Object.values() can be easily combined with functional programming methods:

const inventory = {
  apples: 10,
  bananas: 15,
  oranges: 8
};

// Calculate total inventory
const totalItems = Object.values(inventory).reduce((total, count) => total + count, 0);
console.log(totalItems); // 33

// Filter items with count greater than 10
const abundantItems = Object.values(inventory).filter(count => count > 10);
console.log(abundantItems); // [15]

Handling Nested Objects

For nested objects, Object.values() only returns first-level values:

const company = {
  name: 'Tech Corp',
  departments: {
    engineering: 50,
    marketing: 20,
    sales: 30
  },
  founded: 2010
};

console.log(Object.values(company));
// ['Tech Corp', {engineering: 50, marketing: 20, sales: 30}, 2010]

Conversion with Map Data Structure

Objects can be easily converted to Maps:

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

// Use Object.values() to get Map values
const mapValues = [...map.values()];
console.log(mapValues); // [1, 2, 3]

Application in React

In React, Object.values() can be used to handle state objects:

class UserList extends React.Component {
  state = {
    users: {
      user1: { name: 'Alice', age: 25 },
      user2: { name: 'Bob', age: 30 },
      user3: { name: 'Charlie', age: 35 }
    }
  };

  render() {
    return (
      <ul>
        {Object.values(this.state.users).map((user, index) => (
          <li key={index}>
            {user.name} - {user.age} years old
          </li>
        ))}
      </ul>
    );
  }
}

Interaction with TypeScript's Type System

In TypeScript, Object.values() returns the type any[], which may require type assertions:

interface Person {
  name: string;
  age: number;
}

const person: Person = { name: 'Zhao Liu', age: 40 };
const values = Object.values(person) as Array<string | number>;
console.log(values); // ['Zhao Liu', 40]

Performance Optimization Tips

For scenarios requiring frequent access to object values, you can cache the result of Object.values():

const largeObject = {/* object with many properties */};

// Bad practice: calling Object.values() in each loop
function process1(obj) {
  Object.values(obj).forEach(/* ... */);
  Object.values(obj).forEach(/* ... */);
}

// Good practice: cache the result
function process2(obj) {
  const values = Object.values(obj);
  values.forEach(/* ... */);
  values.forEach(/* ... */);
}

Interaction with Proxy Objects

Object.values() triggers the get trap of a Proxy:

const target = { a: 1, b: 2 };
const handler = {
  get(target, prop) {
    console.log(`Accessing property ${prop}`);
    return target[prop];
  }
};

const proxy = new Proxy(target, handler);
Object.values(proxy);
// Console output:
// Accessing property a
// Accessing property b