在 ES10 中,JavaScript 新增了两个函数:fromEntries 和 entries。这两个函数都是用于操作对象的,fromEntries 可以将一个二维数组转换为一个对象,而 entries 则可以将一个对象转换为一个二维数组。下面我们将详细介绍这两个函数的使用方法和一些技巧。
fromEntries 函数
fromEntries 函数用于将一个二维数组转换为一个对象。这个二维数组中,每个数组元素都是一个键值对,第一个元素是键,第二个元素是值。fromEntries 函数将这个二维数组转换为一个对象,其中每个键值对都成为这个对象的一个属性和属性值。
下面是一个使用 fromEntries 函数的示例代码:
const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']]; const obj = Object.fromEntries(arr); console.log(obj); // {name: "Tom", age: 18, gender: "male"}
在这个示例代码中,我们定义了一个二维数组 arr,其中包含了三个键值对。我们使用 fromEntries 函数将这个二维数组转换为了一个对象 obj。最终输出的结果是一个包含了三个属性的对象。
需要注意的是,fromEntries 函数只能用于将一个二维数组转换为一个对象。如果传入的参数不是一个二维数组,会抛出一个 TypeError 异常。
entries 函数
entries 函数用于将一个对象转换为一个二维数组。这个二维数组中,每个数组元素都是一个键值对,第一个元素是键,第二个元素是值。entries 函数将这个对象转换为一个二维数组,其中每个键值对都成为了一个数组元素。
下面是一个使用 entries 函数的示例代码:
const obj = {name: 'Tom', age: 18, gender: 'male'}; const arr = Object.entries(obj); console.log(arr); // [["name", "Tom"], ["age", 18], ["gender", "male"]]
在这个示例代码中,我们定义了一个对象 obj,其中包含了三个属性。我们使用 entries 函数将这个对象转换为了一个二维数组 arr。最终输出的结果是一个包含了三个数组元素的二维数组。
需要注意的是,entries 函数只能用于将一个对象转换为一个二维数组。如果传入的参数不是一个对象,会抛出一个 TypeError 异常。
一些技巧
除了基本的用法之外,fromEntries 函数和 entries 函数还有一些比较有用的技巧。
使用 fromEntries 函数创建一个新对象
我们可以使用 fromEntries 函数创建一个新对象,这个对象的属性和属性值都是根据一个二维数组生成的。下面是一个示例代码:
const arr = [['name', 'Tom'], ['age', 18], ['gender', 'male']]; const obj = {...Object.fromEntries(arr)}; console.log(obj); // {name: "Tom", age: 18, gender: "male"}
在这个示例代码中,我们首先使用 fromEntries 函数将一个二维数组转换为了一个对象。然后使用了展开运算符将这个对象的属性和属性值分别赋值给了一个新对象。这样就创建了一个新对象,这个新对象的属性和属性值都是根据原始的二维数组生成的。
使用 entries 函数遍历一个对象
我们可以使用 entries 函数遍历一个对象的属性和属性值。下面是一个示例代码:
const obj = {name: 'Tom', age: 18, gender: 'male'}; for (const [key, value] of Object.entries(obj)) { console.log(`${key}: ${value}`); } // name: Tom // age: 18 // gender: male
在这个示例代码中,我们使用 entries 函数将一个对象转换为了一个二维数组。然后使用了 for...of 循环遍历这个二维数组,从而遍历了这个对象的所有属性和属性值。
结论
fromEntries 函数和 entries 函数是 ES10 中新增的两个函数,用于操作对象。fromEntries 函数可以将一个二维数组转换为一个对象,而 entries 函数则可以将一个对象转换为一个二维数组。除了基本的用法之外,这两个函数还有一些比较有用的技巧,可以帮助我们更加方便地操作对象。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6778d2326eeb790047a3e6a5