zoukankan      html  css  js  c++  java
  • ES6中的函数、对象定义

    ES6之前的函数定义:

    通过声明

    通过关键词 function 定义 ,这是最早也是最经典的function定义方式。

    function hello (firstname) {
      return `Hello ${firstname}`;
    }


    这个函数有一个名称 "hello", 所以我们称这个函数为命名函数。

    通过表达式

    这是比较现代化的定义方式了。这种定义方式也说明了函数也是对象,因此可以把函数赋值给变量。

    const hello = function (firstname) {
      return `Hello ${firstname}`;
    };

    仔细看,你会发现这个函数是没有名称的,因此它是匿名函数

    它在创建时,没有名称 (形如 "function (...) { ... }")。即便我们把这个函数赋值给一个名称为hello的变量, 它依然是一个匿名函数

    注意: 这既然是一个赋值语句,那么在结尾处有分号就很自然了。 就像其他普通的赋值语句一样: const pi = 3.14; 。

    ES6的函数定义:

    通过箭头语法

    箭头语法是ES6中出新的新语法,可以用在通过表达式定义函数的情境中:
    去除关键词 function 添加箭头符号 => 到参数右侧的位置.

    const hello = (firstname, lastname) => {
      return `Hello ${firstname} ${lastname}`;
    };

    这种写法已经很简洁明了。如果满足以下情况,写法还可以更简单:

    1、当只有一个参数时,参数外面可以不要圆括号;
    2、当函数体内只有一行代码时,函数体可以不需要花括号"{ ... }"包裹 ;
    3、当函数体内只有一行代码时,关键词return 可以省略。


    const hello3 = firstname => `Hello ${firstname}`;


    ES6增强了对象字面量,可以简写方式定义

    const obj = {
      hello4(firstname) {
        return `Hello ${firstname}`;
      }
    }

     

    关于ES6增强对象字面量

    相对于ES5, ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码,同时语法更易于理解。

    那就一起来看看对象增强的功能。增强功能包括:对象字面量简写(Object Literal Shorthand)、对象方法简写(Object Method Shorthand)、计算对象键(Object key)、对象解构(Object Destructuring)。

    ES5对象字面量

    var type = 'rock';
    var heat = '50%';
    var music = {
      type: type,
      heat: heat
    };

    ES6对象字面量


    在ES6中如果你的对象属性名和当前作用域中的变量名相同,那么现在不必在把这个type或heat书写两次。ES6的对象会自动的帮你完成键到值的赋值。

    var type = 'rock';
    var heat = '50%';
    var music = {
      type,
      heat
    };

    ES5返回一个对象


    function getMusic() {
      var type = 'rock';
      var heat = '50%';
      // 一些运算
      return { type: type, heat: heat };
    }

    ES6返回一个对象

    function getMusic() {
      var type = 'rock';
      var heat = '50%';
      // 一些运算
      return { type, heat };
    }


    ES5对象方法

    var type = 'rock';
    var heat = '50%';
    var music = {
      type: type,
      heat: heat,
      description: function() {
        return '当前音乐风格为' + this.type + ',' + this.heat + '都喜欢';
      }
    }

    ES6对象方法
    使用ES6语法重写上面的music对象,不必写上对象键然后还要写上function关键字。只需要方法名和圆括号再跟上花括号即可。代码如下:

    var type = 'rock';
    var heat = '50%';
    var music = {
      type,
      heat,
      description() {
        return '当前音乐风格为' + this.type + ',' + this.heat + '都喜欢';
      }
    }

    ES6计算对象键
    在ES5中对象可以理解为一个关联数组或一个hashmaps。在ES5中创建对象的键就三种object.xx、object[‘xx’]、Object.defineProperty可以用来构建对象的键。

    var heat = '50%';
    var music = {
      rock: heat
    };

    ES6计算对象键
    在ES6中可以使用变量作为对象键,比如field作为我们对象的键,heat作为这个键的值。代码如下:

    var heat = '50%';
    var field = 'rock';
    var music = {
      [field]: heat
    }

    ES6对象键计算表达式
    在ES6中可以使用变量作为对象键,这个变量还可以是表达式,因为[]方式是返回[]里面表达式的结果作为对象键

    var heat = '50%';
    var field = 'Rock and Roll';
    var music = {
      [field.toLowerCase()]: heat
    }

    还可以使用不同的数组方法为我们的对象键赋值,使用[]将会计算对象的键值。代码如下:

    let people = [20, 25, 30];
    let music = {
      people,
      [people]: 'They all love rock and roll',
      [people.length]: 'object key is 3',
      [{}]: 'empty object'
    }
    console.log(music); // Object {3: "object key is 3", people: Array[3], 20,25,30: "They all love rock and roll", [object Object]: "empty object"}
    console.log(music.people); // [20, 25, 30]
    console.log(music['people']); // [20, 25, 30]
    console.log(music[people]); // They all love rock and roll
    console.log(music[people.length]); // object key is 3
    console.log(music['[object Object]']); // empty object

    ES6对象解构
    把对象或者数组中的数据取出使用是我们经常要使用的功能,ES6有新的功能让我们快捷拆分对象和数组中的值。在=号右边是要解构的对象或数组,=号左边是要接收创建的变量。代码如下:

    对象解构
    =号左边的类型要和右边对应,比如右边是一个对象类型则左边也需要使用对象字面量包裹。右边是数组则左边也需要使用数组包裹。

    let music = {
      type: 'rock',
      heat: '50%'
    };
    let { type, heat } = music;
    console.log(type, heat);  // rock 50%

    数组解构
    let people = [20, 25, 30]
    let [young, oldYoung] = people;
    console.log(young, oldYoung) // 20 25

    对象解构重命名
    有时候我们不想使用解构对象中的键来新创建变量,需要解构后重命名为新的变量名。这是可以使用重命名解构语法

    let music = {
      type: 'rock',
      heat: '50%'
    }
    let { type: newType, heat: newHeat } = music;
    console.log(newType, newHeat); // rock 50%

    解构其他类型
    如果在一个对象中的值包含其他的数据类型同样是可以解构出来的。比如值是数组,代码如下:

    let music = {
      type: ['rock', 'pop', 'jazz'],
      heat: '50%',
    }
    let { type, heat } = music;
    console.log(type, heat); // ["rock", "pop", "jazz"] "50%"

    解构函数参数
    这是一个非常实用的功能,可以将传递进来的函数对象参数直接解构为变量,在函数中可以方便调用。这只需要简单的对象解构函数即可完成。代码如下:

    function getMusic({ type, heat }) {
      console.log(type, heat);
    }
    getMusic({ type: ‘rock’, heat: ‘80%’}); // rock 80%

  • 相关阅读:
    K-Means++ 聚类之数据可视化:使用gnuplot
    QQ设计第1-5步
    QQ设计第1-5步
    为什么有很深的windows基础还是不能动摇linux半步
    常用命令
    在线会计_金蝶友商网
    XP使用VNC远程桌面CentOS 6
    Fatal error: Call to undefined function mb_substr()
    如何汉化 po 文件及编译成 mo 文件
    idoerp
  • 原文地址:https://www.cnblogs.com/lbnnbs/p/15017288.html
Copyright © 2011-2022 走看看