chức năng ánh xạ cho các đối tượng (thay vì mảng)

Tôi có một đối tượng:

myObject = { 'a': 1, 'b': 2, 'c': 3 }

Tôi đang tìm kiếm một phương thức riêng, tương tự như phương pháp Array.prototype.mapđó sẽ được sử dụng như sau:

newObject = myObject.map(function (value, label) {
    return value * value;
});

// newObject is now { 'a': 1, 'b': 4, 'c': 9 }

JavaScript có mapchức năng như vậy cho các đối tượng không? (Tôi muốn điều này cho Node.JS, vì vậy tôi không quan tâm đến các vấn đề trên trình duyệt chéo.)

Không có nguồn gốc mapcủa Objectđối tượng, nhưng làm thế nào về điều này:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

Object.keys(myObject).map(function(key, index) {
  myObject[key] *= 2;
});

console.log(myObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

Nhưng bạn có thể dễ dàng lặp lại một đối tượng bằng cách sử dụng for ... in:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

for (var key in myObject) {
  if (myObject.hasOwnProperty(key)) {
    myObject[key] *= 2;
  }
}

console.log(myObject);
// { 'a': 2, 'b': 4, 'c': 6 }

Cập nhật

Rất nhiều người đang đề cập rằng các phương thức trước đó không trả về một đối tượng mới, mà hoạt động trên chính đối tượng đó. Đối với vấn đề đó, tôi muốn thêm một giải pháp khác trả về một đối tượng mới và để lại đối tượng ban đầu như sau:

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

// returns a new object with the values at each key mapped using mapFn(value)
function objectMap(object, mapFn) {
  return Object.keys(object).reduce(function(result, key) {
    result[key] = mapFn(object[key])
    return result
  }, {})
}

var newObject = objectMap(myObject, function(value) {
  return value * 2
})

console.log(newObject);
// => { 'a': 2, 'b': 4, 'c': 6 }

console.log(myObject);
// => { 'a': 1, 'b': 2, 'c': 3 }

Array.prototype.reducegiảm một mảng thành một giá trị bằng cách hợp nhất phần nào giá trị trước đó với giá trị hiện tại. Chuỗi được khởi tạo bởi một đối tượng trống {}. Trên mỗi lần lặp, một khóa mới myObjectđược thêm vào với hai lần khóa là giá trị.

Cập nhật

Với các tính năng ES6 mới, có một cách để thể hiện thanh lịch hơn objectMap.

const objectMap = (obj, fn) =>
  Object.fromEntries(
    Object.entries(obj).map(
      ([k, v], i) => [k, fn(v, k, i)]
    )
  )
  
const myObject = { a: 1, b: 2, c: 3 }

console.log(objectMap(myObject, v => 2 * v)) 

Làm thế nào về một lớp lót với gán biến ngay lập tức trong JS đơn giản ( ES6 / ES2015 )?

Sử dụng toán tử trải rộng và cú pháp tên khóa được tính toán :

let newObj = Object.assign({}, ...Object.keys(obj).map(k => ({[k]: obj[k] * obj[k]})));

jsbin

Một phiên bản khác sử dụng giảm:

let newObj = Object.keys(obj).reduce((p, c) => ({...p, [c]: obj[c] * obj[c]}), {});

jsbin

Ví dụ đầu tiên là một hàm:

const oMap = (o, f) => Object.assign({}, ...Object.keys(o).map(k => ({ [k]: f(o[k]) })));

// To square each value you can call it like this:
let mappedObj = oMap(myObj, (x) => x * x);

jsbin

Nếu bạn muốn ánh xạ một đối tượng lồng nhau một cách đệ quy trong một chức năng phong cách, nó có thể được thực hiện như thế này:

const sqrObjRecursive = obj =>
  Object.keys(obj).reduce(
    (newObj, key) =>
      obj[key] && typeof obj[key] === "object"
        ? { ...newObj, [key]: sqrObjRecursive(obj[key]) } // recurse.
        : { ...newObj, [key]: obj[key] * obj[key] }, // square val.
    {}
  );       

jsbin

Hoặc bắt buộc hơn, như thế này:

const sqrObjRecursive = obj => {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === "object") obj[key] = sqrObjRecursive(obj[key]);
    else obj[key] = obj[key] * obj[key];
  });
  return obj;
};

jsbin

Vì ES7 / ES2016, bạn có thể sử dụng Object.entries()thay vì Object.keys()ví dụ như thế này:

let newObj = Object.assign({}, ...Object.entries(obj).map(([k, v]) => ({[k]: v * v})));

