javascript 箭头函数及其使用

原创
2022/05/18 07:41
阅读数 6.2K
  • 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
                })
  • 箭头函数的this

箭头函数的this可以获取外层作用域中的对象:

objA = {
	name: "test_inner",
	func1: function() {
		console.log(this.name)
		console.log(this)
	},
	func2: () => (console.log(this))

}
objA.func1()
objA.func2()

输出结果如下:

test_inner
Object
Window

可以看到,箭头函数中的this是外层作用域中的this, 不是当前对象。

  • 箭头函数的应用

在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) 就是箭头函数。 可以实现列表的删除效果。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部