（三）ES6基礎語法。。。freecodecamp筆記

ECMAScript6

ECMAScript 是 JavaScript 的標準化版本，它旨在統一語言的規範和功能。所有主流的瀏覽器或者 Javascript 的運行環境都支持這個規範，因此 ECMAScript 和 JavaScript 的術語是通用的。在2015年，ECMAScript 發佈了被稱爲 ECMAScript 6 (ES6) 的最新版本。

• 箭頭函數
• 類
• 模塊
• Promises 對象
• 異步生成器 Generators
• let以及const語法

一、探索var和let關鍵字之間的差異

1. 使用var關鍵字來聲明變量，會出現重複聲明導致變量被覆蓋卻不會報錯的問題。
2. 當使用let的時候，同一名字的變量只能被聲明一次。（和java一樣，存在全局變量可以創建同名的局部變量）
3. 寫明"use strict"。這代表着開啓了嚴格模式，在函數內部聲明是局部作用域 (只在函數內使用嚴格模式)，外部則是全局作用域
4. 使用var關鍵字來聲明一個變量的時候，這個變量會被聲明成全局變量，或是函數內的局部變量。（var是可變的，同一塊內存空間）
5. 如果你在代碼塊、語句或表達式中使用關鍵字let聲明變量，這個變量的作用域就被限制在當前的代碼塊，語句或表達式之中。（let是不可變的）

二、用 const 關鍵字聲明只讀變量

1. const擁有let的所有優點，所不同的是，通過const聲明的變量是隻讀的。這意味着通過const聲明的變量只能被賦值一次，而不能被再次賦值。
2. 你應該使用const關鍵字來對所有不打算再次賦值的變量進行聲明。一個最佳實踐是對所有常量的命名採用全大寫字母，並在單詞之間使用下劃線進行分隔。
3. 對象（包括數組和函數）在使用const聲明的時候依然是可變的。使用const來聲明只會保證它的標識不會被重新賦值。(你可以將const聲明的變量指向一個對象，更改對象中的數據是可行的，但是不能建該變量指向另一個對象)

三、防止對象改變

1. const並不會使得對象中的數據不能夠改變，JavaScript 提供了一個函數Object.freeze來防止數據改變。（你不能再對它的屬性再進行增、刪、改的操作。出現增刪改操作會被忽略，但不會報錯）

Object.freeze(MATH_CONSTANTS);

四、使用箭頭函數編寫簡潔的匿名函數

我們會經常遇到不需要給函數命名的情況，如下，代碼不需要複用

const myFunc = function() {
  const myVar = "value";
  return myVar;
}

ES6 提供了其他寫匿名函數的方式的語法糖，箭頭函數

const myFunc = () => {
  const myVar = "value";
  return myVar;
}

當不需要函數體，只返回一個值的時候，箭頭函數允許你省略return關鍵字和外面的大括號。

const myFunc= () => "value"

給箭頭函數，添加參數

const doubler = (item) => item * 2;

當箭頭函數被用到需要用函數作爲參數的高階函數中時會很好用。

FBPosts.filter(function(post) {
  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
})
//簡寫之後
//filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)

demo

filter() 方法創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // 在這行以下修改代碼
  const squaredIntegers = arr.filter((num)=>num>0&&num%parseInt(num)===0).map((num)=>Math.pow(num,2));
  // 在這行以上修改代碼
  return squaredIntegers;
};
// 測試你的代碼
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);

五、設置函數的默認參數

ES6 裏允許給函數傳入默認參數，來構建更加靈活的函數。

當參數沒有被指定的時候，默認參數起作用，例子：

function greeting(name = "Anonymous") {
  return "Hello " + name;
}
console.log(greeting("John")); // Hello John
console.log(greeting()); // Hello Anonymous

六、一個變量來接受多個參數的函數

ES6 推出了用於函數參數的 rest 操作符幫助我們創建更加靈活的函數。你可以創建有一個變量來接受多個參數的函數。這些參數被儲存在一個可以在函數內部讀取的數組中。

function howMany(...args) {
  return "You have passed " + args.length + " arguments.";
}
console.log(howMany(0, 1, 2)); // 輸出：You have passed 3 arguments.
console.log(howMany("string", null, [1, 2, 3], { })); // 輸出：You have passed 4 arguments.

七、使用 spread 運算符展開數組項

ES6 允許我們使用 展開操作符 來展開數組，以及需要多個參數或元素的表達式。

const arr = [6, 89, 3, 45];
const maximus = Math.max(...arr); // 返回 89

let arr2 = [...arr1];

...arr返回了一個“打開”的數組。或者說它 展開 了數組。

然而，展開操作符只能夠在函數的參數中，或者數組之中使用

八、使用解構賦值從對象中分配變量

普通ES5代碼

var voxel = {x: 3.6, y: 7.4, z: 6.54 };
var x = voxel.x; // x = 3.6
var y = voxel.y; // y = 7.4
var z = voxel.z; // z = 6.54

ES6解構語法

const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54
const { x : a, y : b, z : c } = voxel; // a = 3.6, b = 7.4, c = 6.54

我們可以將 嵌套的對象解構到變量中。

const a = {
  start: { x: 5, y: 6},
  end: { x: 6, y: -9 }
};
const { start : { x: startX, y: startY }} = a;
console.log(startX, startY); // 5, 6

