ES6包括但不区分大小写

时间:2016-11-11 08:23:09

标签: javascript reactjs ecmascript-6

我知道我可以遍历数组,只需更改值toLowerCase()

我很好奇是否有reactjses6方法可以检查该值是否在数组中。

关于addTodo函数。您可以看到我使用包含,但此方法区分大小写。

这是我拥有的

class Todo extends React.Component {
    render() {
        return (
            <div className="todo">
                <input type="checkbox" />
                <p>{this.props.children}</p>
            </div>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);

        this.todos = [
            'Get Up from bed', 
            'Eat Breakfast'
        ];
    }

    eachTodo(task, i) {
        return (
            <Todo key={i} index={i}>{task}</Todo>
        )
    }

    addToDo() {
        let task_title = this.refs.newTodo.value;

        if(task_title !== '') {
            let arr = this.todos;

            var arr_tlc = this.todos.map((value) => {
                return value.toLowerCase();
            })

            if(arr_tlc.indexOf(task_title.toLowerCase()) === -1) {
                arr.push(task_title);

                this.setState({
                    todos: arr
                });
            }
        }
    }

    render() {
        return (
            <div className="main-app">
                <input ref="newTodo" placeholder="Task"/>
                <button onClick={this.addToDo.bind(this)}>Add Todo</button>

                <div className="todos">
                    {this.todos.map(this.eachTodo)}
                </div>
            </div>

        );
    }   
}

任何帮助将不胜感激。谢谢!

2 个答案:

答案 0 :(得分:1)

我建议您为待办事项列表使用Map而不是数组。 Map具有以下优点:它在恒定时间内提供基于密钥的查找,并且不存储具有相同密钥的重复条目。然后,您可以使用小写变体作为键,将原始(混合大小写)字符串用作该键的值。

您可以将todos定义为Map而不是数组,并使用小写字符串作为键:

constructor(props) {
    super(props);
    this.todos = new Map();
    this.addToDo('Get Up from bed'); 
    this.addToDo('Eat Breakfast');
}

然后,添加任务变得非常简单,因为Map会覆盖重复项:

addToDo() {
    this.todos.set(task_title.toLowerCase(), task_title);
    this.setState({
        todos: this.todos
    });
 }

在渲染中,您需要使用Array.from(..., <map-function>),因为.map对象未定义Map

<div className="todos">
    {Array.from(this.todos, this.eachTodo)}
</div>

这意味着eachToDo方法将接收一对字符串(数组),而不是字符串,我们希望显示该对中的第二个,因此使用索引[1]

eachTodo(task, i) {
    return (
        <Todo key={i} index={i}>{task[1]}</Todo>
    )
}

答案 1 :(得分:0)

不,唯一的内置方法区分大小写。您将需要该循环以及toLowerCase或不区分大小写的正则表达式(可能隐藏在有用的可重用函数中)。