Vue3 中数组和字符串的处理

原因：想要在网页文本框中输入一个整型数组，用作 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] 的值为 true
        startIntArr[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;
}