常量變數 let and const

先說說常量和變數的概念吧，

常量是說那種進行一次賦值後不會更改的值，比如說遊戲賬戶的 ID，

變數是說賦值後有更改的需求的，比如遊戲名，遊戲密碼。

在之前的 JavaScript 中是不區分常量和變數的統統使用 var 來定義全域性變數，

var userId = 666;
var userPassword = "mimabunengshuo";

現在 ES6 中使用 let 定義區域性變數，const 定義區域性常量

const userId = 666;
let userPassword = "wobuzidao";

為什麼需要使用區域性變數與常量

//我希望重複列印 0 到 9 ，列印10次
//使用 var
function varI(){
    for(var i = 0;i < 10;i++){
        for(var i = 0;i < 10;i++){
            console.log("varI:"+i);
        }
    }
}
//使用 let
function letI(){
    for(let i = 0;i < 10;i++){
        for(let i = 0;i < 10;i++){
            console.log("letI:"+i);
        }
    }
}
varI();//結果列印只有一次 0 到 9
letI();//順利完成
 

如果非要使用 var 完成這個需求的話可以使用閉包

關於閉包本次不多做討論

function varI() {
    for (var i = 0; i < 10; i++) {
        function test() {
            for (var i = 0; i < 10; i++) {
                console.log("varI:" + i);
            }
        }
        test();
    
    }
}
varI();//順利完成

結構賦值

1. 左右兩邊必須是一樣的資料型別，或者轉換後是一樣的型別；
2. 等號右邊的值應該是陣列或物件，不是物件或陣列，就先將其轉為物件；
3. 定義和賦值必須同步完成

例如宣告變數

let a = 1;
let b = 2;
let c = 3;

ES6 允許寫成下面這樣。

let [a, b, c] = [1, 2, 3];

常用例項

1.交換變數的值

let x = 1;
let y = 2;

[x, y] = [y, x];  

2.提取 JSON 資料

解構賦值對提取 JSON 物件中的資料，尤其有用。

let jsonData = {
  status: true,
  data: ["nicai", "wobuzhidao"]
};

let { status, data } = jsonData;

console.log(status, data);// true ["nicai", "wobuzhidao"]

箭頭函式

在 ES6 之前定義函式是這樣寫

var f = function (i){
    return  i + 5;
}

有了箭頭函式可以這樣寫（去掉 function 關鍵詞，在"()"後面加"=>"）

let f = (i) => {
    return  i + 5;
}

好像沒有太大區別？

• 箭頭函式只有一個引數時,可以省略"()",只寫引數；當只有一條返回語句時，可以省略"{}",以及 return 語句

上面的可以這樣寫

let f = i => return i + 5;

箭頭函式的 this 是固定不變的，就是指向定義時所在的物件，而不是使用時所在的物件

假如將 ES6 的箭頭函式轉換為 ES5 的普通函式,可以看到，箭頭函式的 this 是在引用外層的 this

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

字串模板

• 字串模板主要用來處理變數和字串混合的情況
• 字串使用反引號(字串)來包裹字串，用$符加大括號 ( ${JavaScript}) 來包裹任意的 JavaScript 表示式
• 字串模板中可以使用回車

比如用 JavaScript 來生成 HTML 元素，元素的文字想使用自己 JavaScript 運算後的結果

ES5 中比較麻煩

$('#dom').append(
  '<div>你的使用者名稱是：' + userName + '<br> ' +
  '你已經註冊了 ' + oNumber +'年</div>'
);

ES6中相對簡單

$('#dom').append(
  `<div>你的使用者名稱是：${userName}<br>你已經註冊了${oNumber}年</div>`
);

面向物件

• class 用來定義一個類
• extends 用來表示繼承哪個類
• constructor 建構函式可以定義私有方法和屬性,此函式外的為共享的
• super() 在 constructor 使用該方法繼承父類的 this 物件

程式碼示例

class user {
    constructor() {
        this.name = '使用者1';
    }
    sayHello(say) {
        console.log(`${this.name}，有人對你說：${say}`);
    }
}

let user1 = new user();
user1.sayHello('你好'); //使用者1，有人對你說：你好

class xiaoming extends user {
    constructor() {
        super();
        this.name = '小明';
    }
}

let xiaoming1 = new xiaoming();
xiaoming1.sayHello('你好'); //小明，有人對你說：你好
let user2 = new user();
user2.sayHello('你好')//使用者1，有人對你說：你好

函式

• 引數預設值

