轉載：ECMAScript 6 入門

一、ES5/ES6和babel

ECMAScript5，即ES5，是ECMAScript的第五次修訂，於2009年完成標準化，現在的瀏覽器已經相當於完全實現了這個標準。
ECMAScript6，即ES6，也稱ES2015，是ECMAScript的第六次修訂，於2015年完成，並且運用的範圍逐漸開始擴大，因為其相對於ES5更加簡潔，提高了開發速率，開發者也都在陸續進行使用，但是由於ES6還存在一些支援的問題，所以一般即使是使用ES6開發的工程，也需要使用Babel進行轉換。
Babel是一個廣泛使用的ES6轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。這一過程叫做“原始碼到原始碼”編譯，也被稱為轉換編譯。

一般來說Babel作為依賴包被引入ES6工程中，此處不再介紹以cli方式使用的ES6，如果你需要以程式設計的方式來使用 Babel，可以使用 babel-core 這個包。babel-core 的作用是把 js 程式碼分析成 ast ，方便各個外掛分析語法進行相應的處理。有些新語法在低版本 js 中是不存在的，如箭頭函式，rest 引數，函式預設值等，這種語言層面的不相容只能通過將程式碼轉為 ast，分析其語法後再轉為低版本 js。babel的使用過程如下：

1. 首先安裝 babel-core。

$ npm install babel-core

2. 在檔案開頭引入babel：

var babel = require("babel-core");

3. 檔案轉換

字串形式的 JavaScript 程式碼可以直接使用 babel.transform 來編譯。


  
   
    
     
    
    
     
      babel.transform(
      "code();", options);
     
    
   
    
     
    
    
     
      // => { code, map, ast }

如果是檔案的話，可以使用非同步 api：


  
   
    
     
    
    
     
      babel.transformFile(
      "filename.js" 
, options, 
      function(err, result) {
     
    
   
    
     
    
    
     
        result; 
      // => { code, map, ast }
     
    
   
    
     
    
    
     
      });

或者是同步 api：


  
   
    
     
    
    
     
      babel.transformFileSync(
      "filename.js", options);
     
    
   
    
     
    
    
     
      // => { code, map, ast }

或者在development環境下可以使用bable-node和bable-register的方式配置，過程如下：

1. 新增依賴

在Node.js工程package.json包中新增如下依賴：


  
   
    
     
    
    
     
      "devDependencies": {
     
    
   
    
     
    
    
     
          "babel-cli": "^6.26.0",
     
    
   
    
     
    
    
     
          "babel-eslint": "^8.0.1",
     
    
   
    
     
    
    
     
          "babel-plugin-transform-flow-strip-types": "^6.22.0",
     
    
   
    
     
    
    
     
          "babel-preset-es2015": "^6.24.1",
     
    
   
    
     
    
    
     
          "babel-register": "^6.26.0",
     
    
   
    
     
    
    
     
          ...
     
    
   
    
     
    
    
     
        }

2. 配置dev指令碼


  
   
    
     
    
    
     
      "scripts": {
     
    
   
    
     
    
    
     
          "serve-dev": "NODE_ENV=development nodemon ./src/index.js --exec babel-node",
     
    
   
    
     
    
    
     
        },

接下來羅列一下ES6的語法要點參考備用。

二、let, const

