第一眼——ES6-演道网

本网站用的阿里云ECS,推荐大家用。自己搞个学习研究也不错
越来越多的框架推荐使用ES6进行高效开发,node也早已支持ES6,那不如就偷偷瞄一眼儿这性感的“编程语言”?

Go~

ES6的一些特性

检测本地是否支持ES6环境
简便方法:直接在浏览器调试工具下尝试输入Promise(ES6的新API,用于异步事件的处理),如果能打印出其构造函数,则支持(如果真有浏览器光是支持了Promise而不支持ES6,那我服!)

在开发环境里面使用ES6
webpack+babel 作为转译工具进行ES6到ES5的编译
wp的配置详见
《webpack的安装及配置》

  • 安装插件:
    babel-loader
    npm install babel-loader

    babel-core

    npm install babel-core

    babel-es2015-transform

    npm install babel-babel-transform
  • 在webpack.config.js的module属性中的loaders字段加入

    {
       test: /.js$/,
       loader: 'babel'
    }
  • 在项目根目录下创建配置文件.babelrc

    {
    'presets': ['es2015']
    }

一些新东西

  1. class
    类!
    我们通过一个demo来初见一下js的class

    class Student {
         getName() {
               console.log( ' This is es6 style ' );
         }  
         //注意:这里不用逗号
         getClass() {
               console.log( 'gp02' );
         }
    }
  2. let
    块级作用域变量声明
    以前通过var声明的变量因为变量提升的缘故,若非在函数作用域内声明,则为全局变量,而let则是解决了这个问题
    一个实用场景:

    //<=ES5
    for ( var i = 0; i < 10; i ++ ) {
    }
    console.log( i );//9  变量提升到了全局
    //ES6
    for ( let ii = 0; ii < 10; i ++ ) {
    }
    console.log( ii );//undefined  变量只在for循环块级作用域中生效

    Q:如何形成块级作用域?
    大括号包围则形成一个块级作用域,如函数、循环、判断、选择等结构

    {
      let a = 0;
    }
    console.log( a );//undefined
    let k = 0;
    console.log( k );//0;
  3. const
    静态变量

    const NAME = 'Samuel';
    NAME = 'Lucifer';
    console.log( NAME ); //报错,静态变量不能被重新复制,它相当于一个常量
  4. 箭头函数

    • =>来表示匿名函数function() {}
    • 如果没有=>后没有{},则表示返回=>后的内容
      const A=(a, b)=>a+b;

      等价于

      const A = function(a, b) {
        return a+b;
      }
    • 方便回调函数的定义
      fetch(url).then((data)=>{
         console.log( data );
         //从写法上来说也体现了回调函数的意义,“拿到data了,接着做点什么”
      });
  5. 模块化

    • ES5的模块化
      关键字:require module exports
      遵循CommonJS规范
      详见:前端模块化的那些事儿
    • ES6模块化
      关键字:import(导入) export(导出)
      module.js

      var number = 20;
      //通过export导出
      export default number

      import.js

      //通过import引入module模块
      import num from './module.js'  //这里是module.js的相对路径
      //num对应module的出口number
      console.log( num );//20

第一眼差不多看到这儿吧。别色眯眯的不想走啦!
行行行,再看一眼:

ES6

瞧得咋地?
A bright new future is coming!(半夜看的同学,对不起!)
4不4很酥胡~。:)
解决了以前那些无处安放的对象和作用域问题。
要是您忘不了,之后还有ES6的API。。。

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

未经允许不得转载:演道网 » 第一眼——ES6-演道网

赞 (0)
分享到:更多 ()