js 数组返回索引位置

一、创建新数组，把原数组中不重复的值存到新数组中
1. 利用indexOf()方法：可返回某个指定的字符串值在字符串中首次出现的位置。
下面看一个简单例子，熟悉一下indexOf() 方法的用法。
let str = 'orange';
str.indexOf('o');// 0
str.indexOf('n');// 3
str.indexOf('c');// -1
//这里0和3分别是o和n在字符串中首次出现的位置，起始下标是0;而-1代表未匹配到
//不要问为什么没有匹配到得到的值是-1而不是null或undefined,那你去问制定这个规则的人吧，一脸无奈！
（1）利用indexOf()方法判值
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        let arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        let newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (let i = 0; i < arr.length; i++) { //遍历原数组
          if (newArr.indexOf(arr[i]) == -1) { //判断新数组中是否已有相同的值
            newArr.push(arr[i]); //若没有，则推入新数组中
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>
（2）利用indexOf()方法判下标
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        let arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        let newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (let i = 0; i < arr.length; i++) { //遍历原数组
          if (arr.indexOf(arr[i])===i) { //如果当前数组的第i项在当前数组中第一次出现的位置是i
            newArr.push(arr[i]); //推入新数组中，否则说明是重复的
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>
2. 利用includes()方法判值
includes() 方法：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
下面看一个简单例子，熟悉一下includes() 方法的用法。
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // true
[1, 2, NaN].includes(NaN) // true<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        let arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        let newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (let i = 0; i < arr.length; i++) { //遍历原数组
          if (!newArr.includes(arr[i])) { //判断新数组中是否已有相同的值
            newArr.push(arr[i]); //若没有，则推入新数组中
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>
3. 利用sort()先排序
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        var newArr = []; //创建一个新数组来接收不重复的值
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        arr = arr.sort(); //先对原数组进行排序
        for (var i = 0; i < arr.length; i++) { //遍历原数组
          if (arr[i] !== arr[i - 1]) { //相邻去除
            newArr.push(arr[i]);
          }
        }
        console.log(newArr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return newArr; //返回新数组
      }
    }
  }
</script>

<style scoped>

</style>
二、两次遍历数组，去除重复元素。
利用双重for循环，然后再利用splice()方法删除重复元素。
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        if (!Array.isArray(arr)) { //判断arr是否为数组
          console.log('请传入数组！');
          return;
        }
        for (var i = 0; i < arr.length; i++) { //遍历原数组
          for(var j = i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){//数组中i下标后的j上有重复值，则用splice方法(可改变原数组)删除
              arr.splice(j,1);
              j--;//删除后下标-1
            }
          }
        }
        console.log(arr); // [1, 3, 5, 6, 7, 8, 9, 0]
        return arr; //返回数组
      }
    }
  }
</script>

<style scoped>

</style>
三、利用filter()方法。
filter针对数组起过滤作用筛选出符合条件的一个或多个元素
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        var newArr = arr.filter((item, index, self) => {
          // item: 数组每一项的值
          // index: 每一项的下标
          // self: 当前数组
          return self.indexOf(item) === index;
        })
        //或
        //var newArr = arr.filter((item, index, self) => self.indexOf(item) === index);
        console.log(newArr) //[1, 3, 5, 6, 7, 8, 9, 0]
      }
    }
  }
</script>

<style scoped>

</style>
四、利用ES6中的Set()方法。
Set()方法：ES6中的set类似一个数组，但是其中的值都是唯一的，Set本身是一个构造函数，用来生成 Set 数据结构。
var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        //set函数可以接受一个数组作为参数，用来初始化
        var a = new Set(arr);
        console.log(a) // Set {_c: Set(8)}
        console.log(...a) // 1 3 5 6 7 8 9 0
        console.log([...a]) // [1, 3, 5, 6, 7, 8, 9, 0]

        //当然，当遇到数组去重的时候，可以这样：
        [...new Set(Array)];

        //如果用于去除字符串里的重复字符，也是可以的：
        [...new Set('abcdefaabccd')].join(' ');
1. 结合扩展运算符（...）
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        arr=[...new Set(arr)];
        console.log(arr)// [1, 3, 5, 6, 7, 8, 9, 0]
      }
    }
  }
</script>

<style scoped>

</style>
2. 结合Array.from()方法 
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
<template>
  <div>文章管理
    <div @click="homeHandle">Home</div>
  </div>
</template>

<script>
  export default {
    name: "articleManagement",
    data() {
      return {}
    },
    methods: {
      homeHandle() {
        var arr = [1, 3, 5, 5, 6, 7, 8, 8, 9, 0, 0];
        arr = Array.from(new Set(arr));//Array.from将Set结构的数据转换为真正的数组
        console.log(arr)//[1, 3, 5, 6, 7, 8, 9, 0]
      }
    }
  }
</script>

<style scoped>

</style>