ES8(ECMAScript 2017)是 JavaScript 的一个重要版本,其中新增了一些非常有用的特性和方法,其中包括 Object.values() 和 Object.entries() 方法。这两个方法可以帮助我们更方便地操作对象并快速获取对象的值和键值对。本文将详细介绍这两个方法的使用方法和实际应用场景。
Object.values()
Object.values() 方法返回一个对象自身的所有可枚举属性值的数组,按照对象属性的顺序排列。下面是 Object.values() 方法的语法:
Object.values(obj)
其中 obj 是要获取属性值的对象。
以下是一个示例:
const obj = { a: 1, b: 2, c: 3 }; const values = Object.values(obj); console.log(values); // [1, 2, 3]
在这个示例中,我们定义了一个对象 obj,它有三个属性:a、b、c。我们使用 Object.values() 方法获取 obj 的所有属性值,并将它们存储在 values 数组中。最后,我们使用 console.log() 方法输出 values 数组的值:[1, 2, 3]。
Object.values() 方法的返回值是一个数组,它的元素是对象属性的值。注意,返回的数组中的元素顺序与对象属性的顺序相同。如果对象没有任何属性,则返回一个空数组。
Object.entries()
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组。下面是 Object.entries() 方法的语法:
Object.entries(obj)
其中 obj 是要获取键值对的对象。
以下是一个示例:
const obj = { a: 1, b: 2, c: 3 }; const entries = Object.entries(obj); console.log(entries); // [["a", 1], ["b", 2], ["c", 3]]
在这个示例中,我们定义了一个对象 obj,它有三个属性:a、b、c。我们使用 Object.entries() 方法获取 obj 的所有键值对,并将它们存储在 entries 数组中。最后,我们使用 console.log() 方法输出 entries 数组的值:[["a", 1], ["b", 2], ["c", 3]]。
Object.entries() 方法的返回值是一个数组,它的元素是对象属性的键值对。每个键值对都是一个数组,第一个元素是属性名,第二个元素是属性值。如果对象没有任何属性,则返回一个空数组。
应用场景
Object.values() 和 Object.entries() 方法可以帮助我们更方便地操作对象,并快速获取对象的值和键值对。它们在实际开发中有很多应用场景。
遍历对象
使用 Object.values() 和 Object.entries() 方法可以快速遍历对象的属性值和键值对。例如,我们可以使用 for...of 循环遍历对象的属性值:
const obj = { a: 1, b: 2, c: 3 }; for (const value of Object.values(obj)) { console.log(value); } // 1 // 2 // 3
或者使用 forEach() 方法遍历对象的键值对:
const obj = { a: 1, b: 2, c: 3 }; Object.entries(obj).forEach(([key, value]) => { console.log(`${key}: ${value}`); }); // a: 1 // b: 2 // c: 3
将对象转换为数组
使用 Object.entries() 方法可以将对象转换为键值对数组。例如,我们可以将一个对象转换为 URL 参数字符串:
const params = { username: 'john', password: '123456' }; const queryString = Object.entries(params) .map(([key, value]) => `${key}=${encodeURIComponent(value)}`) .join('&'); console.log(queryString); // username=john&password=123456
合并对象
使用 Object.assign() 方法可以将多个对象合并为一个对象。但是,Object.assign() 方法只能合并对象的属性值,不能合并对象的键值对。使用 Object.entries() 方法可以将多个对象的键值对合并为一个对象:
const obj1 = { a: 1, b: 2 }; const obj2 = { c: 3, d: 4 }; const merged = Object.fromEntries([...Object.entries(obj1), ...Object.entries(obj2)]); console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }
在这个示例中,我们将 obj1 和 obj2 转换为键值对数组,然后使用 spread syntax 将它们合并为一个数组。最后,我们使用 Object.fromEntries() 方法将数组转换为对象。
结论
Object.values() 和 Object.entries() 方法是 ES8 中新增的两个非常有用的方法,它们可以帮助我们更方便地操作对象,并快速获取对象的值和键值对。它们在实际开发中有很多应用场景,例如遍历对象、将对象转换为数组、合并对象等。希望本文可以帮助你更好地理解和应用这两个方法。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/675962f15dff5c9760c7ac54