JavaScript之Object.entries() 、Array.reduce()、Array.map()

87 阅读 0 评论 58 点赞

我是靠谱客的博主无辜钢铁侠，最近开发中收集的这篇文章主要介绍JavaScript之Object.entries() 、Array.reduce()、Array.map()，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一. Object.entries()

通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for…in 一致，但不会遍历原型属性。

示例1 – 传入对象

const obj = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj));
// [['foo', 'bar'], ['baz', 'abc']]

示例2.1 – 数组

const arr = [1, 2, 3];
console.log(Object.entries(arr));
// [['0', 1], ['1', '2'], ['2', '3']]

示例2.2 – 数组（数组中包含对象）

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

示例2.3 – 数组（数组中的值全部为对象）

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

示例3 – 字符串

const str = '123';
console.log(Object.entries(str));
// [['0', '1'], ['1', '2'], ['2', '3']]

示例4 – 数字、浮点数

const num = 123;
console.log(Object.entries(num));
// []
const float1 = 12.3;
console.log(Object.entries(float1));
// []

示例5 – 将 Object 转化为 Map

new Map()构造函数接受一个可迭代的entries。借助 Object.entries 方法你可以很容易的将 Object转换为 Map:

const obj2 = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj2));
// [['foo', 'bar'], ['baz', 'abc']]
const map = new Map(Object.entries(obj2));
console.log(map); // Map {'foo' => 'bar', 'baz' => 'abc'}

二. Array.reduce()

reduce是JavaScript中数组里的累加器，它常用语法为接收两个参数，第一个参数为一个函数，第二个参数为累加器的初始值。
在这里插入图片描述

例如：

<button onclick="myFunction()">点我</button>
<p>数组元素之和: <span id="demo"></span></p>
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
return total + Math.round(num);
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>

三. Array.map()

函数映射

四. 综合例子：

const obj = {a: 1, b: 2, c: 3, d: 4}
console.log(Object.entries(obj))
const ret = Object.entries(obj).map(v => {
return {text: v[1], value: v[0]}
})
console.log(ret)
const obj1 = ret.reduce((rs, v) => {
rs[v['value']] = v['text']
return rs
}, {})
console.log(obj1)