ES2019 được giới thiệu Object.fromEntries(), giúp đơn giản hóa điều này hơn nữa:

let newObj = Object.fromEntries(Object.entries(obj).map(([k, v]) => [k, v * v]));

Các thuộc tính được kế thừa và chuỗi nguyên mẫu:

Trong một số trường hợp hiếm hoi, bạn có thể cần ánh xạ một đối tượng giống như lớp chứa các thuộc tính của một đối tượng được kế thừa trên chuỗi nguyên mẫu của nó . Trong những trường hợp như vậy Object.keys()sẽ không hoạt động, vì Object.keys()không liệt kê các thuộc tính được thừa kế . Nếu bạn cần ánh xạ các thuộc tính được kế thừa , bạn nên sử dụng for (key in myObj) {...}.

Dưới đây là một ví dụ về một đối tượng kế thừa các thuộc tính của đối tượng khác và cách thức Object.keys()hoạt động trong kịch bản đó.

const obj1 = { 'a': 1, 'b': 2, 'c': 3}
const obj2 = Object.create(obj1);  // One of multiple ways to inherit an object in JS.

// Here you see how the properties of obj1 sit on the 'prototype' of obj2
console.log(obj2)  // Prints: obj2.__proto__ = { 'a': 1, 'b': 2, 'c': 3}

console.log(Object.keys(obj2));  // Prints: an empty Array.

for (key in obj2) {
  console.log(key);              // Prints: 'a', 'b', 'c'
}

jsbin

Tuy nhiên, xin vui lòng giúp tôi và tránh thừa kế . :-)

Không có phương thức riêng, nhưng lodash # mapValues sẽ thực hiện công việc một cách xuất sắc

_.mapValues({ 'a': 1, 'b': 2, 'c': 3} , function(num) { return num * 3; });
// → { 'a': 3, 'b': 6, 'c': 9 }

Thật dễ dàng để viết một:

Object.map = function(o, f, ctx) {
    ctx = ctx || this;
    var result = {};
    Object.keys(o).forEach(function(k) {
        result[k] = f.call(ctx, o[k], k, o); 
    });
    return result;
}

với mã ví dụ:

> o = { a: 1, b: 2, c: 3 };
> r = Object.map(o, function(v, k, o) {
     return v * v;
  });
> r
{ a : 1, b: 4, c: 9 }

NB: phiên bản này cũng cho phép bạn (tùy chọn) đặt thisbối cảnh cho cuộc gọi lại, giống như Arrayphương thức.

EDIT - đã thay đổi để loại bỏ việc sử dụng Object.prototype, để đảm bảo rằng nó không xung đột với bất kỳ thuộc tính hiện có nào có tên maptrên đối tượng.

Bạn có thể sử dụng Object.keysvà sau đó forEachqua mảng phím được trả về:

var myObject = { 'a': 1, 'b': 2, 'c': 3 },
    newObject = {};
Object.keys(myObject).forEach(function (key) {
    var value = myObject[key];
    newObject[key] = value * value;
});

Hoặc theo kiểu mô-đun hơn:

function map(obj, callback) {
    var result = {};
    Object.keys(obj).forEach(function (key) {
        result[key] = callback.call(obj, obj[key], key, obj);
    });
    return result;
}

newObject = map(myObject, function(x) { return x * x; });

Lưu ý rằng Object.keystrả về một mảng chỉ chứa các thuộc tính có thể đếm được của chính đối tượng, do đó, nó hoạt động giống như một for..invòng lặp với một hasOwnPropertykiểm tra.

Đây là bs thẳng và mọi người trong cộng đồng JS đều biết điều đó. Có nên có chức năng này:

const obj1 = {a:4, b:7};
const obj2 = Object.map(obj1, (k,v) => v + 5);

console.log(obj1); // {a:4, b:7}
console.log(obj2); // {a:9, b:12}

đây là cách thực hiện ngây thơ:

Object.map = function(obj, fn, ctx){

    const ret = {};

    for(let k of Object.keys(obj)){
        ret[k] = fn.call(ctx || null, k, obj[k]);
    });

    return ret;
};

thật là khó chịu khi phải tự mình thực hiện điều này;)

Nếu bạn muốn một cái gì đó tinh vi hơn một chút, điều đó không can thiệp vào lớp Object, hãy thử điều này:

let map = function (obj, fn, ctx) {
  return Object.keys(obj).reduce((a, b) => {
    a[b] = fn.call(ctx || null, b, obj[b]);
    return a;
  }, {});
};


const x = map({a: 2, b: 4}, (k,v) => {
    return v*2;
});

