JavaScript ES6 讓咱們寫得少，作得多

JavaScript ES6 帶來了新的語法和新的強大功能，使您的代碼更現代，更易讀。它容許您編寫更少的代碼並執行更多操做。 ES6 向咱們介紹了許多強大的功能，如箭頭函數，模板字符串，對象結構，模塊等，讓咱們來看看。

const and let

const 是 ES6 中用於聲明變量的新關鍵字。 const 比 var 更強大。使用後，沒法從新分配變量。換句話說，它是一個不可變的變量，除非它與對象一塊兒使用。

這對於定位選擇器很是有用。例如，當咱們有一個觸發事件的按鈕時，或者當您想在 JavaScript 中選擇 HTML 元素時，請使用 const 而不是 var。這是由於 var 會被提高，當不想從新分配變量時，最好使用 const。

// ES5
var MyBtn = document.getElementId('mybtn');

// ES6
const MyBtn = document.getElementById('mybtn');

在上面的代碼中，const 不會更改，也不能從新分配。若是您嘗試爲其賦予新值，則會返回錯誤。

let name = "Said";
    name = "Rick";

console.log(name); // Rick

let 能夠從新分配並得到新的價值。它建立了一個可變變量。

let 與 const 相同，由於二者都是塊級做用域，這意味着該變量僅在其塊級範圍內可用。

箭頭函數

箭頭函數很是棒，使您的代碼更具可讀性，更具結構性，而且看起來像現代代碼，而不是使用這個：

// ES5
function myFunc(name) {
  return 'Hello ' + name;
}
console.log(myFunc('said'));  // Hello said

而使用 ES6 的寫法：

// ES6 Arrow function
const myFunc = name => {
  return `Hi ${name}`;
}
console.log(myFunc('Said')); // Hi Said

// 或者不要 return 關鍵字
const myFunc = name => `Hi ${name}`;

console.log(myFunc('Said'));// Hi Said

如您所見，箭頭功能彷佛更具可讀性和清潔性！您將再也不須要使用舊語法。

此外，您可使用箭頭功能與 map，filter 和 reduce 內置函數。

const myArray = ['tony', 'Sara', 'Said', 5];

// ES5
let Arr1 = myArray.map(function(item) {
  return item;
});
console.log(Arr1);// ["tony", "Sara", "Said", 5]

// ES6
let Arr2 = myArray.map(item => item);
console.log(Arr2);// ["tony", "Sara", "Said", 5]

帶箭頭的 map 函數看起來比 ES5 中的 map 更清晰可讀。使用 ES6，您能夠編寫更短的代碼，你也能夠用相同的方法使用 reduce 和 filter。

模板字符串

模板字符串很是酷，當咱們想在字符串中使用變量時咱們沒必要使用加號（+）運算符來鏈接字符串。

舊語法：

// ES5
function myFunc1(name, age) {
  return 'Hi ' + name + ' Your age is ' + age + ' year old';
}
console.log(myFunc('Said', 22)); // Hi Said, Your age is 22 year old

用 ES6 新語法：

// ES6
const myFunc = (name, age) => {
  return `Hi ${name}, Your age is ${age} year old`;
}
// or
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc1('Said', 22)); // Hi Said, Your age is 22 year old

很簡單！這是舊語法和 ES6 之間的巨大差別。使用字符串時，ES6 中的文字字符串看起來比 ES5 更有條理，結構更好。

默認參數

當您忘記編寫參數時，它不會返回未定義的錯誤，由於該參數已在默認值中定義。所以，當您使用遺漏參數運行函數時，它將採用默認參數的值，而且不會返回錯誤！

看看這個例子：

const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc('Said')); // Hi Said, Your age is undefined year old

上面的函數返回 undefined，由於咱們忘了給它第二個參數 age。

可是若是咱們使用默認參數，當咱們忘記分配參數時,它將使用它的默認值，將不會返回 undefined！

const myFunc = (name, age = 22) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc('Said')); // Hi Said, Your age is 22 year old

如您所見，即便咱們錯過了第二個參數，該函數也會返回一個值。如今使用默認參數咱們能夠提早處理錯誤。

數組和對象解構

解構使得將數組或對象的值分配給新變量更容易。

舊語法：

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let name = contacts.name;
let famillyName = contacts.famillyName;
let myAge = contacts.age;

console.log(name); // said
console.log(famillyName); // Hayani
console.log(myAge); // 22

ES6 新語法：

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let {name, famillyName, age} = contacts;

console.log(name); // said
console.log(famillyName); // Hayani
console.log(age); // 22