這兩個的用途與var類似，都是用來宣告變數的，但在實際運用中他倆都有各自的特殊用途。
首先來看下面這個例子：


  
   
    
     
    
    
     
      var name = 
      'zach'
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      while (
      true) {
     
    
   
    
     
    
    
         
      var name = 
      'obama'
     
    
   
    
     
    
    
         
      console.log(name)  
      //obama
     
    
   
    
     
    
    
         
      break
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      console.log(name)  
      //obama

使用var 兩次輸出都是obama，這是因為ES5只有全域性作用域和函式作用域，沒有塊級作用域，這帶來很多不合理的場景。第一種場景就是你現在看到的內層變數覆蓋外層變數。而let則實際上為JavaScript新增了塊級作用域。用它所宣告的變數，只在let命令所在的程式碼塊內有效。


  
   
    
     
    
    
     
      let name = 
      'zach'
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      while (
      true) {
     
    
   
    
     
    
    
         
      let name = 
      'obama'
     
    
   
    
     
    
    
         
      console.log(name)  
      //obama
     
    
   
    
     
    
    
         
      break
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
      
     
    
   
    
     
    
    
     
      console.log(name)  
      //zach

另外一個var帶來的不合理場景就是用來計數的迴圈變數洩露為全域性變數，看下面的例子：


  
   
    
     
    
    
     
      var a = [];
     
    
   
    
     
    
    
     
      for (
      var i = 
      0; i < 
      10; i++) {
     
    
   
    
     
    
    
     
        a[i] = 
      function () {
     
    
   
    
     
    
    
         
      console.log(i);
     
    
   
    
     
    
    
     
        };
     
    
   
    
     
    
    
     
      }
     
    
   
    
     
    
    
     
      a[
      6](); 
      // 10

上面程式碼中，變數i是var宣告的，在全域性範圍內都有效。所以每一次迴圈，新的i值都會覆蓋舊值，導致最後輸出的是最後一輪的i的值。而使用let則不會出現這個問題。


  
   
    
     
    
    
     
      var a = [];
     
    
   
    
     
    
    
     
      for (
      let i = 
      0; i < 
      10; i++) {
     
    
   
    
     
    
    
     
        a[i] = 
      function () {
     
    
   
    
     
    
    
         
      console.log(i);
     
    
   
    
     
    
    
     
        };
     
    
   
    
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    Node.js從入門到實戰ECMAScript6一頁紙總結（很大的一頁紙）
      轉載：30分鐘掌握ES6/ES2015核心內容（上）
轉載：30分鐘掌握ES6/ES2015核心內容（下）
轉載：ECMAScript 6 入門
一、ES5/ES6和babel
ECMAScript5，即ES5，是ECMAScript的第五次修訂，於2009年完成標準化，現在的瀏覽器已經相當於完全實現了這個標 

  
 

    

    
    Node.js從入門到實戰（五）ECMAScript6一頁紙總結（很大的一頁紙）
      
                



一、ES5/ES6和babel
ECMAScript5，即ES5，是ECMAScript的第五次修訂，於2009年完成標準化，現在的瀏覽器已經相當於完全實現了這個標準。
ECMAScript6，即ES6，也稱ES2015，是ECMAScript的第六次修訂，於2015 

  
 

    

    
    Node.js從入門到實戰（六）React一頁紙總結（很大的一頁紙）
      
                



一、React
React是一個JavaScript庫，是由FaceBook和Instagram開發的，主要用於使用者建立圖形化介面。
由於 React 的設計思想極其獨特，屬於革命性創新，效能出眾，程式碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是 

  
 

    

    
    Node.js從入門到實戰（一）Intellj Idea 2017下的第一個Node.js工程
      
                
參考：
一、Intellj Idea下的初始工程
使用Idea建立的Node.js Express工程建立成功後執行，



二、程式碼分析
第一個工程命名為PageIron，該專案的主要程式碼位於PageIron/bin/www檔案中：

Node.js 應用的組成部分： 

  
 

    

    
    node.js從入門到放棄（一）
      主鍵   data   timestamp   insert   代碼   了解   javascrip   ice   where   以下內容全是我個人理解寫出，如有不對，請立刻練習本人進行更改。以免被剛入門的被我帶入坑裏。
—node是什麽？我想大家應該都知道。
node是前端未來幹掉後 

  
 

    

    
    Node.js從入門到實戰（七）Solr查詢規則總結
      
                

一、Solr
Solr是一個獨立的企業級搜尋應用伺服器，它對外提供類似於Web-service的API介面。使用者可以通過http請求，向搜尋引擎伺服器提交一定格式的XML檔案，生成索引；也可以通過Http Get操作提出查詢請求，並得到XML格式的返回結果。
本文不涉及 

  
 

    

    
    Node.js從入門到實戰（八）Solr的層級
      
                
參考：Node.js從入門到實戰（七）Solr查詢規則總結

一、Solr的層級
Solr作為關鍵的搜尋元件，在整個系統中的架構如下圖所示：

Solr的索引服務是為了提高搜尋的效率，一般而言Solr需要配合Nosql DB使用，作為與NoSQL DB相互獨立的補充，在能夠 

  
 

    

    
    Node.js從入門到實戰（四）Node.js / JavaScript / ECMAScript的關係
      
                

一、Node.js
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
V8引擎本身使用 

  
 

    

    
    Node.js從入門到實戰（三）Npm使用介紹
      
                

一、NPM
NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS程式碼部署上的很多問題，常見的使用場景有以下幾種：
允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。允許使用者將自己編寫 

  
 

    

    
    Node.js從入門到實戰（二）Node.js基本用法
      
                
參考：
一、Node.js中的模組
Node.js使用require引入依賴的模組，因此模組是Node.js中的重要組成部分，這篇部落格主要羅列一下常用的Node.js模組，並且在後期會新增在工作中用到的模組參考備用。
二、Node.js EventEmitter
Node 

  
 

    

    
    node.js從入門到放棄（二）
      簡單的   all   ==   ons   true   nts   數值   定時   註冊   上章講了學習node，應該去學習什麽，對這些框架去進行學習現在咋們聊聊如何用原生來進行操作
主要來講一下events-事件觸發器
先來講一個簡單的實例
EventEmitter的實例，綁定一個監聽器。用 

  
 

    

    
    arcgis for js 從入門到放棄一：初識和配置詳解
      
							
							
							前言：去年因專案需要學習arcgis js，上手資料只有官網的api和demo，半年過去了資料還是很少，於是寫這個系列希望能幫助新手能快速入門。這東西我玩的時間也不長，各種不足和錯誤也希望大家能批評指正。
首先給出官網地址(https://developers. 

  
 

    

    
    bootstrap實戰練習中涉及的知識點（很有用哦！）
             看的有關視訊做的筆記，對bootstrap中涉及的知識點做了一定的解析，很有用哦！（新手上路，有不合適的地方可以指出哦！）
　　下面進入正題：
 
Bootstrap是當下最流行的前端框架（介面工具集）
 
特點就是靈活簡介， 

  
 

    

    
    Node.js開發入門（一）——安裝Node.js及編輯器配置
      
                

Node.js是一個輕鬆構建快速，可擴充套件的網路應用平臺建立在Chrome的JavaScript執行。Node.js使用事件驅動，非阻塞I/O模型，使得它重量輕，高效，完美的資料密集型實時應用程式執行在分散式裝置。

Node.js是讓JavaScript脫離瀏覽器執行 

  
 

    

    
    2018年Javascript之Node.JS經典教程 Node.js從理論到實戰視訊
       
 
 
  
   
     適用人群 前端開發，前端工作，前端學習 課程概述 智慧社：Javascript之Node.JS-經典教程：從理論到實戰！ 基礎部分(第1-6節) 模組化(第7-8節) 框架應用(第9-24節) 資料庫應用 

  
 

    

    
    react.js從入門到精通（一）
      
                web端三大框架react、vue和angular，下面是對react.js的一些總結。

一、環境搭建

1、npm搭建專案

推薦使用npm搭建專案環境，如果網速過慢，可是使用cnpm進行專案的搭建（cnpm是淘寶的npm映象，與npm有些差異，有些模組無法下載或無法正常 

  
 

    

    
    2017年前端開發Angular.JS從入門到上手企業開發視頻
      angular入門 angular學習 angular文後附錄下載鏈接：課時名稱1體驗angular2ng-init初始化變量3獲取應用程序4控制器定義作用域5使用事件6顯隱頁面7插值表達式8插值過濾器9filter過濾器10日期過濾器11新聞日期案例12字符串過濾器13數字過濾器14數組過濾器15自定義過濾 

  
 

    

    
    D3.js從入門到“放棄”指南
      局限   .text   技術   綁定   作圖   ansi   實現   了解   selectall   前言
        近期略有點諸事不順，趁略有閑余之時，玩起D3.js。之前實際項目中主要是用各種chart如hightchart、echarts等，這些圖形庫玩起來貌都是完美的，一切皆可配置 

  
 

    

    
    node.js express+ejs引擎構建第一個項目（一）
      sta   com   如果   node.js   install   安裝   exp   expr   inf   express+ejs初始化項目命令：

express -t ejs projetName


目錄結構如下：

安裝依賴：

npm install


 
安裝依賴後，啟動項目：

 

  
 

    

    
    react.js從入門到精通（五）——組件之間的數據傳遞
      efault   def   通道   span   代碼   serve   urn   div   mar   一、組件之間在靜態中的數據傳遞
從上面的代碼我們可以看出，兩個組件之間的數據是分離，但如果我們有某種需求，將數據從一個組件傳到另一個組件中，該如何實現？
場景設計：
將Home.js中的Home