nhưng an toàn khi thêm chức năng bản đồ này vào Object, chỉ cần không thêm vào Object.prototype.

Object.map = ... // fairly safe
Object.prototype.map ... // not ok

Tôi đến đây để tìm và trả lời cho việc ánh xạ một đối tượng vào một mảng và kết quả là trang này. Trong trường hợp bạn đến đây để tìm kiếm cùng một câu trả lời tôi đã có, đây là cách bạn có thể ánh xạ và phản đối một mảng.

Bạn có thể sử dụng bản đồ để trả về một mảng mới từ đối tượng như vậy:

var newObject = Object.keys(myObject).map(function(key) {
   return myObject[key];
});

Câu trả lời được chấp nhận có hai nhược điểm:

• Nó lạm dụng Array.prototype.reduce, bởi vì giảm có nghĩa là thay đổi cấu trúc của một loại hỗn hợp, điều này không xảy ra trong trường hợp này.
• Nó không đặc biệt có thể tái sử dụng

Cách tiếp cận chức năng ES6 / ES2015

Xin lưu ý rằng tất cả các chức năng được xác định ở dạng curried.

// small, reusable auxiliary functions

const keys = o => Object.keys(o);

const assign = (...o) => Object.assign({}, ...o);

const map = f => xs => xs.map(x => f(x));

const mul = y => x => x * y;

const sqr = x => mul(x) (x);


// the actual map function

const omap = f => o => {
  o = assign(o); // A
  map(x => o[x] = f(o[x])) (keys(o)); // B
  return o;
};


// mock data

const o = {"a":1, "b":2, "c":3};


// and run

console.log(omap(sqr) (o));
console.log(omap(mul(10)) (o));

• Trong dòng A ođược gán lại. Vì Javascript vượt qua các giá trị tham chiếu bằng cách chia sẻ , một bản sao nông ođược tạo ra. Bây giờ chúng ta có thể đột biến otrong omapmà không bị đột biến otrong phạm vi cha.
• Trong mapgiá trị trả về của dòng B bị bỏ qua, vì mapthực hiện đột biến o. Vì tác dụng phụ này vẫn nằm trong phạm vi omapvà không thể nhìn thấy trong phạm vi cha mẹ, nên nó hoàn toàn có thể chấp nhận được.

Đây không phải là giải pháp nhanh nhất, mà là một giải pháp khai báo và tái sử dụng. Đây là cách thực hiện tương tự như một dòng, ngắn gọn nhưng ít đọc hơn:

const omap = f => o => (o = assign(o), map(x => o[x] = f(o[x])) (keys(o)), o);

Phụ lục - tại sao các đối tượng không được lặp lại theo mặc định?

ES2015 đã chỉ định các giao thức lặp và lặp. Nhưng các đối tượng vẫn không thể lặp lại và do đó không thể ánh xạ. Lý do là sự pha trộn của dữ liệu và cấp độ chương trình .

JavaScript vừa có Object.fromEntriesphương thức mới .

Thí dụ

function mapObject (obj, fn) {
  return Object.fromEntries(
    Object
      .entries(obj)
      .map(fn)
  )
}

const myObject = { a: 1, b: 2, c: 3 }
const myNewObject = mapObject(myObject, ([key, value]) => ([key, value * value]))
console.log(myNewObject)

Giải trình

Đoạn mã trên chuyển đổi Object thành một Array ( [[<key>,<value>], ...]) mà bạn có thể ánh xạ. Object.fromEntrieschuyển đổi mảng trở lại một đối tượng.

Điều thú vị về mẫu này, đó là giờ đây bạn có thể dễ dàng lấy các khóa đối tượng trong khi ánh xạ.

Tài liệu

• Object.fromEntries()
• Object.entries()

Hỗ trợ trình duyệt

Object.fromEntrieshiện chỉ được hỗ trợ bởi các trình duyệt / công cụ này , tuy nhiên vẫn có sẵn các polyfill (ví dụ @ babel / polyfill ).

Phiên bản tối thiểu (es6):

Object.entries(obj).reduce((a, [k, v]) => (a[k] = v * v, a), {})

Để có hiệu suất tối đa.

Nếu đối tượng của bạn không thay đổi thường xuyên nhưng cần phải lặp đi lặp lại thường xuyên, tôi khuyên bạn nên sử dụng Bản đồ gốc làm bộ đệm.

// example object
var obj = {a: 1, b: 2, c: 'something'};

// caching map
var objMap = new Map(Object.entries(obj));

// fast iteration on Map object
objMap.forEach((item, key) => {
  // do something with an item
  console.log(key, item);
});

