Question

根据数组的长度更改数组的每个元素的最佳方法是什么？

例如：

User #1 input = "XYZVC"

Expected Output = "BLABL"

User #2 input = "XYZVCAD"

Expected Output = "BLABLAB"

我希望B替换index[0]，L替换index[1]，而A替换index[2]。如果用户输入的内容超过3个，我最苦恼的部分也会让它重复。

我的尝试

我试图将输入split()放入一个数组，shift()，然后push()放入一个新的数组，没有任何运气。

我在下面的代码中粘贴了更多信息：

import React from 'react'

class UserInput extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };
    }

        handleChange = (event) => {
            this.setState({value: event.target.value})
        }

        handleSubmit = (event) => {
            alert('Your input has been submitted: ' + this.state.value)
            event.preventDefault()
        }

        badRobot = () => {
            //Check length of user input
            //Add B, L, A, matching the length of the user input
            //Store it within a new variable
            //Plug that into the bad robots output

            let checkedInput = this.state.value
            let checkedArray = checkedInput.split('')
            const newArr = checkedInput.shift()
        }

    render(){
        return(
            <div>
            <form onSubmit={this.handleSubmit}>
                <label>
                    <p>Say Something</p>
                    <input type="text" value={this.state.value} onChange={this.handleChange} />
                </label>
                <input type="submit" value="Submit" />
            </form>
            <div>
            <h3>Good Robot</h3>
            <p>I hear you saying {this.state.value}. Is that correct?</p>
            <h3>Bad Robot</h3>
            <p>.</p>
            <h3>Kanyebot 5000</h3>
            <p>I'm gonna let you finish but Beyonce is {this.state.value}.</p>
            </div>
            </div>
        )
    }
}

export default UserInput

Answer 1

一种实现方法是使用repeat函数，然后根据原始字符串长度切出字符串：

const input1 = "XYZVCAD"
const input2 = "erkjguherkluagheruhg"

function mask(str){
    return 'BLA'.repeat(str.length / 3 + 1).substring(0, str.length)
}

console.log(mask(input1))
console.log(mask(input2))

repeat函数将重复您的字符串x次，如您在上面链接的文档中所见。在这里，由于您的字符串长度为3个字符，因此我们只需要根据原始字符串的长度重复该字符串，然后再除以3。我要添加一个字符串，因为5/3这样的除法将舍入为{{1 }}，即使您的字符串更长，也会导致1。

最后一步BLA会将字符串切成与原始字符串完全相同的长度。

这里是实现此目标的另一种方法，方法是将字符串拆分为数组，然后使用模运算符为它提供正确的字母：

substring

Answer 2

这不是代码，但这是我要采用的方法：

将输入拆分为char数组
用于循环遍历，索引从0开始
如果索引+ 1 MOD 3 = 0，则将值设置为'A'（.actionBar{ position: absolute; bottom: 20px; clear: both; // I think this should solve the problem }）
如果索引+ 1 MOD 2 = 0，则将值设置为“ L”
否则将值设置为“ B”
返回已连接数组项的字符串（array.join）

Answer 3

    var myString = "somestringofsomelength";
    var replacementsArr=["B","L","A"];
    
    function replacer(str){
        repString="";
        for(var i=0; i<str.length;i++){
            repString+=replacementsArr[i % replacementsArr.length];
        }
        return repString;
    }
    
    console.log(replacer(myString));

这就是我要做的方式。它使用余数除法将字符串从相对于replacesArr的索引为12345678划分为12312312

Answer 4

您可以立即更改

const letters = ['B','L','A'];

handleChange = (event) => {
  const length = event.target.value.length;
  const letter = letters[length%3];
  this.setState({value: this.state.value+letter});
}

仅更改阵列元素三次，重复

4 个答案: