學習ES6(上)

時間  2019-11-09
標籤 學習 es6 欄目 JavaScript 简体版
原文   原文鏈接
  • 在寫vue項目時，不少地方用了ES6語法，讓代碼變得更簡潔，因此在此將ES6語法總結一下

ES6的開發環境搭建

  • 如今的Chrome瀏覽器已經支持ES6了，可是有些低版本的瀏覽器仍是不支持ES6的語法，這就須要咱們把ES6的語法自動的轉變成ES5的語法。咱們知道Webpack是有自動編譯轉換能力的，除了Webpack自動編譯，咱們還能夠用Babel來完成，接下來咱們使用babel把ES6編譯成ES5.

創建工程目錄：

  • 先創建一個項目的工程目錄，並在目錄下邊創建兩個文件夾：src和dist
    • src：書寫ES6代碼的文件夾，寫的js程序都放在這裏。
    • dist：利用Babel編譯成的ES5代碼的文件夾，在HTML頁面須要引入的時這裏的js文件。

編寫index.html：

  • 文件夾創建好後，咱們新建一個index.html文件。
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="./dist/index.js"></script>
    </head>
    <body>
        Hello ECMA Script 6
    </body>
</html>
  • 須要注意的是在引入js文件時，引入的是dist目錄下的文件。
  • <script src="./dist/index.js"></script>

編寫index.js

  • 在src目錄下，新建index.js文件。這個文件很簡單，咱們只做一個a變量的聲明，並用console.log()打印出來。
let a=1;
console.log(a);
  • 咱們用了let聲明，這裏let是ES6的一種聲明方式，接下來咱們須要把這個ES6的語法文件自動編程成ES5的語法文件

初始化項目

  • 在安裝Babel以前，須要用npm init先初始化咱們的項目。打開終端或者經過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：
    npm init -y
  • -y表明所有默認贊成，就不用一次次按回車了。命令執行完成後，會在項目根目錄下生產package.json文件。
{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • 能夠根據本身的須要進行修改，好比咱們修改name的值。

全局安裝Babel-cli

  • 在終端中輸入如下命令,若是你安裝很慢的話，可使用淘寶鏡像的cnpm來進行安裝

本地安裝babel-preset-es2015 和 babel-cli

npm install --save-dev babel-preset-es2015 babel-clihtml

  • 安裝完成後，咱們能夠看一下咱們的package.json文件，已經多了devDependencies選項。
"devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }

新建.babelrc

  • 在根目錄下新建.babelrc文件，並打開錄入下面的代碼
{
    "presets":[
        "es2015"
    ],
    "plugins":[]
}
  • 這個文件咱們創建完成後，如今能夠在終端輸入的轉換命令了，此次ES6成功轉化爲ES5的語法。
    babel src/index.js -o dist/index.js

簡化轉化命令：

  • 在學習vue 的時候，可使用npm run build 直接利用webpack進行打包，在這裏也但願利用這種方式完成轉換。打開package.json文件，把文件修改爲下面的樣子。
{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.24.1",
    "babel-preset-es2015": "^6.24.1"
  }
}
  • 修改好後，之後咱們就可使用 npm run build 來進行轉換了。

新的聲明方式

  • var:在ES6中，var是用來聲明全局變量
  • let :聲明局部變量，能夠防止數據的污染
  • const:聲明常量，注意這個聲明後，以後都不要改變它

變量的解構賦值

  • ES6容許按照必定模式，從數組和對象中提取值，對變量進行賦值，這被稱爲解構。解構賦值在實際開發中能夠大量減小咱們的代碼量，而且讓咱們的程序結構更清晰。也許你仍是不太明白，那先來一個最簡單的數組解構賦值來進行賦值。

數組的解構賦值：

簡單的數組解構：

之前，爲變量賦值，咱們只能直接指定值。好比下面的代碼：vue

let a=0;
let b=1;
let c=2;
  • 而如今咱們能夠用數組解構的方式來進行賦值。
    let [a,b,c]=[1,2,3];
  • 上面的代碼表示，能夠從數組中提取值，按照位置的對象關係對變量賦值。
數組模式和賦值模式統一：
  • 能夠簡單的理解爲等號左邊和等號右邊的形式要統一，若是不統一解構將失敗。
    let [a,[b,c],d]=[1,[2,3],4];
  • 若是等號兩邊形式不同，極可能得到undefined或者直接報錯。
解構的默認值：
  • 解構賦值是容許你使用默認值的，先看一個最簡單的默認是的例子。
let [foo = true] =[];
console.log(foo); //控制檯打印出true
  • 上邊的例子數組中只有一個值，可能你會多少有些疑惑，咱們就來個多個值的數組，並給他一些默認值。
let [a,b="JSPang"]=['技術胖']
console.log(a+b); //控制檯顯示「技術胖JSPang」
  • 如今咱們對默認值有所瞭解，須要注意的是undefined和null的區別。
let [a,b="JSPang"]=['技術胖',undefined];
console.log(a+b); //控制檯顯示「技術胖JSPang」
  • undefined至關於什麼都沒有，b是默認值。
let [a,b="JSPang"]=['技術胖',null];
console.log(a+b); //控制檯顯示「技術胖null」
  • null至關於有值，但值爲null。因此b並無取默認值，而是解構成了null。

對象的解構賦值

  • 解構不只能夠用於數組，還能夠用於對象。
let {foo,bar} = {foo:'JSPang',bar:'技術胖'};
console.log(foo+bar); //控制檯打印出了「JSPang技術胖」
  • 注意：對象的解構與數組有一個重要的不一樣。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性名同名，才能取到正確的值。

圓括號的使用

  • 若是在解構以前就定義了變量，這時候你再解構會出現問題。下面是錯誤的代碼，編譯會報錯。
let foo;
{foo} ={foo:'JSPang'};
console.log(foo);
  • 要解決報錯，使程序正常，咱們這時候只要在解構的語句外邊加一個圓括號就能夠了。
let foo;
({foo} ={foo:'JSPang'});
console.log(foo); //控制檯輸出jspang

字符串解構

  • 字符串也能夠解構，這是由於，此時字符串被轉換成了一個相似數組的對象。
const [a,b,c,d,e,f]="JSPang";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);

擴展運算符和rest參數

  • ( 擴展運算符和rest參數)[http://www.jb51.net/article/118958.htm]webpack

    rest參數

  • rest參數形式爲:...變量名
  • rest參數搭配的變量是一個數組，該變量會將函數的參數放入一個數組中，因此能夠用rest參數代替argouments對象,請看下面一個例子:
function sortNumbers1 () {
     return Array.prototype.slice.call(arguments).sort();
}
const sortNumbers2 = (...values) =>{
    return values.sort();
}
console.log(sortNumbers1(9,2,5,1));
console.log(sortNumbers2(9,2,5,1));
rest參數和arguments對象的區別
- arguments 對象不是一個真實的數組；上文的``` Array.prototype.slice.call(arguments)```就是將 arguments 對象轉化成一個真數組，而rest參數是真實的 Array 實例，也就是說你可以在它上面直接使用全部的數組方法
  • rest 參數以後不能再有其餘參數（即只能是最後一個參數），不然會報錯。
    function f(a, ...b, c) { ... } // 報錯

字符串模版

  • ES6新增了字符串的操做，就是字符串模板，字符串模版的出現讓咱們不再用拼接變量了，並且支持在模板裏有簡單計算操做

字符串模版

  • 咱們先看看ES5的字符串拼接:
let jspang='技術胖';
let blog = '很是高興你能看到這篇文章，我是你的老朋友'+jspang+'。這節課咱們學習字符串模版。';
document.write(blog);
  • 這種方式很麻煩，也很容易出錯
  • 再看看ES6的字符串拼接:
let jspang='技術胖';
let blog = `很是高興你能看到這篇文章，我是你的老朋友${jspang}。這節課咱們學習字符串模版。`;
document.write(blog);
  • 能夠從瀏覽器上看到跟上面的結果同樣

對運算的支持：

let a=1;
let b=2;
let result=`${a+b}`;
document.write(result);

字符串查找

  • ES6直接用includes就能夠判斷，存在就返回true，不存在返回false,再也不返回索引值

複製字符串

  • 咱們有時候是須要字符串重複的，好比分隔符和特殊符號，這時候複製字符串就派上用場了，語法很簡單。
### ES6數字操做

#### 數字判斷和轉換

##### 數字驗證Number.isFinite( xx )
- 可使用Number.isFinite( )來進行數字驗證，只要是數字，不管是浮點型仍是整形都會返回true，其餘時候會返回false。

let a= 11/4;
console.log(Number.isFinite(a));//true
console.log(Number.isFinite('jspang'));//false
console.log(Number.isFinite(NaN));//false
console.log(Number.isFinite(undefined));//false
```es6

NaN驗證

  • NaN是特殊的非數字，可使用Number.isNaN()來進行驗證。下邊的代碼控制檯返回了true
#### 判斷是否爲整數Number.isInteger(xx)

let a=123.1;
console.log(Number.isInteger(a)); //falseweb

#### 整數轉換Number.parseInt(xxx)和浮點型轉換Number.parseFloat(xxx)

let a='9.18';
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));
```npm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程