Object.entries đã hoạt động trong Chrome, Edge, Firefox và beta Opera vì vậy đây là một tính năng trong tương lai. Đó là từ ES7 vì vậy hãy điền vào https://github.com/es-shims/Object.entries cho IE khi nó không hoạt động.

bạn có thể sử dụng mapphương thức và forEachtrên các mảng nhưng nếu bạn muốn sử dụng nó Objectthì bạn có thể sử dụng nó với twist như bên dưới:

Sử dụng Javascript (ES6)

var obj = { 'a': 2, 'b': 4, 'c': 6 };   
Object.entries(obj).map( v => obj[v[0]] *= v[1] );
console.log(obj); //it will log as {a: 4, b: 16, c: 36}

var obj2 = { 'a': 4, 'b': 8, 'c': 10 };
Object.entries(obj2).forEach( v => obj2[v[0]] *= v[1] );
console.log(obj2); //it will log as {a: 16, b: 64, c: 100}

Sử dụng jQuery

var ob = { 'a': 2, 'b': 4, 'c': 6 };
$.map(ob, function (val, key) {
   ob[key] *= val;
});
console.log(ob) //it will log as {a: 4, b: 16, c: 36}

Hoặc bạn có thể sử dụng các vòng lặp khác cũng giống như $.eachphương pháp như ví dụ dưới đây:

$.each(ob,function (key, value) {
  ob[key] *= value;
});
console.log(ob) //it will also log as {a: 4, b: 16, c: 36}

Điều map functionnày không tồn tại trên Object.prototypetuy nhiên bạn có thể mô phỏng nó như vậy

var myMap = function ( obj, callback ) {

    var result = {};

    for ( var key in obj ) {
        if ( Object.prototype.hasOwnProperty.call( obj, key ) ) {
            if ( typeof callback === 'function' ) {
                result[ key ] = callback.call( obj, obj[ key ], key, obj );
            }
        }
    }

    return result;

};

var myObject = { 'a': 1, 'b': 2, 'c': 3 };

var newObject = myMap( myObject, function ( value, key ) {
    return value * value;
});

Tôi đã xem đây là mục đầu tiên trong một tìm kiếm Google cố gắng học cách làm điều này và nghĩ rằng tôi sẽ chia sẻ cho các folsk khác tìm thấy giải pháp gần đây mà tôi tìm thấy, sử dụng gói npm bất biến.

Tôi nghĩ thật thú vị khi chia sẻ vì bất biến sử dụng tình huống CHÍNH XÁC của OP trong tài liệu riêng của họ - sau đây không phải là mã của riêng tôi mà được lấy từ tài liệu js bất biến hiện tại:

const { Seq } = require('immutable')
const myObject = { a: 1, b: 2, c: 3 }
Seq(myObject).map(x => x * x).toObject();
// { a: 1, b: 4, c: 9 } 

Không phải Seq có các thuộc tính khác ("Seq mô tả hoạt động lười biếng, cho phép chúng sử dụng hiệu quả chuỗi tất cả các phương pháp thu thập bậc cao (như bản đồ và bộ lọc) bằng cách không tạo các bộ sưu tập trung gian") và một số dữ liệu js bất biến khác cấu trúc cũng có thể làm công việc khá hiệu quả.

Tất cả mọi người sử dụng phương pháp này tất nhiên sẽ phải npm install immutablevà có thể muốn đọc các tài liệu:

https://facebook.github.io/immutable-js/

EDIT: Cách chính tắc sử dụng các tính năng JavaScript mới hơn là -

const identity = x =>
  x

const omap = (f = identity, o = {}) =>
  Object.fromEntries(
    Object.entries(o).map(([ k, v ]) =>
      [ k, f(v) ]
    )
  )

Đâu olà một số đối tượng và flà chức năng ánh xạ của bạn. Hoặc chúng ta có thể nói, được cung cấp một hàm từ a -> bvà một đối tượng có giá trị loại a, tạo ra một đối tượng có giá trị loại b. Là một chữ ký loại giả -

// omap : (a -> b, { a }) -> { b }

Câu trả lời ban đầu được viết để chứng minh một tổ hợp mạnh mẽ, mapReducecho phép chúng ta nghĩ về sự biến đổi của chúng ta theo một cách khác

1. m, chức năng ánh xạ - cung cấp cho bạn cơ hội để chuyển đổi phần tử đến trước khi
2. r, hàm khử - hàm này kết hợp bộ tích lũy với kết quả của phần tử được ánh xạ

