学习理解ES6-对象扩展-属性简写这是我参与11月更文挑战的第26天, 活动详情查看：2021最后一次更文挑战前言前

这是我参与11月更文挑战的第26天，活动详情查看：2021最后一次更文挑战

前言

前两篇文章对 Proxy 的使用进行了学习, 本文继续来学习 ES6 的重要的知识点: 关于对对象的扩展

熟练使用 ES6 及更高版本对于我们在项目开发中可提高开发效率! 前面文章学习了 JavaScript 中操作数组的一些方法(Array.splice()/slice()/map()/reduce()等高阶函数), JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表

ES6 - 对象的扩展-属性简写

前文对 JavaScript 中的重要数据结构 数组 的 ES6 的相关扩展进行了学习. 那 ES6 对于另一个重要的数据结构 对象也同样进行重大升级, 许多扩展更加方便地帮助我们处理对象类型的数据.

而 ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法. 这样就是特别方便特别简洁的, 不仅加快码字速度, 也提高了美观度:

const str = '小阿天'
// ES6 之前普通书写:
const obj = { str: str }

// 使用ES6 属性简写:
const obj = { str }
obj // {str: "小阿天"}

Vue 中的对象属性简写

不知道你有没有发现, 对于 Vue 中的 JS 书写方式: 比如 data(){}, methods: { fn(){} } 等

export default {
  name: "App",
  components: { myComponent },
  data() {
    return {
      date: new Date(),
      isShow: false,
    };
  },
  methods: {
    showDrawer() {
      this.isShow = !this.isShow;
    },
    showInnerDrawer() {
      this.innerShow = !this.innerShow;
    },
    changeIcon(e) {
      console.log("e", typeof e.target.className);
      e.target.className = "ivu-icon iconfont icon-crmdaohangicon-18";
    },
  },
};

在 Vue3 中用到的数据在 setup(){} 都要 return{}, 这不论是函数还是变量, 使用简写就特别方便了.

export default defineComponent({
  name: 'Signup',
  components: {
    ValidateForm,
    ValidateInput
  },
  setup () {
    const formData = reactive({
      email: '',
      nickName: '',
      password: '',
      repeatPassword: ''
    })
    // 返回数据 formData 简写:
    return {
      formData,
      onFormSubmit,
      emailRules,
      nameRules,
      passwordRules,
      repeatPasswordRules
    }
  }
})

学习参考文档

MDN | ES6-Object

学习理解ES6-对象扩展-属性简写

前言

ES6 - 对象的扩展-属性简写

Vue 中的 对象属性简写

相关阅读文章列表

学习参考文档

Vue 中的对象属性简写