JavaScript - 将数组项移动到数组的开头答案

【问题标题】：JavaScript - move array items to beginning of arrayJavaScript - 将数组项移动到数组的开头
【发布时间】：2019-10-05 01:57:41
【问题描述】：

我有一个显示产品列表的 SectionList（带有 renderSectionHeader）。每个标题旁边都有一个星形图标，我想重新排序该星形图标的 onPress 类别。例如，如果用户同时点击汽车和建筑，我希望这两个类别都移到顶部。

这是我的部分列表：

<SectionList
    sections={this.state.products}
    renderSectionHeader={({section}) => (
        <TouchableOpacity onPress={()=>{this.sortFavorite(section.key)}}>
            <Text>{section.key}</Text>
            <FontAwesome name="star" color="grey" />
        </TouchableOpacity>
    )}
    renderItem={({item,index}) => (
        <Text>{item.name}<Text>
    )}
/>

首先，我创建了一个数组来存储/删除 onPress 上最喜欢的类别：

sortFavorite = (currentCategory) => {
    let items = this.state.products
    let favouriteCategories = this.state.favouriteCategories
    let index = favouriteCategories.indexOf(currentCategory)

    if(index === -1){
      for(let i =0; i < items.length; i++){
        if(items[i].key === currentCategory){
          favouriteCategories.push(
            items[i].key
          )
        }
      }
    }
    else {
      favouriteCategories.splice(index, 1);
    }

    this.setState({favouriteCategories: favouriteCategories},()=>{
        // move to top of array
        const sortedCategories = _.sortBy(items, (item) => {
        const index = favouriteCategories.indexOf(item.key)
         return index == -1 ? items.length : index
        })
    })
  }

如何将我的产品阵列与我最喜欢的类别进行比较，然后重新订购产品阵列？

这就是我的产品系列的样子：

0: {key: "Fruits", data: Array(1)}
1: {key: "Cars", data: Array(10)}
2: {key: "Buildings", data: Array(4)}

这是我最喜欢的类别数组的样子：

["Cars","Buldings"]

如果有办法，我很乐意使用 lodash。

【问题讨论】：

标签： javascript arrays reactjs sorting lodash

【解决方案1】：

您可以按类别列表排序，并使用收藏列表中类别键的索引对其进行排序。

const categories = [
  {key: "Fruits", data: Array(1)},
  {key: "Cars", data: Array(2)},
  {key: "Buildings", data: Array(1)},
  {key: "Blah", data: Array(1)}

];

const favoriteCatIds =  ["Buildings", "Cars"];

const sortedCategories = _.sortBy(categories, (item) => {
  const index = favoriteCatIds.indexOf(item.key);
  return index == -1 ? categories.length : index;
});

console.log(sortedCategories);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

效果很好！谢谢你。最后一个问题，如果可以的话..您将如何根据数组中最喜欢的类别更改星形图标的颜色？

【解决方案2】：

这个不需要lodash，只需要普通排序

const favoriteCategoriesSet = new Set(favoriteCategories)
const sortedProductsTree = productsTree.sort((a, b) => favoriteCategoriesSet.has(b.key) - favoriteCategoriesSet.has(a.key))

【讨论】：