第一眼——ES6

越来越多的框架引荐运用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' );
        }
}
  1. 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;
  1. const
    静态变量

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

    • =>来示意匿名函数function() {}

    • 假如没有=>后没有{},则示意返回=>后的内容

const A=(a, b)=>a+b;

等价于

const A = function(a, b) {
        return a+b;
}
  • 轻易回调函数的定义

fetch(url).then((data)=>{
        console.log( data );
        //从写法上来讲也表现了回调函数的意义,“拿到data了,接着做点什么”
});
  1. 模块化

  • 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。。。

    原文作者:shockw4ver
    原文地址: https://segmentfault.com/a/1190000007457571
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