原因：想要在网页文本框中输入一个整型数组，用作 Set 去重测试。
遇到问题：网页文本框中输入的一串内容是字符串格式的，暂且称之为 “数组字符串”。
解决方式：先把 “数组字符串” 转换成 “字符串数组” 格式，再转换为 “整型数组” 格式。
定义变量
首先定义一些用到的变量：
- 数组字符串：
inputArr - 字符串数组：
startArr - 整型数组：
startIntArr
// ref 的作用：当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。
import { ref } from 'vue';// 输入的数组（字符串）
// eg: '1, 2, 2, 3, 3, 3, 4, 4, 4, 4'
const inputArr = ref('');// 字符串数组
var startArr = [];// 整型数组
var startIntArr = [];
数组字符串
与网页交互，输入一个数组：
- 这个数组是字符串形式（
‘’）的； - 且这个数组与变量
inputArr双向绑定，当数组的值发生变化时，inputArr的值也随之改变。反之亦然。
<!-- 输入一个数组 -->
<input type="text" v-model="inputArr" placeholder="inputArr" />
例如，在网页文本框中输入内容：1, 2, 2, 3, 3, 3, 4, 4, 4, 4，暂且称输入的内容为 “字符串数组”。
则 inputArr = '1, 2, 2, 3, 3, 3, 4, 4, 4, 4'
字符串数组
将 “数组字符串” 转换为 “字符串数组”。
// 数组字符串
inputArr = '1, 2, 2, 3, 3, 3, 4, 4, 4, 4'// 字符串数组
startArr = [ '1', '2', '2', '3', '3', '3', '4', '4', '4', '4' ]
转换方式：
const turnArr = () => {// 字符串按 逗号+空格 分隔成数组 split(', ')startArr = inputArr.value.split(', ');console.log(startArr);
}
整型数组
将 “字符串数组” 转换为 “整型数组”。
// 字符串数组
startArr = [ '1', '2', '2', '3', '3', '3', '4', '4', '4', '4' ]// 整型数组
startIntArr = [ 1, 2, 2, 3, 3, 3, 4, 4, 4, 4 ]
转换方式：
const turnIntArr = () => {// 将一个包含数字字符串的数组转换为数字类型的数组// 使用 Array 的 map 方法结合 Number 构造函数startIntArr = startArr.map(Number);console.log(startIntArr);
}
数组去重
将 “整型数组” 中重复的元素剔除。
// 整型数组
startIntArr = [ 1, 2, 2, 3, 3, 3, 4, 4, 4, 4 ]// 去重后数组
resultArr = [ 1, 2, 3, 4 ]
处理方式：
const arrTest = () => {// 处理后的数组const resultArr = [];// set 集合const startSet = {};// 数组去重// startSet 中的元素默认为 false，通过设置为 true 来过滤相同的元素/*原始数组 [ 1, 2, 2, 3, 3, 3, 4, 4, 4, 4 ]startIntArr[1] == 2, startSet[ startIntArr[1] ] == startSet[2]startSet[2] 的值默认为 false, 把 2 追加到 resultArr 数组中,然后设置 startSet[2] 的值为 truestartIntArr[2] == 2, startSet[ startIntArr[2] ] == startSet[2] == true这样 startIntArr 中的第 3 个元素 2, 就被过滤掉了*/for (let i = 0; i < startIntArr.length; i++) {if (!startSet[startIntArr[i]]) {startSet[startIntArr[i]] = true;resultArr.push(startIntArr[i]);}}console.log(resultArr);return resultArr;
}
