Vue中的map方法可以將一個數(shù)組通過回調(diào)函數(shù)處理后,生成一個新的數(shù)組。這個新的數(shù)組可以被用于數(shù)據(jù)渲染、篩選、排序等操作。在實際應(yīng)用中,有時候需要將Vue中的map生成的新數(shù)組轉(zhuǎn)化為普通的JS數(shù)組,這個過程可以用一些簡單的方式完成。
// Vue中的map方法 var newarr = oldarr.map(function(item){ return item * 2; });
上面的代碼演示了Vue中的map方法,它通過回調(diào)函數(shù)將每個數(shù)組元素都乘以2,最后生成了一個新的數(shù)組newarr?,F(xiàn)在我們需要將這個Vue數(shù)組轉(zhuǎn)換為普通的JS數(shù)組,可以使用以下方法。
// 使用slice方法轉(zhuǎn)換為JS數(shù)組 var jsarr = newarr.slice();
以上代碼中,我們使用了JS的slice方法,它可以將一個數(shù)組復(fù)制并生成一個新的數(shù)組。由于Vue中的數(shù)組也是JavaScript數(shù)組的實例,因此可以使用這個方法將Vue數(shù)組復(fù)制并轉(zhuǎn)換為普通的JS數(shù)組。需要注意的是,slice方法默認不傳參數(shù)會將整個數(shù)組復(fù)制并生成新的數(shù)組。
如果你想要將Vue數(shù)組轉(zhuǎn)換為一維的JS數(shù)組,可以使用以下方法:
// 使用concat方法轉(zhuǎn)換為一維JS數(shù)組 var jsarr = [].concat.apply([], newarr);
上述代碼使用了JS中的concat方法,它可以將多個數(shù)組連接成一個數(shù)組。由于Vue中的map方法會返回一個二維數(shù)組,需要將多個數(shù)組合并成一個數(shù)組。apply方法可以改變this指向(這里指向空數(shù)組[]),并將參數(shù)作為數(shù)組傳入。
除了以上兩種方法,我們還可以使用ES6中的展開操作符轉(zhuǎn)換Vue數(shù)組為JS數(shù)組:
// 使用ES6展開操作符轉(zhuǎn)換 var jsarr = [...newarr];
這里使用ES6中的展開操作符將Vue數(shù)組直接轉(zhuǎn)換為JS數(shù)組。
總之,對于Vue中的map方法生成的數(shù)組,可以通過以上三種方法轉(zhuǎn)化為普通的JS數(shù)組,以便在業(yè)務(wù)邏輯中使用。