九：使用解構賦值從數組中分配變量

const [a, b] = [1, 2, 3, 4, 5, 6];
console.log(a, b); // 1, 2

變量a以及b分別被數組的第一、第二個元素賦值。

我們甚至能在數組解構中使用逗號分隔符，來獲取任意一個想要的值：

const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c); // 1, 2, 5

十、使用解構賦值配合 rest 操作符來重新分配數組元素

在解構數組的某些情況下，我們可能希望將剩下的元素放進另一個數組裏面。

const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
console.log(a, b); // 1, 2
console.log(arr); // [3, 4, 5, 7]

十一、使用解構賦值將對象作爲函數的參數傳遞

在某些情況下，你可以在函數的參數裏直接解構對象。

const profileUpdate = (profileData) => {
  const { name, age, nationality, location } = profileData;
  // 對這些變量執行某些操作
}

這樣的操作也可以直接在參數裏完成：注意參數大括號

const profileUpdate = ({ name, age, nationality, location }) => {
  /* 對這些參數執行某些操作 */
}

十二、使用模板字面量創建字符串

模板字符串是 ES6 的另外一項新的功能。這是一種可以輕鬆構建複雜字符串的方法。

const person = {
  name: "Zodiac Hasbro",
  age: 56
};

// string interpolation
const greeting = `Hello, my name is ${person.name}!
I am ${person.age} years old.`;

console.log(greeting); // 打印出
// Hello, my name is Zodiac Hasbro!
// I am 56 years old.

十三、使用簡單字段編寫簡潔的對象字面量聲明

const getMousePosition = (x, y) => ({
  x: x,
  y: y
});

ES6 提供了一個語法糖，消除了類似x: x這種冗餘的寫法.你可以僅僅只寫一次x，解釋器會自動將其轉換成x: x。

const getMousePosition = (x, y) => ({ x, y });

十四、用 ES6 編寫簡潔的函數聲明

在 ES5 中，當我們需要在對象中定義一個函數的時候，我們必須如下面這般使用function關鍵字：

const person = {
  name: "Taylor",
  sayHello: function() {
    return `Hello! My name is ${this.name}.`;
  }
};

在 ES6 語法的對象中定義函數的時候，你可以完全刪除function關鍵字和冒號。請看以下例子：

const person = {
  name: "Taylor",
  sayHello() {
    return `Hello! My name is ${this.name}.`;
  }
};

十五、使用 class 語法定義構造函數

在 ES5 裏面，我們通常會定義一個構造函數，然後使用 new關鍵字來實例化一個對象：

var SpaceShuttle = function(targetPlanet){
  this.targetPlanet = targetPlanet;
}
var zeus = new SpaceShuttle('Jupiter');

class的語法只是簡單地替換了構造函數的寫法：constructor

class SpaceShuttle {
  constructor(targetPlanet){
    this.targetPlanet = targetPlanet;
  }
}
const zeus = new SpaceShuttle('Jupiter');

十六、使用 getter 和 setter 來控制對象的訪問

function makeClass() {
  "use strict";
  class Thermostat{
    constructor(farenheit){
      this.farenheit= 5/9 * (farenheit - 32);
    }
    get temperature(){
      return this.farenheit;
    }
    set temperature(farenheit){
      this.farenheit=farenheit;
    }
  }
  return Thermostat;
}
const Thermostat = makeClass();
const thermos = new Thermostat(76); // 使用華氏溫度來初始化
let temp = thermos.temperature; // 攝氏溫度24.44度
thermos.temperature = 26;
temp = thermos.temperature; // 攝氏溫度26度

十七、瞭解 import 和 require 之間的差異

ES6 給我們提供了import這個便利的工具。通過它，我們能夠從外部的文件或者模塊中選擇我們需要的部分進行引入。

如math_array_functions擁有大概20個函數，但是我只需要countItems這一個函數在我當前的文件裏

import { countItems } from "math_array_functions"

在大括號裏的函數名的兩側加上空格是一個最佳實踐——這可以幫助我們輕鬆的閱讀import語句。

十八、用 export 來重用（導出）代碼塊

const capitalizeString = (string) => {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
export { capitalizeString } //如何導出函數。
export const foo = "bar"; //如何導出變量。
----------------------------------------
const foo = "bar";
export { capitalizeString, foo }//一行導出

十九、用 * 從文件中導入所有內容

import * as myMathModule from "math_functions";
myMathModule.add(2,3);
myMathModule.subtract(5,3);

你可以在import * as之後添加任意的名稱。這個方法接收到的值是一個對象，你可以使用點表示法來獲取對象裏具體的值。

二十、用 export default 創建一個默認導出

你還需要知道另外一種被稱爲默認導出的export的語法。在文件中只有一個值需要導出的時候，你通常會使用這種語法。它也常常用於給文件或者模塊創建返回值。

export default function add(x,y) {
  return x + y;
}

二十一、導入一個默認的導出

import add from "math_functions";
add(5,4); //將會返回 9

這個語法只有一處不同的地方 —— 被導入的add值，並沒有被花括號{}所包圍。與導出值的方法不同，導入默認導出的寫法僅僅只是簡單的將變量名寫在import之後。