Theo trực giác, mapReducetạo ra một bộ giảm tốc mới, chúng ta có thể cắm trực tiếp vào Array.prototype.reduce. Nhưng quan trọng hơn, chúng ta có thể triển khai thực hiện functor đối tượng của mình omapmột cách rõ ràng bằng cách sử dụng monoid đối tượng Object.assignvà {}.

const identity = x =>
  x
  
const mapReduce = (m, r) =>
  (a, x) => r (a, m (x))

const omap = (f = identity, o = {}) =>
  Object
    .keys (o)
    .reduce
      ( mapReduce
          ( k => ({ [k]: f (o[k]) })
          , Object.assign
          )
      , {}
      )
          
const square = x =>
  x * x
  
const data =
  { a : 1, b : 2, c : 3 }
  
console .log (omap (square, data))
// { a : 1, b : 4, c : 9 }

Lưu ý phần duy nhất của chương trình chúng tôi thực sự phải viết là bản thân việc thực hiện ánh xạ -

k => ({ [k]: f (o[k]) })

Điều đó nói rằng, đưa ra một đối tượng đã biết ovà một số khóa k, xây dựng một đối tượng và thuộc tính được tính toán klà kết quả của việc gọi fgiá trị của khóa , o[k].

Chúng ta có một cái nhìn thoáng qua về mapReducetiềm năng giải trình tự nếu chúng ta trừu tượng đầu tiênoreduce

// oreduce : (string * a -> string * b, b, { a }) -> { b }
const oreduce = (f = identity, r = null, o = {}) =>
  Object
    .keys (o)
    .reduce
      ( mapReduce
          ( k => [ k, o[k] ]
          , f
          )
      , r
      )

// omap : (a -> b, {a}) -> {b}
const omap = (f = identity, o = {}) =>
  oreduce
    ( mapReduce
        ( ([ k, v ]) =>
            ({ [k]: f (v) })
        , Object.assign
        )
    , {}
    , o
    )

Mọi thứ đều hoạt động như nhau, nhưng omapbây giờ có thể được xác định ở cấp độ cao hơn. Tất nhiên cái mới Object.entrieslàm cho điều này trông ngớ ngẩn, nhưng bài tập vẫn quan trọng đối với người học.

Bạn sẽ không thấy hết tiềm năng mapReduceở đây, nhưng tôi chia sẻ câu trả lời này bởi vì thật thú vị khi xem có bao nhiêu địa điểm có thể được áp dụng. Nếu bạn quan tâm đến cách nó có nguồn gốc và những cách khác có thể hữu ích, vui lòng xem câu trả lời này .

Dựa trên câu trả lời @Amberlamp, đây là một chức năng tiện ích (như một nhận xét trông nó xấu xí)

function mapObject(obj, mapFunc){
    return Object.keys(obj).reduce(function(newObj, value) {
        newObj[value] = mapFunc(obj[value]);
        return newObj;
    }, {});
}

và việc sử dụng là:

var obj = {a:1, b:3, c:5}
function double(x){return x * 2}

var newObj = mapObject(obj, double);
//=>  {a: 2, b: 6, c: 10}

var myObject = { 'a': 1, 'b': 2, 'c': 3 };


Object.prototype.map = function(fn){
    var oReturn = {};
    for (sCurObjectPropertyName in this) {
        oReturn[sCurObjectPropertyName] = fn(this[sCurObjectPropertyName], sCurObjectPropertyName);
    }
    return oReturn;
}
Object.defineProperty(Object.prototype,'map',{enumerable:false});





newObject = myObject.map(function (value, label) {
    return value * value;
});


// newObject is now { 'a': 1, 'b': 4, 'c': 9 }

Phản hồi của tôi chủ yếu dựa trên phản hồi được đánh giá cao nhất ở đây và hy vọng mọi người hiểu (cũng có lời giải thích tương tự trên GitHub của tôi). Đây là lý do tại sao sự áp đặt của anh ấy với bản đồ hoạt động:

Object.keys(images).map((key) => images[key] = 'url(' + '"' + images[key] + '"' +    
')');

Mục đích của hàm là lấy một đối tượng và sửa đổi nội dung ban đầu của đối tượng bằng một phương thức có sẵn cho tất cả các đối tượng (các đối tượng và mảng giống nhau) mà không trả về một mảng. Hầu hết mọi thứ trong JS là một đối tượng và vì lý do đó, các yếu tố tiếp tục đi xuống đường kế thừa có thể có khả năng sử dụng kỹ thuật những thứ có sẵn cho những người trên dòng (và ngược lại nó xuất hiện).

