Question

我正在尝试进行解构分配。现在我有一个案例，我试图应对自身的破坏。

例如，我有这样的输入：

let input = {latitude: "17.0009", longitude: "82.2108"}

其中latitude和longitude键值是字符串，但是我想在解构时将它们解析为数字。

let input = {latitude: "17.0009", longitude: "82.2108"}
let {latitude,longitude} = input

console.log(typeof latitude,typeof longitude)

我在babel repl中看到，它引用了一个对象，然后访问每个键。所以上面的代码与：

"use strict";

 var arr = {
   latitude: "17.0009",
   longitude: "82.2108"
  };
 var latitude = arr.latitude,
     longitude = arr.longitude;

我想做一些使用解构语法本身的事情。

"use strict";

var arr = {
  latitude: "17.0009",
  longitude: "82.2108"
};
var latitude = Number(arr.latitude),
    longitude = Number(arr.longitude);

我也很乐意看到一些骇客。

更新

我可以通过,运算符来解决一个问题：

let arr = {latitude: "17.0009", longitude: "82.2108"}

let {lat,lng} = ({latitude,longitude} = arr, ({lat:+latitude,lng:+longitude}))

console.log(typeof lat, typeof lng)

旁注：- ，您必须阅读 Moritz Roessler's answer，该词很晦涩，但其中包含丰富的知识和信息

Answer 1

解构只是从对象和数组解压缩属性并将它们分配给变量的一种好方法。正如问题中的代码所暗示的，任何类型的操作都是不可能的。

一个 hack 将创建另外2个变量（input中不存在），并将default value设置为与先前已废弃的属性相等的数量：

let input = { latitude: "17.0009", longitude: "82.2108" }
let { latitude, longitude, lat = +latitude, long = +longitude } = input

console.log(typeof latitude, typeof longitude, typeof lat, typeof long)

代码大约横贯于此（Babel）：

var latitude = input.latitude,
    longitude = input.longitude,
    lat = input.lat === undefined ? +latitude : input.lat,
    long = input.long === undefined ? +longitude : input.long;

它只是利用创建变量和分配属性值的顺序。同样，这仅在lat中没有long或input属性的情况下有效。否则，它将失败三元条件，并且lat将设置为input.lat。

尽管如此，这样的事情更容易阅读：

let { latitude, longitude } = input;
let lat = +latitude, 
    long = +longitude;

OR

let [ lat, long ] = [ +latitude, +longitude ]

Answer 2

您可以解构值，获取值的数组，然后映射值的新数据类型，然后将此值分配回变量。

let input = { latitude: "17.0009", longitude: "82.2108" },
    { latitude, longitude} = input;

[latitude, longitude] = [latitude, longitude].map(Number);

console.log(typeof latitude, latitude);
console.log(typeof longitude, longitude);

Answer 3

虽然您不能在解构表达式本身中执行类型转换，但可能的替代方法/解决方法是对函数参数中的属性进行解构，然后返回其中包含新类型的数组。

例如，如下所示：

const input = {latitude: "17.0009", longitude: "82.2108"}
const [lat, lng] = (({latitude:a, longitude:b}) => [+a, +b])(input);

console.log(typeof lat, typeof lng); // number number

但是，对于这样的事情，我不会使用解构，并且可能会求助于常规的点符号：

const input = {latitude: "17.0009", longitude: "82.2108"}
const lat = +input.latitude;
const lng = +input.longitude;

console.log(typeof lat, typeof lng); // number number

Answer 4

您可能具有可重用的功能，如下所示：

const numberInputs = input =>
    Object.keys(input).reduce((acc, val) => {
        acc[val] = +input[val];
        return acc;
    }, {});

然后在...之间重复使用它

然后做：

let {latitude,longitude} = numberInputs(input);

console.log(typeof latitude,typeof longitude) //number //number

并获得17.0009和82.2108作为数字...

通过这种方式，您还保留了原始对象并进行了复制...因此，您既拥有对象又拥有对象副本，该对象具有数字作为值...

Answer 5

使用String.prototype上定义的吸气剂作为辅助函数，可以做到这一点。

_{（您可能不想这样做）}

Object.defineProperty (String.prototype, "asNumber",{
   get: function () { return +this}
});
let input = {latitude: "17.0009", longitude: "82.2108"}
let {latitude:{asNumber:latitude},
     longitude: {asNumber:longitude}} = input

console.log (latitude, longitude)

让我们将其分解为更简单的步骤。

//Extending the `String` prototype means every string 
//will have access to the defined property  via 
//its prototype, so
String.prototype.foo = function () {return `${this}.foo\`} 
//means you can now call foo() like any other string method
"bar".foo() //"bar.foo"`

//A getter allows you to define a function that acts 
//as a property which will be executed upon access. 
let obj = {get getter () {console.log ('Hi');}}
obj.getter // Hi

//Combine those two and you can call functions by 
//accessing properties of strings. 
Object.defineProperty (String.prototype, "asNumber",{
   get: function () { return +this}
});

//Now that you have a property that is available at 
//every string - and make it execute a function; you 
//can convert a string to a number, simply by
//accessing a property
"42".asNumber //42

//To make that work with destructuring assignment, 
//you need to know about another handy feature. You 
//can assign destructured properties to a new 
//variable name.
let {a:b, b:a} = {a:'a', b:'b'};
a; //'b'
b; //'a'

//Since you can nest destructuring assignments, and 
//every string implicitly has a 'asNumber' property, 
//you can destructure that property as well. 

let {lat: {asNumber}} = {lat: "42"};
asNumber //42

//The last thing to know is, there's apparently 
//nothing wrong with using an existing variable as 
//new name for a destructured property. So you can 
//just use the `asNumber` property from the 
//prototype and assign it to the same variable  
//you destructured from the object.
let {lat: {asNumber: lat}} = {lat: "42"};
lat; //42

_{使用相同的名称没有任何问题，因为在let块的作用域中只会引入最后一个变量名称}

Answer 6

不可能-销毁期间无法对属性执行任何操作。如果使用解构将属性提取到变量中，则该变量将为原始属性值的===。

（当然，您可以在进行分解之前将原始对象的值转换为Number，但这不是同一回事）

Answer 7

我可能会进行设置，以便我关心的每个“对象类型”都有一个对应的“解析器类型”：一个具有相同键的对象，但其值是每个成员的适当解析函数。

像这样：

"use strict";

var arr = {
    latitude: "17.0009",
    longitude: "82.2108"
};

function Parser(propParsers)
{
    this.propParsers = propParsers;
    this.parse = function (obj) {
        var result = {};
        var propParsers = this.propParsers;
        Object.keys(obj).forEach(function (k) {
            result[k] = propParsers[k](obj[k]);
        });
        return result;
    };
}

var parser = new Parser({
    latitude: Number,
    longitude: Number
});

let {latitude,longitude} = parser.parse(arr);
console.log(latitude);
console.log(longitude);

Answer 8

如果您不介意使用lodash，可以尝试以下操作：

import { mapValues } from 'lodash';

const input = {latitude: "17.0009", longitude: "82.2108"}
const {latitude, longitude} = mapValues(input, Number);

解构时如何将字符串解析为数字？

8 个答案: