ES2015入门系列8-新对象特性

Seay 发布于2019-08-20 17:40 / 503人阅读

摘要：继续以代码进行展开在中，如下代码鸭子黄色嘎嘎嘎鸭子黄色嘎嘎嘎为对象带来的新特性属性简写如果属性名称和变量名称一致，那么可以直接用省略变量名，如下鸭子黄色嘎嘎嘎鸭子黄色嘎嘎嘎方法简写方法可以省略冒号以及关键字如下鸭子黄色嘎嘎嘎鸭子黄色嘎嘎嘎解

继续以代码进行展开, 在ES5中，如下代码：

function makeDuckToy() {
  var name = "鸭子";
  var color = "黄色";
  return {
    name: name,
    color: color,
    quacks: function() {
      console.log("嘎嘎嘎~~~");
    }
  }
}

var duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

ES2015为对象带来的新特性:

属性简写

如果属性名称和变量名称一致，那么可以直接用省略变量名，如下:

function makeDuckToy() {
  let name = "鸭子";
  let color = "黄色";
  return {
    name,
    color,
    quacks: function() {
      console.log("嘎嘎嘎~~~");
    }
  }
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

方法简写

方法可以省略冒号以及function关键字, 如下：

function makeDuckToy() {
  let name = "鸭子";
  let color = "黄色";
  return {
    name,
    color,
    quacks() {
      console.log("嘎嘎嘎~~~");
    }
  }
}

let duck = makeDuckToy();

console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

解构赋值

解构赋值，我们之前已经讲过，这里再继续举个例子:

ES5中，假设从ajax中获取数据，并取出想要的值:

function ajax() {
  return {
   status: true,
   data: ["鸭子", "老虎"],
   total: 12
  }
}

var result = ajax();
var data = result.data;
var total = result.total;

有了解构赋值，代码就可以简化成:

function ajax() {
  return {
   status: true,
   data: ["鸭子", "老虎"],
   total: 12
  }
}

let {data, total} = ajax();

就是如此方便，不是吗？

idc机房托管服务器托管 es6新特性 es6的新特性 es6-系列入门系列课程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83761.html

ES2015入门系列1-初识ES2015

EcmaScript 其实是一种语言规范，常见的 JavaScript, ActionScript 等都是其具体实现，平时使用中一般可以将其和Javascript对等称呼，本系列教程主要讲述 EcmaScript2015(ES6) 为JavaScript带来的新的特性，并初步掌握如何利用其进行开发。本系列面向有一定基础知识的ES5使用者，不适合初学者。先来看两段代码： Human.js exp...

hellowoody 2019-08-20 17:37 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0
ES2015入门系列9-Babel和Rollup

摘要：虽然够好用，奈何没有浏览器对其可以完全支持，本文书写时间，开发版号称已经支持的特性。开始安装本系列假定读者都有使用经验，如果还没有，赶紧去这里了解并安装吧。到此，我们的已经准备就绪。通过前面章节的讲解，大家对ES2015的一些新语法有了初步的理解，之前我们的测试代码都可以直接放入 Chrome Console 中直接运行，为了更好的学习后面的面向对象和模块开发，我先用一章介绍一下 B...

eccozhou 2019-08-20 17:40 评论0 收藏0
1月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享视频前端技术论坛融合不可错过的迷你库测试框架实例教程为你详细解读请求头的具体含意解析的库如果要用前端框架，开发流程是怎样的与有什么区别正确使用的方法是什么流程图插件小如何让元素只能输入纯文本前端技术中更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront...

solocoder 2019-08-20 14:37 评论0 收藏0
前端补集 - 收藏集 - 掘金

摘要：原文地址一个非常适合入门学习的博客项目前端掘金一个非常适合入门学习的项目，代码清晰结构合理新闻前端掘金介绍一个由编写的新闻。深入浅出读书笔记知乎专栏前端专栏前端掘金去年的一篇老文章，恰好今天专栏开通，迁移过来。破解前端面试（80% 应聘者不及格系列）：从闭包说起 - 掘金修订说明：发布《80% 应聘者都不及格的 JS 面试题》之后，全网阅读量超过 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 评论0 收藏0