废话不多说,给大家一个完整的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>