es6交换数组对象元素的位置

最新推荐文章于 2023-11-08 17:53:45 发布

原创最新推荐文章于 2023-11-08 17:53:45 发布 · 8.4k 阅读

2 ·

CC 4.0 BY-SA版权

其他bug解决方案专栏收录该内容

31 篇文章

订阅专栏

本文介绍了在ES6中如何交换数组中对象元素的位置，提供了两种方法。第一种方法利用findIndex找到元素位置，然后使用解构赋值进行交换，需要注意多余的元素需要使用splice删除。第二种方法在细节上略有改进，避免了潜在的语法错误。讨论了在编写过程中容易犯的错误，例如缺少分号导致的合并行问题。

方法一：（此方法有些注意的细节是可以优化的）
1、findIndex查找元素在数组中的位置
2、通过结构赋值交换数组位置，可以多个同时调换
[arr0[mingIndex],arr0[lanIndex],arr0[lvIndex]] = [arr0[lvIndex],arr0[mingIndex],arr0[lanIndex]];
左边是元素在数组中的原本的排列顺序右边是自己希望的排列顺序。

 var arr0 = [
          {name:"小明",age:12,sex:"男"},
          {name:"小篮",age:13,sex:"女"},
          {name:"小绿",age:14,sex:"女"},
          {name:"小红",age:15,sex:"男"},
        ]
        var mingIndex = arr0.findIndex((v)=>{return v.name == "小明"})
        var lanIndex = arr0.findIndex((v)=>{return v.name == "小篮"})
        var lvIndex = arr0.findIndex((v)=>{return v.name == "小绿"})
        var arr2 = [arr0[mingIndex],arr0[lanIndex],arr0[lvIndex]] = [arr0[lvIndex],arr0[mingIndex],arr0[lanIndex]];
        arr0=[arr2,...arr0]
        //arr0.splice(0,1)
        console.log(arr0)

结果：
在这里插入图片描述
发现得出的数组中多出了数组arr2，用splice删掉多余的元素（注释掉的部分）
arr0.splice(0,1) //删掉arr0数组中下标为0，长度为1的元素

方法二：步骤不变，稍改些细节

 var arr0 = [
          {name:"小明",age:12,sex:"男"},
          {name:"小篮",age:13,sex:"女"},
          {name:"小绿",age:14,sex:"女"},
          {name:"小红",age:15,sex:"男"},
        ]
        var mingIndex = arr0.findIndex((v)=>{return v.name == "小明"});
        var lanIndex = arr0.findIndex((v)=>{return v.name == "小篮"});
        var lvIndex = arr0.findIndex((v)=>{return v.name == "小绿"});
        [arr0[mingIndex],arr0[lanIndex],arr0[lvIndex]] = [arr0[lvIndex],arr0[mingIndex],arr0[lanIndex]];
        console.log(arr0)

为什么方法一不这么写呢？
主要是记录在编写过程中犯的细节错误。
方法一中，arr2里面只有交换了位置的那三个元素，也就是
arr2 = [{name:“小绿”,age:14,sex:“女”},
{name:“小明”,age:12,sex:“男”},
{name:“小篮”,age:13,sex:“女”} ]
如果在方法一中通过结构赋值交换数组位置时不设置arr2来保存,会报错。原因是在var变量的时候，后面没有分号 “ ； ”，[arr0[mingIndex],arr0[lanIndex],arr0[lvIndex]] = [arr0[lvIndex],arr0[mingIndex],arr0[lanIndex]]会跟前一行代码合并，从而报错，这就导致一开始用的方法一。