ES6中解构、参数、模块和记号用法介绍

  • 时间:
  • 8196人关注

这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下,另外这篇文章主要知识点是关于ES6、新特性、解构、参数、模块、记号、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

教程详情电子资料
  • 教程类别:
  • 编辑整理:韩千兰
  • 教程字数:2573字节
  • 阅读时间:大概13分钟
  • 下载本教程(DOC版)
  • 解构产品经理:互联网产品策划入门宝典
  • ES6标准入门
  • 深入理解ES6
  • JavaScript ES6函数式编程入门经典
  • 本文实例讲述了ES6新特性之解构、参数、模块和记号用法。分享给大家供大家参考,具体如下:

    一、解构

    解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子:

    //ES6
    let [x,y]=[1,2];//x=1,y=2
    //ES5
    var arr=[1,2];
    var x=arr[0];
    var y=arr[1];
    
    

    使用这个语法,可以一次性给多个变量赋值。一个很好的附加用处是可以很简单的交换变量值:

    let x=1,y=2;
    [x,y]=[y,x];x=2 y=1
    
    

    解构也可以用于对象,注意对象中必须存在的对应的键:

    let obj={x:1,y:2};
    let {x,y}=obj;//a=1,b=1
    
    

    或者

    let {x:a,y:b}=obj;//a=1,b=2
    
    

    另一个有趣的模式是模拟多个返回值:

    function doSomething(){
       return [1,2];
    }
    let [x.y]=doSomething();//x=1.y=2
    
    

    解构可以用来为参数对象赋默认值。通过对象字面量,可以模拟命名参数:

    function doSomething({y:1,z:0}){
       console.log(y,z);
    }
    doSomething({y:2})
    
    

    二、参数

    1、默认值

    在ES6中,可以定义函数的参数默认值。语法如下:

    function doSomething(){
       return x*y;
    }
    doSomething(5);//10
    doSomethinf(5,undefined);//10
    doSomething(5,3);//15<br><br>//ES5中给参数赋默认值<br>function doSomething(x,y){<br>y=y===undefined?2:y;<br>return x*y;<br>}
    
    

    传递undefined或不传参数时都会触发参数使用默认值。

    2、REST参数

    前面我们已经学习了省略号操作符,剩余参数和它很类似,它同样是使用‘...'语法,允许你把末尾的参数保存在数组中:

    funtion doSomething(x,...remaining){
      return x*rremaining.length;
    }
    dodSomething(5,0,0,0);//15
    
    

    三、模块

    在ES6的模块语法中,模块设计围绕export和import关键词,现在让我们看一个包含两个模块的例子:

    //lib/ath.js
    export function sum(x,y){
      return x+y
    };
    export var pi=3.14;
    //app.js
    import {sum,pi}form"lib/math.js";
    console.log(sum(pi,pi);
    
    

    正如你所见,可以存在多个export声明,每个都要明确的指出输出值得类型。本例中的import声明使用一种语法,来明确定义被导入的内容,可以使用*通配符,结合as关键词给模块提供一个本地名称,把模块当成一个整体导入:

    //app.js
    import*as math form"lib/math.js";
    console.lgo(math.sum(math.pi,math.pi));
    
    

    模块系统有一个default输出,它可以是一个函数,只需要提供一个本地名称就可以导入这个默认值:

    //lib/my-fn.js
    export default function(){
      console.log('echo echo);
    }
    //app.js
    import doSomething from 'lib/my-fn,js';
    doSomething();
    
    

    请注意import声明是同步的,但是模块代码需在所有依赖加载完后才会运行

    四、类

    类的创建围绕calss和constructor关键词,以下是个简短的示例:

    class Vehicle{
       constructor(name){
         this.name=name;
         this.kind=''Vehicle";
       }
      getName(){
         return this.name;
      }
    };
    //Create an instance
    let myVehicle=new Vehicle('rocky');
    
    

    注意类的定义不是一般的对象,因此,类的成员间没有逗号。创建一个类的对象时,需要使用new关键词,继承一个基类时,使用extends:

    class Car extends Vehicle{
       constructor(name){
          super(name);
          this.kind='car';
       }
    }
    let myCar=new Car('bumpy');
    myCar.getName();//'bumpy';
    myCar instanceof Car;//true
    myCar instanceof Vehicle;//true
    
    

    从衍生类中,你可以使用从任何构造函数或方法中使用super来获取它的基类:使用super()调用父类构造函数;调用其他成员。

    五、记号

    记号是一个新的原生数据的类型,像Number和String一样,你可以使用记号为对象属性创建唯一标示或创建唯一的常量。创建方法如下:

    const MY_CONSTANT=Symbol();
    let obj={};
    obj[MY_CONSTANT]=1;
    
    

    注意通过记号产生的键值对不能通过Object.getOwnPorpertyNames()获得,在for...in遍历、Object.key()、JSON.stringify()中均不可见,这是与基于字符串的键相反的,你可以通过Object.getOenPropertySymbols()获取一个对象的记号数组。记号与const配合很合适,因为它们都有不可改变的特性。

    转译

    现在浏览器对ES6的支持还不广泛,且个浏览器也各不相同,可能你写的代码在用户的浏览器中还不能完全解析,这就是我们为什么需要把代码转换成能在当前的任何浏览器中良好运行的旧版本JavaScript(ES5),这种转换通常称为转译,我们必须要这么做,知道所有我们想兼容的浏览器都能运行ES6为止。转译的方法有很多种,包括Bable、Traceur、TypeScript等。

    希望本文所述对大家ECMAScript程序设计有所帮助。


    上一篇:JS实现页面打印功能的实例代码和方法

    下一篇:实例分析ES6新特性之变量和字符串使用方法

    相关内容

    • 分享ES6的7个实用技巧

      本文给大家分享了es6的7个实用技巧,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧

      06-21

      阅读更多
    • JavaScript ES6函数式编程入门经典

      JavaScript ES6函数式编程入门经典

      本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

      大小:46.3 MBJavaScript

      点击下载
    • 深入理解ES6

      深入理解ES6

      本书主要给已经熟悉JavaScript 和 ECMAScript 5 的人提供教程,特别针对的是那些想了解这门语言最新特性并在浏览器或 Node.js 里实现的中级或高级开发者

      大小:7.42 MBECMAScript6

      点击下载
    • 移动网页设计与开发:HTML5+CSS3+JavaScript

      移动网页设计与开发:HTML5+CSS3+JavaScript

      将落伍的网址打导致更为灵便、友善,而且令其充分运用不一样机器设备和电脑浏览器的与众不同优点。根据《移动网页设计与开发HTML5+CSS3+JavaScript》,您将为投身第一线开发充分准备! *內容

      大小:30.2 MB移动开发

      点击下载
    • JavaScript启示录

      JavaScript启示录

      《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

      大小:24.4 MBJS

      点击下载
    • HTML CSS JavaScript网页制作从入门到精通

      HTML CSS JavaScript网页制作从入门到精通

      HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

      大小:65.2 MB网页制作

      点击下载
    • 第三方JavaScript编程

      第三方JavaScript编程

      第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS

      大小:74.2 MBJavaScript

      点击下载
    • JavaScript之美

      JavaScript之美

      阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

      大小:94 MBJavaScript

      点击下载
    • 你不知道的JavaScript(中卷)

      你不知道的JavaScript(中卷)

      JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

      大小:7.8 MBJS

      点击下载
    • HTML5+CSS3+JavaScript从入门到精通

      HTML5+CSS3+JavaScript从入门到精通

      本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

      大小:186 MBweb开发

      点击下载

    学习笔记