ES6包括但不区分大小写 [英] ES6 includes but case insensitive

问题描述

我知道我可以遍历数组，只需更改值 toLowerCase（）。

I know I can loop through array and just change value toLowerCase().

我很好奇如果有 reactjs 或 es6 方法，可以检查该值是否在数组中。

I'm curious if there's a reactjs or es6 method that can check if the value is in array.

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

On addTodo function. You can see that I use includes but this method is case sensitive.

这是我的内容

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>

        );
    }   
}

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

Any help would be appreciated. Thanks!

推荐答案

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

I would suggest using a Map instead of an array for your todo list. A Map has the advantage that it provides key-based look-up in constant time, and does not store duplicate entries with the same key. You could then use the lower case variant as the key, and the original (mixed-case) string as the value for that key.

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

You could define todos as a Map instead of an array, and use the lower case string as the key:

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

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

Then, to add the task becomes very straightforward, as a Map overwrites duplicates:

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

在渲染中你需要使用 Array.from （...，< map-function>），因为 .map 未定义地图对象：

In rendering you would need to use Array.from(..., <map-function>), as .map is not defined for Map objects:

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

这意味着 eachToDo 方法将收到一对字符串（一个数组），而不是一个字符串，我们想要显示该对的第二个，所以使用索引 [1] ：

Which means the eachToDo method will receive a pair of strings (an array), instead of a string, and we want to display the second of the pair, so using index [1]:

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

这篇关于ES6包括但不区分大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！