從零開始學 Web 之 ES6（三）ES6基礎語法一

時間 2019-11-17

標籤開始 web es6 基礎語法欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、let

做用：與var相似, 用於聲明一個變量。前端

let和var的區別：java

在塊做用域內有效
不能重複聲明
不會預處理, 不存在提高

<script type="text/javascript">
    console.log(res); //不會預處理, 不存在提高，報錯

    // 不能重複聲明
    let res = 10;
    let res = 10; // 報錯

  </script>

應用：循環遍歷加監聽git

咱們先開看一個例子：github

<body>

  <button>測試1</button>
  <button>測試2</button>
  <button>測試3</button>

  <script type="text/javascript">
    let btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function () {
        alert(i);
      }
    }
  </script>
</body>

咱們分別點擊按鈕的時候，分別打印多少？數組

結果：打印的都是2。由於回調函數的寫法會進行覆蓋操做。如何解決？微信

方法一：使用閉包。閉包

for (var i = 0; i < btns.length; i++) {
   (function(){
      btns[i].onclick = function () {
        alert(i);
      }
   })(i);  
}

這種方式至關於，每一個回調函數有個本身的區間，各個區間互不干擾。而 let 正好有這個特性。函數

方法二：將 for循環的 var改成let便可。

2、const

做用：定義一個常量。

特色：不能修改，其它特色同let。

const uName = 'Daotin';

3、變量的解構賦值

理解：從對象或數組中提取數據, 並賦值給變量(多個)。

一、對象的解構賦值

以前咱們要獲取一個對象的屬性，會定義變量而後接收對象的屬性值。

let obj = {name : 'kobe', age : 39};
let name = obj.name;
let age = obj.age;
console.log(name, age);

對象的解構賦值能夠這樣作：

let {name, age} = obj;
console.log(name, age);

注意：
一、對象的解構賦值必須使用大括號 {}

二、大括號裏面的變量名必須和obj裏面的屬性名相同

三、能夠只定義一部分變量接收一部分的obj屬性，不須要所有接收。

二、數組的解構賦值

數組沒有對象的數組名，可是有下標可使用。因此這裏的變量名能夠隨便起。

let arr = ['abc', 23, true];
let [a, b, c] = arr;
console.log(a, b, c);

注意：

一、數組的解構賦值必須使用中括號 []

若是隻想取其中的某幾個值，那麼變量可使用逗號隔開。

let [,,a,,] = arr;

若是定義的變量個數比數組的個數多，多出來的變量的值爲 undefined。

4、模板字符串

做用：簡化字符串的拼接。

注意：

一、模板字符串必須用 ``` ` 包含；

二、變化的部分使用${xxx}定義

let obj = {
  name: 'anverson',
  age: 41
};
// 咱們以前拼接字符串用的是+
console.log('我叫:' + obj.name + ', 個人年齡是：' + obj.age);
// 使用模板字符串的方式
console.log(`我叫:${obj.name}, 個人年齡是：${obj.age}`);

5、對象的簡化寫法

若是有變量和對象的屬性名稱相同，以前的寫法是賦值操做：

let a = 1;
let b = 2;

let Obj = {
  a: a,
  b: b,
};

如今，若是變量和對象的屬性名稱相同，能夠簡寫以下：

let a = 1;
let b = 2;

let Obj = {
  a,
  b,
};

對於對象的屬性，若是是個函數的話，也能夠簡寫：

以前的寫法爲：

let Obj = {
  foo: function(){
    //...
  }
};

如今的寫法爲：（去掉冒號和function）

let Obj = {
  foo(){
    //...
  }
};

6、箭頭函數

做用：箭頭函數的做用主要是定義匿名函數。

有下面幾種狀況的匿名函數均可以使用箭頭函數：

let foo = function () {};
// 轉換成箭頭函數
let foo = () => {};
//------------------------------


let Obj = {
  foo: function () {  }
}
// 轉換成箭頭函數
let Obj = {
  foo: () => {  }
}

基本語法（參數）：

一、匿名函數沒有參數：() 不能省略，佔位做用。let foo = () => {};

二、只有一個參數：() 能夠省略，也能夠不省略。let foo = a => {};

三、多個參數，() 不能省略。let foo = (a,b) => {};

基本語法（函數體）：

一、函數體只有一條語句：能夠省略{}，而且默認返回結果（不須要 return）。

let foo = (x, y) => x + y;
console.log(foo(1, 2));

二、函數體若是有多個語句, 須要用{}包圍，如有須要返回的內容，須要添加return。

let foo = (x, y) => {
      console.log(x, y);
      return x + y;
    };
    console.log(foo(1, 2));

箭頭函數的特色：

一、簡介

二、箭頭函數沒有本身的this，箭頭函數的this不是調用的時候決定的，而是在定義的時候處在的對象就是它的this。（意思：箭頭函數的外層的是否有函數，若是有，箭頭函數的this就是外層函數的this，若是沒有，則爲 window）

<script type="text/javascript">
    let foo = () => {
      console.log(this);
    };
    foo(); // window 對象

    let Obj1 = {
      bar() {
        let foo = () => {
          console.log(this);
        };
        foo();
      }
    };
    Obj1.bar();  // Obj1 對象，箭頭函數外層有函數bar，bar裏面的this是Obj1.

    let Obj2 = {
      bar: () => {
        let foo = () => {
          console.log(this);
        };
        foo();
      }
    };
    Obj2.bar(); // window 對象，箭頭函數外層有函數bar，bar函數也是箭頭函數，bar的外層沒有函數，因此bar裏面的this是window，因此foo裏面的this也是window。
  </script>

7、三點（可變參數）運算符

做用：

一、用來取代 arguments 但比 arguments 靈活,

arguments 是個僞數組，可是三點運算符是真數組，可使用 forEach 等方法。

二、三點（可變參數）運算符只能是最後部分形參參數。 可是前面是能夠有參數來佔位的。

三、擴展運算符

let arr = [1, 6];
    let arr1 = [2, 3, 4, 5];

    arr = [1, ...arr1, 6];
    console.log(arr); // [1,2,3,4,5,6]
    console.log(...arr); // 1 2 3 4 5 6

語法：...數組名 ：表示遍歷數組的全部元素。

8、形參默認值

做用：當不傳入參數的時候默認使用形參裏的默認值。

<script type="text/javascript">
        //定義一個點的座標
        function Point(x = 12, y = 12) { // 形參的默認值
            this.x = x;
            this.y = y;
        }

        let p = new Point();
        console.log(p);

        let point = new Point(25, 36);
        console.log(point);
    </script>