ES6与ES5对象中方法的不同

ES6对象中的方法相比较于ES5对象中的方法做了简化，去除了关键字function，请查看下面的例子

1. ES5对象中含有方法：

var library = {
  // 属性：图书馆名称
  name: 'Central Library',

  // 属性：位置
  location: '123 Main St',

  // 属性：书籍集合
  books: [
    { id: 1, title: 'JavaScript: The Good Parts', author: 'Douglas Crockford' },
    { id: 2, title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' }
  ],

  // 方法：打印图书馆信息
  printLibraryInfo: function() {
    console.log('Library: ' + this.name + ', Location: ' + this.location);
  },

  // 方法：添加新书
  addBook: function(newBook) {
    this.books.push(newBook);
    console.log('Added book: ' + newBook.title);
  },

  // 方法：查找书籍通过ID
  findBookById: function(id) {
    for (var i = 0; i < this.books.length; i++) {
      if (this.books[i].id === id) {
        return this.books[i];
      }
    }
    return null;
  },

  // 方法：移除书籍通过ID
  removeBookById: function(id) {
    for (var i = 0; i < this.books.length; i++) {
      if (this.books[i].id === id) {
        var removedBook = this.books.splice(i, 1);
        console.log('Removed book: ' + removedBook[0].title);
        return;
      }
    }
    console.log('Book with ID: ' + id + ' not found.');
  }
};

// 示例用法
library.printLibraryInfo(); // 输出: Library: Central Library, Location: 123 Main St
library.addBook({ id: 3, title: 'You Don\'t Know JS', author: 'Kyle Simpson' });
console.log(library.findBookById(2)); // 输出: { id: 2, title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' }
library.removeBookById(1);

使用ES5的JQuery示例

$('#button').click(function() {
  $('#content').text('Hello, World!');
});

2. ES6对象中含有方法

const library = {
  // 属性：图书馆名称
  name: 'Central Library',

  // 属性：位置
  location: '123 Main St',

  // 属性：书籍集合
  books: [
    { id: 1, title: 'JavaScript: The Good Parts', author: 'Douglas Crockford' },
    { id: 2, title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' }
  ],

  // 方法：打印图书馆信息
  printLibraryInfo() {
    console.log(`Library: ${this.name}, Location: ${this.location}`);
  },

  // 方法：添加新书
  addBook(newBook) {
    this.books.push(newBook);
    console.log(`Added book: ${newBook.title}`);
  },

  // 方法：查找书籍通过ID
  findBookById(id) {
    return this.books.find(book => book.id === id);
  },

  // 方法：移除书籍通过ID
  removeBookById(id) {
    const index = this.books.findIndex(book => book.id === id);
    if (index !== -1) {
      const removedBook = this.books.splice(index, 1);
      console.log(`Removed book: ${removedBook[0].title}`);
    } else {
      console.log(`Book with ID: ${id} not found.`);
    }
  }
};

// 示例用法
library.printLibraryInfo(); // Output: Library: Central Library, Location: 123 Main St
library.addBook({ id: 3, title: 'You Don\'t Know JS', author: 'Kyle Simpson' });
console.log(library.findBookById(2)); // Output: { id: 2, title: 'Eloquent JavaScript', author: 'Marijn Haverbeke' }
library.removeBookById(1);

使用ES6的vue示例

<template>
  <button @click="sayHello">Click me</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello, World!');
    }
  }
}
</script>