ES6

作者: 郑先森 | 来源:发表于2020-12-14 09:30 被阅读0次
        hello,大家好,要知道做前端开发,ES6是必学的。这篇文章适合初步入门和复习,结合阮一峰老师的ES6标准入门,能够更深入的学习ES6。
    

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了)。上一次标准的制订还是2009年出台的ES5。目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本。但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中。要查看ES6的支持情况请点此

    目前想要运行ES6代码的话,可以用google/traceur-compiler将代码转译。点此访问traceur-compiler 在线版本时实编辑ES6代码并查看转换后的结果,代码运行结果会在console显示。

    另外,关于Google Traceur,业界大神Addy Osmani利用前者写了个Chrome插件[ES6 Tepl](https://chrome.google.com/webstore/detail/es6-repl/alploljligeomonipppgaahpkenfnfkn),安装后也可以进行ES6的测试。
    

    当然,并不是所有ES6新特性都被实现了,所以上面的方法可以测试大部分,有一些还是无法测试的。

    虽然ES6都还没真正发布,但已经有用[ES6重写的程序](http://blog.tastejs.com/rewriting-a-webapp-with-ecmascript-6)了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。
    
    潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采。
    

    箭头操作符

    如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。

    我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。

    类的支持

    ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。

    增强的对象字面量

    对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。具体表现在:

    可以在对象字面量里面定义原型

    定义方法可以不用function关键字

    直接调用父类方法

    字符串模板

    字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。
    

    解构

    自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。
    

    参数默认值,不定参数,拓展参数

    现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。

    不定参数

    不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中,…x代表了所有传入add函数的参数。

    拓展参数

    拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。

    let与const 关键字

    可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。const则很直观,用来定义常量,即无法被更改值的变量。

    for of 值遍历

    我们都知道for in循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。

    iterator, generator

    这一部分的内容有点生涩,详情可以参见这里。以下是些基本概念。

    iterator:它是这么一个对象,拥有一个next方法,这个方法返回一个对象{done,value},这个对象包含两个属性,一个布尔类型的done和包含任意值的value

    iterable: 这是这么一个对象,拥有一个obj[@@iterator]方法,这个方法返回一个iterator

    generator: 它是一种特殊的iterator。反的next方法可以接收一个参数并且返回值取决与它的构造函数(generator function)。generator同时拥有一个throw方法

    generator 函数: 即generator的构造函数。此函数内可以使用yield关键字。在yield出现的地方可以通过generator的next或throw方法向外界传递值。generator 函数是通过function*来声明的

    yield 关键字:它可以暂停函数的执行,随后可以再进进入函数继续执行

    模块

    在ES6标准中,JavaScript原生支持module了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS和AMD模式。
    

    一、变量交互

    
    以前我们想要交互变量需要定义一个中间变量存放:
    
    let a=1;
    
    let b=2;
    
    [a,b]=[b,a];
    
    即可交换a,b的变量
    
    

    二、循环

    
    let arr = [1,2,3,5,4,5,6,7]
    
    for(let i = 0 ; i < arr.length ; i + + ){
    
      console.log(arr[i])
    
    }
    
    for( s of arr){
    
      console.log(s)
    
    }
    
    for( x in arr){
    
      console.log(arr[x])
    
    }
    
    

    相关文章

      网友评论

          本文标题:ES6

          本文链接:https://www.haomeiwen.com/subject/qhurgktx.html