javascript - 如何更改数组的索引顺序？

Question

我有一个按钮，它有一个名为 clickNext() 的函数。每当单击该按钮时，都会增加名为“arr1”的数组上的索引位置(scope.selected)。

<button type="button" class="right-btn col-xs-6" role="menuitem" ng-click="clickNext()">Next</button>

.

function clickNext()
        {
            scope.selected = (scope.selected + 1) % length;
        }


arr1 = [
        {apple: 1 , tango},
        {banana: 3, kappa},
        {orange:5, alpha},
        {apple: 8 , beta},
        {grape: 10 , sigma}
        ]

问题

我有一个与 arr1 相同的数组，名为“arr2”。我想做的是让 clickNext() 增量到基于 arr2 数组而不是 arr1 数组的下一个索引位置。

现在，clickNext 函数仍然按照 arr1 数组的顺序递增。例如，如果我单击该按钮，它将从 Orange:5 开始，然后移至 apple 8 等。

arr2 = [
        {orange:5, alpha},
        {apple: 8 , beta},
        {banana: 3, kappa},
        {grape: 10 , sigma},
        {apple: 1 , tango}
        ]

我尝试过的 我实现此目的的过程是使用 findIndex() 函数并将 arr2 项与 arr1 项进行匹配。这不起作用，但也许我的结构是错误的？

  clickNext(){
   var oldIndex = filteredToXs(scope.selected);
   scope.selected = oldIndex + 1;}

function filteredToXs( filteredIndex ) {
  var firstArr = scope.arr1[ filteredIndex ];
  var xsIndex = scope.arr2.findIndex( function(item) {
  return item.trackingNumber === firstArr.trackingNumber;
 } );
if( xsIndex >= 0 ) return xsIndex;
if( xsIndex === -1 ) return 0;  // Default value
 }

Answer 1

我希望我正确理解了你的问题。请同时阅读我在代码部分中的评论。

我必须修改你的源代码，这样我才能为你创建一个 fiddle 。

HTML:我更改了点击事件并删除了不可用的 css 类

<button type="button" role="menuitem" onclick="clickNext();">Next</button>

样本数组:它们包含无效对象:我将 alpha、beta、tango 等更改为属性。您还可以将它们定义为值..这应该不重要:

var arr1 = [
    { apple: 1, tango: '' },
    { banana: 3, kappa: '' },
    { orange: 5, alpha: '' },
    { apple: 8, beta: '' },
    { grape: 10, sigma: '' }];

var arr2 = [
    { orange: 5, alpha: '' },
    { apple: 8, beta: '' },
    { banana: 3, kappa: '' },
    { grape: 10, sigma: '' },
    { apple: 1, tango: '' }];

代码:

var idx = 0;    //save current index of array 2

function clickNext() {
    idx++;

    //I'm comparing the array objects using a string compare- this only works because you said 'I have an identical array'
    //this may cause issues if you're objects are cross-referenced
    var find = function(array, obj) {   //lookup value from arr2 in arr1
        for (var i=0, l=array.length;i<l;i++)
            if (JSON.stringify(array[i]) == JSON.stringify(obj))    //adjust this line to your needs
                return array[i];
    }
    var result = find(arr1, arr2[idx])
    if (!result)
        throw new Error('not found- your arrays are not identical or you run out of index');
    console.log(result);
}

fiddle :https://jsfiddle.net/k50y8pp5/