Lý do điều này hoạt động là do các hàm .map trả về một mảng YÊU CẦU mà bạn cung cấp RETURN rõ ràng hoặc ẩn của một mảng thay vì chỉ sửa đổi một đối tượng hiện có. Về cơ bản, bạn lừa chương trình nghĩ rằng đối tượng là một mảng bằng cách sử dụng Object.keys sẽ cho phép bạn sử dụng chức năng bản đồ với tác động của nó đối với các giá trị mà các khóa riêng lẻ được liên kết với (tôi thực sự vô tình trả lại mảng nhưng đã sửa nó). Miễn là không có sự trở lại theo nghĩa thông thường, sẽ không có mảng nào được tạo với đối tượng ban đầu còn nguyên vẹn và được sửa đổi như được lập trình.

Chương trình cụ thể này lấy một đối tượng được gọi là hình ảnh và lấy các giá trị của các khóa của nó và nối các thẻ url để sử dụng trong một chức năng khác. Bản gốc là đây:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

... và sửa đổi là đây:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

Cấu trúc ban đầu của đối tượng được giữ nguyên cho phép truy cập thuộc tính bình thường miễn là không có trả lại. KHÔNG có nó trả về một mảng như bình thường và mọi thứ sẽ ổn. Mục tiêu là THAM GIA các giá trị ban đầu (hình ảnh [khóa]) cho những gì được mong muốn và không phải bất cứ điều gì khác. Theo như tôi biết, để ngăn chặn đầu ra mảng, phải có TÁI TẠO hình ảnh [khóa] và không có yêu cầu ngầm hoặc rõ ràng nào để trả về một mảng (việc gán biến thực hiện điều này và bị trục trặc qua lại cho tôi).

BIÊN TẬP:

Đi đến giải quyết phương pháp khác của anh ấy về việc tạo đối tượng mới để tránh sửa đổi đối tượng ban đầu (và việc gán lại dường như vẫn cần thiết để tránh vô tình tạo một mảng làm đầu ra). Các hàm này sử dụng cú pháp mũi tên và nếu bạn chỉ muốn tạo một đối tượng mới để sử dụng trong tương lai.

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

Cách thức hoạt động của các chức năng này là như vậy:

mapFn lấy hàm để thêm vào sau (trong trường hợp này (value) => value) và chỉ cần trả về bất cứ thứ gì được lưu trữ ở đó làm giá trị cho khóa đó (hoặc nhân với hai nếu bạn thay đổi giá trị trả về như anh ta đã làm) trong mapFn ( obj) [khóa],

và sau đó xác định lại giá trị ban đầu được liên kết với khóa trong kết quả [key] = mapFn (obj) [key]

và trả về hoạt động được thực hiện trên kết quả (bộ tích lũy nằm trong dấu ngoặc được bắt đầu ở cuối hàm .reduce).

Tất cả điều này đang được thực hiện trên đối tượng đã chọn và VẪN CÓ THỂ yêu cầu ngầm định cho một mảng được trả về và chỉ hoạt động khi gán lại các giá trị theo như tôi có thể nói. Điều này đòi hỏi một số môn thể dục tinh thần nhưng làm giảm các dòng mã cần thiết như có thể thấy ở trên. Đầu ra giống hệt như có thể được nhìn thấy dưới đây:

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

Hãy ghi nhớ điều này đã làm việc với NON-NUMBERS. Bạn có thể sao chép BẤT K object đối tượng nào bằng cách SIMPLY TRẢ LẠI GIÁ TRỊ trong hàm mapFN.

Hàm đầu tiên trả lời câu hỏi. Nó tạo ra một bản đồ.

Hàm thứ hai không tạo bản đồ. Thay vào đó, nó lặp qua các thuộc tính trong đối tượng hiện có bằng cách sử dụng hasOwnProperty(). Sự thay thế bản đồ này có thể là một giải pháp tốt hơn trong một số tình huống.

var myObject = { 'a': 1, 'b': 2, 'c': 3 }


//creates a map (answers question, but function below is 
//much better in some situations)
var newObject = {};
makeMap();    
function makeMap() {
    for (var k in myObject) {
        var value = myObject[k];
        newObject[k] = value * value;
    }
    console.log(newObject); //mapped array
}


//Doesn't create a map, just applies the function to
//a specific property using existing data
function getValue(key) {
  for (var k in myObject) {
    if (myObject.hasOwnProperty(key)) {
      var value = myObject[key]
      return value * value; //stops iteration
    }
  }
}

Input: <input id="input" value="" placeholder="a, b or c"><br>
Output:<input id="output"><br>
<button onclick="output.value=getValue(input.value)" >Get value</button>

