Question

我有这个代码绘制图表：（包含所需的库）

<script type="text/javascript">

    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",//theme1
            title:{
                text: "Basic Column Chart - CanvasJS"
            },
            animationEnabled: true,   // change to true
            data: [
                {
                    // Change type to "bar", "area", "spline", "pie",etc.
                    type: "column",
                    dataPoints: [
                        { label: "apple",  y: 10  },
                        { label: "orange", y: 15  },
                        { label: "banana", y: 25  },
                        { label: "mango",  y: 30  },
                        { label: "grape",  y: 28  }
                    ]
                }
            ]
        });
        chart.render();
    }
</script>

一切都很好。那些输入是测试。现在我需要做出真正的投入。我有两个这样的JS数组：

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

有人怎么能从我的两个数组中做出类似下面的内容？

{ label: "John",  y: 10  },
{ label: "Jack",  y: 585 },
{ label: "Ali",  y: 563 },
.
.
.

Answer 1

使用Array#map的可能解决方案。我假设两个数组都有相同的长度。

＆＃13;

var numbers = [10, 585, 563, 24, 4, 486, 123, 458],
    names = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'],
    res = names.map((v,i) => Object.assign({}, {label: v, y: numbers[i]}));
    
    console.log(res);

＆＃13;

Answer 2

const numbers = [10, 585, 563, 24, 4, 486, 123, 458];
const names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

const r = names.map((x,i) => { return {label: x, y: numbers[i]}})

console.log(JSON.stringify(r, null, 2))

Answer 3

如果您不熟悉上面回答的ECMAScript 6版本，您也可以使用这种稍微过时的语法：

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

var result = names.map(function(value, index) {
    return { label: value, y: numbers[index] };
});

Answer 4

或更短的版本：

＆＃13;

var numbers = [10, 585, 563, 24, 4, 486, 123, 458],
names = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'],
res = names.map((v,i) => ({label: v, y: numbers[i]}));

console.log(res);

＆＃13;

Answer 5

你可以这样做：

＆＃13;

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

var res = names.map((val,i)=>{
  return {label:val, y:numbers[i]};
});
console.log(res);

＆＃13;

Answer 6

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter']

var obj = []

for (var i in names) {
    obj[names[i]] = numbers[i];
}

编辑：没关系，应该更彻底地阅读这个问题。我以为你希望能够解决整数值：

obj.John == 10;

Answer 7

使用lodash可能更具可读性：

＆＃13;

 <Style x:Key="ComboBoxItemNoMouseOver" TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBoxItem">
                <Border>
                    <Grid Background="{TemplateBinding Background}">
                        <Rectangle Fill="{DynamicResource StandardBackgroundColor}" 
                                   IsHitTestVisible="False"/>
                        <Rectangle x:Name="fillColor" Fill="{DynamicResource DisabledGray}"
                                   IsHitTestVisible="False"
                                   Opacity="0" Stroke="{DynamicResource StandardBorderColor}"
                                   StrokeThickness="2" />
                        <ContentControl x:Name="contentControl"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                        Foreground="{TemplateBinding Foreground}" IsHitTestVisible="False">
                            <ContentPresenter x:Name="contentPresenter" />
                        </ContentControl>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

＆＃13;

如何从JS数组中创建JS对象？

7 个答案: