ECMAScript6

  1  1、開發環境搭建
  2     1) 版本控制工具
  3     svn 和 git
  4     
  5     2) 下載安裝 nodeJS 和 npm
  6     
  7     3) 在開發工具 (Hbuilder) 中配置 cmd 終端，通過終端安裝 Babel 編譯器
  8     1.初始化項目
  9     在安裝Babel之前，需要用npm init先初始化我們的項目。打開終端或者通過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：
 10     1    npm init -y
 11     -y代表全部預設同意，就不用一次次按回車了。命令執行完成後，會在項目根目錄下生產package.json文件。
 12     {
 13       "name": "es6",
 14       "version": "1.0.0",
 15       "description": "",
 16       "main": "index.js",
 17       "scripts": {
 18         "test": "echo \"Error: no test specified\" && exit 1"
 19       },
 20       "keywords": [],
 21       "author": "",
 22       "license": "ISC"
 23     }
 24     可以根據自己的需要進行修改，比如我們修改name的值。
 25     
 26     2.全局安裝 Babel-cli 
 27     在終端中輸入以下命令,如果你安裝很慢的話，可以使用淘寶鏡像的cnpm來進行安裝。
 28     1    npm install -g babel-cli
 29     註：安裝時有 "npm ERR! Windows_NT 6.1.7601" 報錯情況別急可如下處理：
 30         方法一：
 31         1、關閉npm的https
 32             npm config set strict-ssl false
 33         2、設置npm的獲取地址
 34             npm config set registry "http://registry.npmjs.org/"
 35         方法二：
 36         還在獲取中
 37     安裝好 Babel-cli 後可以通過 "babel 編譯文件的js路徑 -o 引入文件的js路徑" 命令來生成引入文件中的 js ，但此時的 js 文件還是沒有被編譯，還是使用了 ES6 的語法，此時我們還需要安裝轉化寶才能成功轉換
 38     
 39     3.本地安裝 babel-preset-es2015 和 babel-cli
 40     1    npm install --save-dev babel-preset-es2015 babel-cli
 41     安裝完成後，我們可以看一下我們的package.json文件，已經多了devDependencies選項。
 42       "devDependencies": {
 43         "babel-cli": "^6.24.1",
 44         "babel-preset-es2015": "^6.24.1"
 45       }
 46     
 47     4.新建 .babelrc 文件
 48     在根目錄下新建.babelrc文件，並打開錄入下麵的代碼
 49     {
 50         "presets":[
 51             "es2015"
 52         ],
 53         "plugins":[]
 54     }
 55     這個文件建立完成後，我們就可以在終端輸入 "babel src/index.js -o dist/index.js" 轉化命令將 ES6 轉化為 ES5 語法
 56     
 57     5.簡化轉化命令
 58     在學習vue 的時候，可以使用 npm run build 直接利用 webpack 進行打包，在這裡也希望利用這種方式完成轉換。打開package.json文件，把文件修改成下麵的樣子。
 59     {
 60       "name": "es6",
 61       "version": "1.0.0",
 62       "description": "",
 63       "main": "index.js",
 64       "scripts": {
 65         "test": "echo \"Error: no test specified\" && exit 1"
 66       },
 67       "keywords": [],
 68       "author": "",
 69       "license": "ISC",
 70       "devDependencies": {
 71          "babel-cli": "^6.26.0",
 72          "babel-preset-es2015": "^6.24.1"
 73        }
 74     }
 75     修改好後，以後我們就可以直接使用 npm run build 來進行轉換了。
 76     
 77 2、變數
 78     var          重覆聲明、函數級
 79     let           不能重覆聲明、塊級、變數
 80     const        不能重覆聲明、塊級、常量
 81     
 82     箭頭函數
 83     1、如果只有一個參數, ()可以省
 84     2、如果只有一個return, {}可以省
 85     
 86 3、解構賦值
 87     1.數組的結構賦值
 88     一 一對應原則，左右兩邊不統一會報錯
 89     註：undefined 和 null 的區別
 90     
 91     let [a,b="JSPang"]=['技術胖',undefined];
 92     console.log(a+b); //控制台顯示“技術胖JSPang”
 93     undefined相當於什麼都沒有，b是預設值。
 94     
 95     let [a,b="JSPang"]=['技術胖',null];
 96     console.log(a+b); //控制台顯示“技術胖null”
 97     null相當於有值，但值為null。所以b並沒有取預設值，而是解構成了null。
 98     
 99     2.對象的結構賦值
100     對象是根據屬性名來確定取值的
101     註：圓括弧的使用
102     let foo;
103     ({foo} ={foo:'JSPang'}); //不加圓括弧會報錯
104     console.log(foo); //控制台輸出jspang
105     
106     3.字元串結構賦值
107     const [a, b, c, d] = "wang";
108     console.log(a);
109     console.log(b);
110     console.log(c);
111     console.log(d);
112     
113 4、擴展運算符和 rest 運算符
114     function wang(…args){
115         console.log(args[0]);
116         console.log(args[1]);
117         console.log(args[2]);
118         console.log(args[3]);
119     }
120     wang(1,2,3);
121     
122 5、字元串模板
123     字元串查找/判斷是否存在
124     indexOf()       返回索引值
125     includes()       返回布爾值
126     startsWith()   判斷開頭是否存在
127     endsWith()   判斷開頭是否存在
128     
129 6、ES6數字操作
130     //二進位聲明    Binary
131     let binary = 0B010101;
132     console.log(binary);//21
133     
134     //八進位聲明     Octal
135     let octal = 0o666;
136     console.log(octal);//438
137     
138     Number 對象