时间戳

首页 > 解决方案 > 仅更改数组元素 3 次，重复

javascript - 仅更改数组元素 3 次，重复

问题描述

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

例如：

User #1 input = "XYZVC"

Expected Output = "BLABL"

User #2 input = "XYZVCAD"

Expected Output = "BLABLAB"

我要换，B换index[0]，L换。如果用户输入长于 3，我最苦恼的部分也是让它重复。index[1]Aindex[2]

我的尝试

我尝试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

标签： javascriptarraysstringreactjs

解决方案

更新

事实证明，有一个字符串函数padStart（也可以与 padEnd 一起使用）可以很容易地做到这一点：

const input1 = "XYZVCAD"
const input2 = "erkjguherkluagheruhg"

function mask(str){
    return ''.padStart(str.length, 'BLA');
}

console.log(mask(input1))
console.log(mask(input2))

实现它的一种方法是使用该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，导致BLA即使您的字符串是更长。

最后一步，substring将简单地将您的字符串切割成与原始字符串完全相同的长度。

这是实现它的另一种方法，通过将字符串拆分为数组，并使用模运算符给它正确的字母：

const input1 = "XYZVCAD"
const input2 = "erkjguherkluagheruhg"

function mask(str){
    return str.split('').map((ch, index) => 'BLA'[index % 3]).join('')
}

console.log(mask(input1))
console.log(mask(input2))

推荐阅读