在一个表达式中返回一个新对象，并修改其属性

Question

I found myself wanting to return a 180 degree hue-rotated color from a function. My project's using D3, so that's the library I'm using to do this. Unfortunately, D3 doesn't come with a function to rotate the hue.

This question is not specific to D3, I'm just using it as an example.

So I had to do something like this:

var c = d3.hsl(colorString);
c.h += 180;
return c;

Concise, but it's three expressions. Doesn't scratch my nerd itch. What I wish I could do is:

return d3.hsl(colorString).h += 180

but obviously that just returns the value of h , not the entire object.

Here is the ridiculous construction I had to resort to, using some Underscore.js:

return  _.create(Object.getPrototypeOf(d3.hsl()),
        _.mapObject(d3.hsl(colorString), function(val, key) {
            return key === "h" ? val + 180 : val;
        }));

See, I can't just return the result of mapObject() because it still needs to use the prototype of what d3.hsl() returns, which is why I needed to wrap that in a create() .

So this works. It's just kind of ridiculous.

Is there any way that I could do something in one line, such as...

return d3.hsl(colorString).with180AddedToH();

Answer 1

you can return a function so why not:

function with180AddedToH(obj) {
    obj.h += 180;
    return obj;
}

and then:

return with180AddedToH(d3.hsl(colorString))

or is this only going to occur once? and this is too much?

Answer 2

You could make a more generic version of the other answer here like:

console.log(mutate(o, {h: o.h + 180, j: "abc"}));

function mutate(o, m){
    for(p in m){
        if (p in o){
            o[p] = m[p];
        }
    }
    return o;
}

but you still have to bind your variable on another line in order to reference it twice. You could alter this function to accept an object of mutator functions like:

console.log(mutate(d3.hsl(colorString), {h: function(x){return x + 180}}));

function mutate(o, m){
    for(p in m){
        if (p in o){
            o[p] = m[p](o[p]);
        }
    }
    return o;
}

Where it matches on property name and applies that function to the property and then sets it. It then returns the object so you could end up with

return mutate(d3.hsl(colorString), {h: function(x){return x + 180});

which still seems a little heavy for what you're trying to do, but in the right circumstances might be useful. Although in ES6 you could get away with:

return mutate(d3.hsl(colorString), {h: x => x + 180});

Answer 3

You can use Object.assign . It's native in ES2015 but there's a polyfill provided if you need to support other versions of JavaScript.

function rotateHue(colorObj, degrees) {
  return Object.assign(colorObj, {h: colorObj.h + degrees});
}

rotateHue(d3.hsl(colorString));

This is quite similar to the mutate function provided by mafafu, but instead uses a JavaScript native.