映射对象以将对象转换为数组

Question

我这里有这个功能：

var obj = {
  name: 'Holly',
  age: 35,
  role: 'producer'
};


function convertObjectToList(obj) {
 return Object.keys(obj).map(k => [k, obj[k]]);
}
convertObjectToList(obj);

此函数将数组转换为 obj。所以如果我有上面那个 obj 我会得到这样的东西：

[['name', 'Holly'], ['age', 35], ['role', 'producer']]

现在我想把重点放在这里：

return Object.keys(obj).map(k => [k, obj[k]]);

分解它，Object.keys 基本上返回一个给定对象自己的可枚举属性的数组，并在数组中迭代 map 等等。我正在尝试理解上面的箭头函数，并尝试将其分解为更简单易懂的代码。

function convertObjectToList(obj) {
 Object.keys(obj).map(function(key){
     obj = [key, obj[key]];
 });
  console.log(obj);
}

但是这个没有用。相反，它只返回 ["role", undefined]。

有没有人可以让我用外行术语理解并分解代码，以便我清楚地理解它。

对不起，我是初学者。菜鸟。

Answer 1

箭头函数类似于函数，但语法不同。普通函数使用语法

function(x, y){
    return x + y;
}

箭头函数使用单行语法

(x, y) => x + y

或多行语法

(x, y) => {
    return x + y;
}

---

在你的例子中，

return Object.keys(obj).map(k => [k, obj[k]]);

翻译成

return Object.keys(obj).map(function(k) {
    return [k, obj[k]];
});

因为该函数接受一个参数k（在箭头之前）并返回[k, obj[i]]（在箭头之后）。

Answer 2

这是你的第二个功能：

function convertObjectToList(obj) {
  Object.keys(obj).map(function(key){
   obj = [key, obj[key]];
  });
  console.log(obj);
}

这里有一些不合适的地方：

1. 您的第二个函数没有返回值。所以函数调用 convertObjectToList 将返回 undefined。
2. 您正在使用数组[key, obj[key]] 重新分配obj 的值，这不是您想要做的。这就是你得到 ['role' , undefined] 的原因，因为obj 的最后一个键是角色，并且由于 obj 已被修改为数组而不是对象，obj['role'] 将返回 undefined。
3. 您需要在地图内有一个返回值，否则返回数组中的每个元素都将是未定义的。

所以正确的代码如下：

var obj = {
  name: 'Holly',
  age: 35,
  role: 'producer'
};

function convertObjectToList(obj) {
 return Object.keys(obj).map(function(key){
   let currElement = [key, obj[key]];
   return currElement
 });
}

var res = convertObjectToList(obj);

console.log(res);

Answer 3

应该是这样的

var obj = {
	name: 'Holly',
	age: 35,
	role: 'producer'
};


function convertObjectToList(obj) {

	return Object.keys(obj).map(function (k) {
		return [k, obj[k]];
	})
}
convertObjectToList(obj);

Answer 4

使用箭头函数时，如果箭头函数只包含一行，则可以避免返回语句。所以在使用常规函数时需要手动返回

var obj = {
  name: 'Holly',
  age: 35,
  role: 'producer'
};

function convertObjectToList(obj) {
  return Object.keys(obj).map(function(k) {
    return [k, obj[k]]
  });
}

var result = convertObjectToList(obj);
console.log(result);

Answer 5

Object.keys 返回一个数组，其中元素是对应于 obj 中直接找到的可枚举属性的字符串。属性的顺序与手动循环对象属性的顺序相同。

    var arr = ["a", "b", "c"];
alert(Object.keys(arr)); // chiama alert con argomento "0,1,2"

// array like object
var obj = { 0 : "a", 1 : "b", 2 : "c"};
alert(Object.keys(obj)); // chiama alert con argomento "0,1,2"

假设你传递你的对象，地图是这样构建的，这就是你的结果。

function objToStrMap(obj) {
    const strMap = new Map();
    for (const k of Object.keys(obj)) {
        strMap.set(k, obj[k]);
    }
    return strMap;
}

在您的代码中尝试此更改

function convertObjectToList(obj) {
 Object.keys(obj).map(function(key){
     return [key, obj[key]];  //obj = [key, obj[key]];
 });

}

Answer 6

您需要了解 map 函数的工作原理才能了解您做错了什么。 map 函数接受一个回调函数，我们将其称为 Mapper。该函数接受数组中的每一项，对其进行一些操作，并返回操作的结果。 map 函数本身循环遍历数组，每次将单个项传递给映射器，然后将结果添加到 NEW 数组中。

这是一个使用老式 for 循环的 map 函数的实现：

function customMap(array, mapper) {
  var result = [];
  for (int i = 0; i < array.length; i++) {
    var temp = mapper(array[i]);
    result.push(temp);
  }
  return result;
}

现在我们可以将此实现与您的函数进行比较，看看您做错了什么：

1. 您的映射器函数没有返回任何内容。因此，在上面的实现中，temp 的值是未定义的，并且会被推送到结果数组中。
2. 您尝试将映射器应用于整个 obj 对象，而不是键数组中的每个项目。这样做会改变 obj 变量的值，因此在第一次迭代后丢失了它的内容。
3. 您的 convertObjectToList 本身没有返回任何内容，因此最后没有任何内容可显示。

要解决此问题，您可以使用以下方法：

var obj = {
  name: 'Holly',
  age: 35,
  role: 'producer'
};


function convertObjectToList(obj) {
 return Object.keys(obj).map(function(key) {
   var temp = [key, obj[key]];
   console.log('current item: ', temp);
   return temp;
 });
}

var result = convertObjectToList(obj);
console.log('final result: ', result);

最后，没有必要为自己是个菜鸟而道歉——我们都是这样开始的。