Nếu bạn quan tâm đến mapping không chỉ các giá trị mà cả các khóa, tôi đã viết Object.map(valueMapper, keyMapper), nó hoạt động theo cách này:

var source = { a: 1, b: 2 };
function sum(x) { return x + x }

source.map(sum);            // returns { a: 2, b: 4 }
source.map(undefined, sum); // returns { aa: 1, bb: 2 }
source.map(sum, sum);       // returns { aa: 2, bb: 4 }

Tôi cũng cần một phiên bản cho phép sửa đổi các phím (dựa trên câu trả lời @Amberlamp và @yonatanmn);

var facts = [ // can be an object or array - see jsfiddle below
    {uuid:"asdfasdf",color:"red"},
    {uuid:"sdfgsdfg",color:"green"},
    {uuid:"dfghdfgh",color:"blue"}
];

var factObject = mapObject({}, facts, function(key, item) {
    return [item.uuid, {test:item.color, oldKey:key}];
});

function mapObject(empty, obj, mapFunc){
    return Object.keys(obj).reduce(function(newObj, key) {
        var kvPair = mapFunc(key, obj[key]);
        newObj[kvPair[0]] = kvPair[1];
        return newObj;
    }, empty);
}

factObject =

{
"asdfasdf": {"color":"red","oldKey":"0"},
"sdfgsdfg": {"color":"green","oldKey":"1"},
"dfghdfgh": {"color":"blue","oldKey":"2"}
}

Chỉnh sửa: thay đổi nhỏ để vượt qua trong đối tượng bắt đầu {}. Cho phép nó là [] (nếu các khóa là số nguyên)

Tôi đặc biệt muốn sử dụng cùng chức năng mà tôi đang sử dụng cho mảng cho một đối tượng và muốn giữ cho nó đơn giản. Điều này làm việc cho tôi:

var mapped = [item].map(myMapFunction).pop();

Để phản hồi chặt chẽ hơn với chính xác những gì OP yêu cầu, OP muốn có một đối tượng:

myObject = { 'a': 1, 'b': 2, 'c': 3 }

để có một phương pháp bản đồ myObject.map,

tương tự như Array.prototype.map sẽ được sử dụng như sau:

newObject = myObject.map (hàm (giá trị, nhãn) {
    giá trị trả về * giá trị;
});
// newObject hiện là {'a': 1, 'b': 4, 'c': 9}

Câu trả lời imho tốt nhất (được đo bằng thuật ngữ " gần với những gì được hỏi " + "không cần ES {5,6,7} không cần thiết") sẽ là:

myObject.map = function mapForObject(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property) && property != "map"){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}

Mã ở trên tránh cố ý sử dụng bất kỳ tính năng ngôn ngữ nào, chỉ có sẵn trong các phiên bản ECMAScript gần đây. Với đoạn mã trên, vấn đề có thể được giải quyết.

myObject = { 'a': 1, 'b': 2, 'c': 3 };

myObject.map = function mapForObject(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property) && property != "map"){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}

newObject = myObject.map(function (value, label) {
  return value * value;
});
console.log("newObject is now",newObject);

Bên cạnh một số người cau mày, sẽ có khả năng chèn giải pháp vào chuỗi nguyên mẫu như thế này.

Object.prototype.map = function(callback)
{
  var result = {};
  for(var property in this){
    if(this.hasOwnProperty(property)){
      result[property] = callback(this[property],property,this);
    }
  }
  return result;
}

Một cái gì đó, khi được thực hiện với sự giám sát cẩn thận sẽ không có bất kỳ tác động xấu nào và không ảnh hưởng đến mapphương thức của các đối tượng khác (ví dụ như Array map).

Đầu tiên, chuyển đổi HTMLCollection của bạn bằng Object.entries (bộ sưu tập). Sau đó, đây là một lần lặp mà bây giờ bạn có thể sử dụng phương thức .map trên nó.

Object.entries(collection).map(...)

tham khảo https://medium.com/@js_tut/calling-javascript-code-on-multipl-div-elements-without-the-id-attribution-97ff6a50f31

Xác định một hàm mapEntries.

mapEntries có một hàm gọi lại được gọi trên mỗi mục trong đối tượng với giá trị tham số, khóa và đối tượng. Nó sẽ trả về một giá trị mới.

mapEntries sẽ trả về một đối tượng mới với các giá trị mới được trả về từ cuộc gọi lại.

Object.defineProperty(Object.prototype, 'mapEntries', {
  enumerable: false,
  value: function (mapEntriesCallback) {
    return Object.fromEntries(
      Object.entries(this).map(
        ([key, value]) => [key, mapEntriesCallback(value, key, this)]
      )
    )
  }
})


