干货!!!数组字符串的去重,反转,排序,解构。

废话不多说,给大家一个完整的vue组件代码。

<template>
  <div>
    <button id="btn1">点我数组去重</button>
    <button id="btn2">点我数组反转</button>
    <button id="btn3">点我字符串反转</button>
    <button id="btn4">点我字符串去重</button>
    <button id="btn5">点我数组拼接</button>
    <button id="btn6">点我数组按数字大小排序</button>
    <button id="btn7">点我数组关系字母顺序排序</button>
  </div>
</template>
<style>
</style>
<script>
  export default {
    data () {
      return {
        msg: '1'
      }
    },
    created() {
    },
    mounted() {
      this.default()
    },
    methods: {
      default() {
        let arr = [5, 5, 4, 4, 3, 3, 2, 2, 1, 1];
        // let arr = ['大', '大', '家', '家', '好', '好'];
        let str = 'hello world';
        console.log(arr);
        console.log(str);
        // ES6 set用法数组去重(字符串同理) newArr1
        let set = new Set(arr);
        let newArr1 = Array.from(set);
        document.getElementById('btn1').onclick = function() {
          console.log(newArr1);
        };
        // 数组反转 newArr2
        let newArr2 = arr.reverse();
        document.getElementById('btn2').onclick = function() {
          console.log(newArr2);
        };
        // 字符串反转(先切割成数组,再反转,最后拼接回字符串) newStr1
        let newStr1 = str.split('').reverse().join('');
        document.getElementById('btn3').onclick = function() {
          console.log(newStr1);
        };
        // 字符串去重(同上面数组去重原理,把字符串切割成数组,再数组去重,最后重新拼接成新字符串) newStr2
        let newStr2 = Array.from(new Set(str.split(''))).join('');
        document.getElementById('btn4').onclick = function() {
          console.log(newStr2);
        };
        // 数组拼接 newArr3
        let arrn = ['拼', '接', '成', '功'];
        let newArr3 = arr.concat(arrn);// concat()括号里可以写多个数组拼接,用','相连
        document.getElementById('btn5').onclick = function() {
          console.log(newArr3);
        };
        // 数组嵌套之后解构
        console.log(1, ...[2, 3, 4], 5);// ES6
        // 数组按数字大小排序(个人认为这不就是冒泡排序吗)
        let newArr4 = function sequence(a, b) {
          return a - b;
        }
        document.getElementById('btn6').onclick = function() {
          console.log(arr.sort(newArr4));
        };
        // 数组按关系字母顺序进行排序(按ascii码表)
        document.getElementById('btn7').onclick = function() {
          let strn = ['fanda', 'banner', 'find', 'zoom', 'index', 'width', 'javascript'];
          // let strn = ['c', 'd', 'a', 'b', 'C', 'A'];
          // let strn = ['8', '9', '4', '2', '1', '3'];
          // let strn = [888, 9999, 400, 2200, 199, 38];这个对数组不能直接按大小排序
          console.log(strn);
          console.log(strn.sort());
        }
      }
    }
  }
</script>

猜你喜欢

转载自blog.csdn.net/JOEHONV/article/details/81699186