Javascript 箭头函数

Javascript 箭头函数

var arr = [11,22,33,44]
var res = arr.filter((item,index)=> item>30)

其等价形式为：

var arr = [11,22,33,44]
var res = arr.filter(function(item,index){
                    return item>30
                })

在 vue 中常常可以看到箭头函数的使用：

<script>
// give each todo a unique id
let id = 0

export default {
  data() {
    return {
      newTodo: '',
      todos: [
        { id: id++, text: 'Learn HTML' },
        { id: id++, text: 'Learn JavaScript' },
        { id: id++, text: 'Learn Vue' }
      ]
    }
  },
  methods: {
    addTodo() {
      // ...
      this.todos.push({id:id++,text:this.newTodo})
      this.newTodo = ''
    },
    removeTodo(todo) {
      // ...
      this.todos = this.todos.filter((t)=>t!=todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

其中的 this.todos = this.todos.filter ((t)=>t!=todo) 就是箭头函数。 可以实现列表的删除效果。
原理就是把不等于todo的元素筛选出来，也就是去除了todo。