在 JavaScript 傳統語法中如果想設定函式預設值一般我們採用判斷的形式

function example (a,b,c) {
    a = a||'string';
    b = b||'number';
    c = c||'json';
    console.log(a);
    console.log(b);
    console.log(c); // 'string' 'number' 'json'
}

在新的語法中我們可以在引數宣告的同時賦予預設值

function example (a = 'string',b = 'number',c = 'json') {
    console.log(a);
    console.log(b);
    console.log(c); // 'string' 'number' 'json'
}

• 引數展開

在 JavaScript 傳統語法中如果不確定引數的數量，並且想獲取所有的引數，一般使用 arguments （函式自帶的變數，陣列型別，存放所有的引數）

function example (){
    console.log(arguments);
}

在新的語法中我們可以使用三個點 ... 表示接收全部引數

function example (...oVar){
    console.log(oVar);
}

還可以結合解構賦值，實現不用按順序傳遞引數

function (...opaction){
    let {url,type,succ,err} = opaction;
    if(!url){
        return false;
    }else{
        console.log(url);
        console.log(type);
        console.log(succ);
        console.log(err);
    }
}

陣列

• map() 方法建立一個新陣列，然後每次從開始給回撥函式傳遞一個原來陣列的成員，直到結束

  let oArray = [5, 7, 1, 56];
  const oMap = oArray .map(x => x * 3);
  console.log(oMap);// Array [15, 21, 3, 168]
  //對映： 一個對一個

• reduce() 方法接收一個函式作為累加器(升序執行)，最終計算為一個值

  var numbers = [1, 2, 3, 4];

  function getSum(total, num) {
  return total + num;
  }
  console.log(numbers.reduce(getSum)); // 10
  //彙總：一堆 返回 一個

• filter() 方法建立一個新的陣列，新陣列中的元素是回撥函式中符合條件的所有元素。

  var ages = [95, 59, 18, 21];

  function checkAdult(age) {
  return age >= 60;
  }

  console.log(ages.filter(checkAdult));// 95

  //過濾：一堆 返回 部分

• forEach() 方法呼叫陣列的每個元素,並將元素傳遞給回撥函式

  //遍歷： 以上的都可以通過 forEach() 來手動實現，並且可以實現更加個性的自定義操作
  var array1 = ['a', 'b', 'c'];

  array1.forEach(element => {
  console.log(element);
  });// a b c

• Array.from() 方法用於將兩類物件轉為真正的陣列：類似陣列的物件（array-like object）和可遍歷（iterable）的物件

  //常見的類似陣列的物件是 DOM 操作返回的 NodeList 集合，以及函式內部的 arguments 物件

  // NodeList物件
  let ps = document.getElementsByClassName('p');//所有取到的 dom 元素都是 NodeList 格式，不是真正意義上的陣列
  Array.from(ps).filter(p => {
  return p.textContent.length > 9;//先用 from() 將所有取到的 p 標籤轉換為真正的陣列 然後過濾掉前十個
  });

  // arguments物件
  function foo() {
  var args = Array.from(arguments);
  // arguments 也不是真正意義上的陣列
  }

json JavaScript物件字面量

關於什麼是 json 這裡不過多介紹，主要看看 ES6 裡 json JavaScript物件字面量 是怎樣的

很多JavaScript開發人員都錯誤地把JavaScript物件字面量（Object Literals）稱為JSON物件（JSON Objects）包括我自己

在這裡推薦一篇文章,感謝那些幫我指出錯誤並告訴我正確知識的人，謝謝

• key and value

當鍵名和鍵值是一樣的情況下可以只寫一個，在引入元件與庫中特定方法時，可以看到（關於如何引入其他檔案，將在之後的文章寫）

//傳統
{
    name: name,
}

//ES6
{
    name
}

• function

如果在之前瞭解過微信小程式，vue ，或者將要學習那麼應該會經常看到這兩種函式的寫法

{
    onLoad() {
        butClick() {
            return false;
        }
    }
    
    methods: {
        butClick() {
            return false;
        }
    }
}

但是如果不用框架，寫這樣的程式碼，會報錯

這是因為框架其實可以看做一個函式，上面這種程式碼是傳遞給函式的引數（這個引數的接收方法在本篇文章的開頭）

這個引數是以 json 物件的形式傳遞的，

而 ES6 中當 value 旳值是一個函式時可以省略冒號和 function 關鍵字

//傳統 
{
    butClick: function (){
        return false;
    }
}

//ES6 
{
    butClick() {
        return false;
    }
}