使用 ES5，咱們必須爲每一個變量分配每一個值。使用 ES6，咱們只需將咱們的值放在大括號中以獲取對象的任何屬性。

注意：若是指定的變量與屬性名稱不一樣，則返回 undefined。例如，若是屬性的名稱是 name，咱們將其分配給 username變量，它將返回undefined。

咱們老是必須將變量命名爲與屬性名稱相同。可是若是咱們想要重命名變量，咱們可使用冒號：代替。

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let {name:otherName, famillyName, myAge} = contacts;

console.log(otherName);// said

對於數組，咱們使用與對象相同的語法。咱們只需用方括號替換花括號。

const Arr = ['Lionel', 'John', 'Layla', 20];

let [value1, value2, value3] = Arr;
console.log(value1); // Lionel
console.log(value2); // John
console.log(value3); // Layla

Import and export

在 JavaScript 應用程序中使用 import 和 export 使其更強大。它們容許您建立單獨的可重用組件。

若是您熟悉任何 JavaScript MVC 框架，您將看到他們使用 import 和 export 出來在大多數時間處理組件。那麼它們如何真正起做用呢？

很簡單！ export 容許您導出要在另外一個 JavaScript 組件中使用的模塊。咱們使用 import 導入該模塊以在咱們的組件中使用它。

例如，咱們有兩個文件。第一個名爲 detailComponent.js，第二個名爲 homeComponent.js。

在 detailComponent.js 中，咱們將導出 detail 函數。

// ES6 
export default function detail(name, age) {
  return `Hello ${name}, your age is ${age} year old!`;
}

若是咱們想在 homeComponent.js 中使用此函數，咱們將只使用 import

import { detail } from './detailComponent';

console.log(detail('Said', 20)); // Hello Said, your age is 20 year old!

若是咱們要導入多個模塊，咱們只需將它們放在大括號內。

import {detail, userProfile, getPosts} from './detailComponent';
console.log(detail('Said', 20)); 
console.log(userProfile); 
console.log(getPosts));

Promis

Promise 是 ES6 的新功能。這是編寫異步代碼的方法。例如，當咱們想要從 API 獲取數據時，可使用它，或者當咱們有一個須要時間執行的函數時。Promise 使解決問題更容易，因此讓咱們建立咱們的第一個 Promise！

const myPromise = () => {
  return new Promise((resolve, reject) => {
    resolve('Hi the Promise execute successfully');
  })
}
console.log(myPromise()); // Promise {<resolved>: "Hi the Promise execute successfully"}

若是您登陸控制檯，它將返回一個 Promise。所以，若是咱們想在獲取數據後執行一個函數，咱們將使用 Promise。 Promise有兩個參數： resolve 和 reject 來處理預期的錯誤。

注意：fetch函數返回一個Promise自己！

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{
  return fetch(url);
}
getData(url).
then(data=> data.json()).
then(result=> console.log(result));

如今，若是您登陸控制檯，它將返回一個數據數組。

Rest 參數和 Spread 運算符

Rest 參數用於獲取數組的參數，並返回一個新數組。

const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];

// 經過解構獲取值
const [val1, val2, val3, ...rest] = arr;

const Func = (restOfArr) => {
  return restOfArr.filter(item => {return item}).join(" ");
}

console.log(Func(rest)); // Hi Said How are you?

const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];

const Func = (...anArray) => anArray;

console.log(Func(arr)); //  ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?']

spread 運算符與 rest 參數具備相同的語法，可是 spread 運算符采用數組自己而不只僅是參數。咱們可使用 Spread 參數來獲取數組的值，而不是使用 for 循環或任何其餘方法。

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
  return anArray;
}
console.log(Func(arr)); //["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Class

類是面向對象編程（OOP）的核心。它們使您的代碼更安全和封裝。使用類能夠爲代碼提供一個很好的結構並使其保持面向對象。

class myClass {
  constructor() {
  }
}

要建立一個類，請使用 class 關鍵字，後跟帶有兩個大括號的類的名稱。

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user = new myClass('Said', 22);
console.log(user.name); // Said
cosnole.log(user.age); // 22

如今咱們可使用 new 關鍵字訪問類方法和屬性。

class myClass{
    constructor(name,age){
    this.name=name;
    this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//  said

要從其餘類繼承，請使用 extends 關鍵字，後跟要繼承的類的名稱。

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    cosnole.log(`Hi ${this.name} your age is ${this.age} `);
  }
}

// 繼承 myClass 方法和屬性
class UserProfile extends myClass {
  username() {
    console.log(this.name);
  }
}

const profile = new UserProfile('Said', 22);
profile.sayHello();// Hi Said your age is 22;
profile.username();// Said