// Usage example:

var object = {a: 1, b: 2, c: 3}
var newObject = object.mapEntries(value => value * value)
console.log(newObject)
//> {a: 1, b: 4, c: 9}

Chỉnh sửa: Phiên bản trước không xác định rằng đây không phải là tài sản vô số

Hey đã viết một chức năng mapper có thể giúp đỡ.

    function propertyMapper(object, src){
         for (var property in object) {   
           for (var sourceProp in src) {
               if(property === sourceProp){
                 if(Object.prototype.toString.call( property ) === '[object Array]'){
                   propertyMapper(object[property], src[sourceProp]);
                   }else{
                   object[property] = src[sourceProp];
                }
              }
            }
         }
      }

Một cách khác là sử dụng hàm chuỗi json tùy chỉnh cũng có thể hoạt động trên các đối tượng sâu. Điều này có thể hữu ích nếu bạn có ý định đăng nó lên máy chủ dù là json

const obj = { 'a': 1, 'b': 2, x: {'c': 3 }}
const json = JSON.stringify(obj, (k, v) => typeof v === 'number' ? v * v : v)

console.log(json)
console.log('back to json:', JSON.parse(json))

Tôi chỉ xử lý các chuỗi để giảm miễn trừ:

Object.keys(params).map(k => typeof params[k] == "string" ? params[k] = params[k].trim() : null);

Đối tượng ánh xạ trong TypeScript

Tôi thích các ví dụ sử dụng Object.fromEntriesnhư ví dụ này , nhưng vẫn không dễ sử dụng. Các câu trả lời sử dụng Object.keysvà sau đó tìm kiếm keythực sự đang thực hiện nhiều tra cứu có thể không cần thiết.

Tôi ước có một Object.mapchức năng, nhưng chúng ta có thể tự tạo và gọi nó objectMapvới khả năng sửa đổi cả hai keyvà value:

Cách sử dụng (JavaScript):

const myObject = { 'a': 1, 'b': 2, 'c': 3 };

// keep the key and modify the value
let obj = objectMap(myObject, val => val * 2);
// obj = { a: 2, b: 4, c: 6 }


// modify both key and value
obj = objectMap(myObject,
    val => val * 2 + '',
    key => (key + key).toUpperCase());
// obj = { AA: '2', BB: '4', CC: '6' }

Mã (TypeScript):

interface Dictionary<T> {
    [key: string]: T;
}

function objectMap<TValue, TResult>(
    obj: Dictionary<TValue>,
    valSelector: (val: TValue, obj: Dictionary<TValue>) => TResult,
    keySelector?: (key: string, obj: Dictionary<TValue>) => string,
    ctx?: Dictionary<TValue>
) {
    const ret = {} as Dictionary<TResult>;
    for (const key of Object.keys(obj)) {
        const retKey = keySelector
            ? keySelector.call(ctx || null, key, obj)
            : key;
        const retVal = valSelector.call(ctx || null, obj[key], obj);
        ret[retKey] = retVal;
    }
    return ret;
}

Nếu bạn không sử dụng TypeScript thì hãy sao chép mã ở trên trong Sân chơi TypeScript để lấy mã JavaScript.

Ngoài ra, lý do tôi đặt keySelectorsau valSelectortrong danh sách tham số, là vì nó là tùy chọn.

* Một số tín dụng đi đến câu trả lời của alexander-mills .

const mapObject = (targetObject, callbackFn) => {
    if (!targetObject) return targetObject;
    if (Array.isArray(targetObject)){
        return targetObject.map((v)=>mapObject(v, callbackFn))
    }
    return Object.entries(targetObject).reduce((acc,[key, value]) => {
        const res = callbackFn(key, value);
        if (!Array.isArray(res) && typeof res ==='object'){
            return {...acc, [key]: mapObject(res, callbackFn)}
        }
        if (Array.isArray(res)){
            return {...acc, [key]: res.map((v)=>mapObject(v, callbackFn))}
        }
        return {...acc, [key]: res};
    },{})
};
const mapped = mapObject(a,(key,value)=> {
    if (!Array.isArray(value) && key === 'a') return ;
    if (!Array.isArray(value) && key === 'e') return [];
    if (!Array.isArray(value) && key === 'g') return value * value;
    return value;
});
console.log(JSON.stringify(mapped)); 
// {"b":2,"c":[{"d":2,"e":[],"f":[{"g":4}]}]}

Hàm này đi theo cách đệ quy thông qua đối tượng và mảng của các đối tượng. Các thuộc tính có thể bị xóa nếu trả về không xác định