JavaScript ES6? 讓我們寫得少，做得多

Tychio 發(fā)布于2019-08-23 12:11 / 1540人閱讀

JavaScript ES6 帶來了新的語法和新的強(qiáng)大功能，使您的代碼更現(xiàn)代，更易讀。它允許您編寫更少的代碼并執(zhí)行更多操作。 ES6 向我們介紹了許多強(qiáng)大的功能，如箭頭函數(shù)，模板字符串，對象結(jié)構(gòu)，模塊等，讓我們來看看。

const and let

const 是 ES6 中用于聲明變量的新關(guān)鍵字。 const 比 var 更強(qiáng)大。使用后，無法重新分配變量。換句話說，它是一個(gè)不可變的變量，除非它與對象一起使用。

這對于定位選擇器非常有用。例如，當(dāng)我們有一個(gè)觸發(fā)事件的按鈕時(shí)，或者當(dāng)您想在 JavaScript 中選擇 HTML 元素時(shí)，請使用 const 而不是 var。這是因?yàn)?var 會(huì)被提升，當(dāng)不想重新分配變量時(shí)，最好使用 const。

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

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

在上面的代碼中，const 不會(huì)更改，也不能重新分配。如果您嘗試為其賦予新值，則會(huì)返回錯(cuò)誤。

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

console.log(name); // Rick

let 可以重新分配并獲得新的價(jià)值。它創(chuàng)建了一個(gè)可變變量。

let 與 const 相同，因?yàn)閮烧叨际菈K級作用域，這意味著該變量僅在其塊級范圍內(nèi)可用。

箭頭函數(shù)

箭頭函數(shù)非常棒，使您的代碼更具可讀性，更具結(jié)構(gòu)性，并且看起來像現(xiàn)代代碼，而不是使用這個(gè)：

// 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 關(guān)鍵字
const myFunc = name => `Hi ${name}`;

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

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

此外，您可以使用箭頭功能與 map，filter 和 reduce 內(nèi)置函數(shù)。

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 函數(shù)看起來比 ES5 中的 map 更清晰可讀。使用 ES6，您可以編寫更短的代碼，你也可以用相同的方法使用 reduce 和 filter。

模板字符串

模板字符串非常酷，當(dāng)我們想在字符串中使用變量時(shí)我們不必使用加號（+）運(yùn)算符來連接字符串。

舊語法：

// 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 之間的巨大差異。使用字符串時(shí)，ES6 中的文字字符串看起來比 ES5 更有條理，結(jié)構(gòu)更好。

默認(rèn)參數(shù)

當(dāng)您忘記編寫參數(shù)時(shí)，它不會(huì)返回未定義的錯(cuò)誤，因?yàn)樵搮?shù)已在默認(rèn)值中定義。因此，當(dāng)您使用遺漏參數(shù)運(yùn)行函數(shù)時(shí)，它將采用默認(rèn)參數(shù)的值，并且不會(huì)返回錯(cuò)誤！

看看這個(gè)例子：

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

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

上面的函數(shù)返回 undefined，因?yàn)槲覀兺私o它第二個(gè)參數(shù) age。

但是如果我們使用默認(rèn)參數(shù)，當(dāng)我們忘記分配參數(shù)時(shí),它將使用它的默認(rèn)值，將不會(huì)返回 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

如您所見，即使我們錯(cuò)過了第二個(gè)參數(shù)，該函數(shù)也會(huì)返回一個(gè)值。現(xiàn)在使用默認(rèn)參數(shù)我們可以提前處理錯(cuò)誤。

數(shù)組和對象解構(gòu)

解構(gòu)使得將數(shù)組或?qū)ο蟮闹捣峙浣o新變量更容易。

舊語法：

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，我們必須為每個(gè)變量分配每個(gè)值。使用 ES6，我們只需將我們的值放在大括號中以獲取對象的任何屬性。

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

我們總是必須將變量命名為與屬性名稱相同。但是如果我們想要重命名變量，我們可以使用冒號：代替。

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

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

console.log(otherName);// said

對于數(shù)組，我們使用與對象相同的語法。我們只需用方括號替換花括號。

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 應(yīng)用程序中使用 import 和 export 使其更強(qiáng)大。它們允許您創(chuàng)建多帶帶的可重用組件。

如果您熟悉任何 JavaScript MVC 框架，您將看到他們使用 import 和 export 出來在大多數(shù)時(shí)間處理組件。那么它們?nèi)绾握嬲鹱饔媚兀?/p>

很簡單！ export 允許您導(dǎo)出要在另一個(gè) JavaScript 組件中使用的模塊。我們使用 import 導(dǎo)入該模塊以在我們的組件中使用它。

例如，我們有兩個(gè)文件。第一個(gè)名為 detailComponent.js，第二個(gè)名為 homeComponent.js。

在 detailComponent.js 中，我們將導(dǎo)出 detail 函數(shù)。

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

如果我們想在 homeComponent.js 中使用此函數(shù)，我們將只使用 import

import { detail } from "./detailComponent";

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

如果我們要導(dǎo)入多個(gè)模塊，我們只需將它們放在大括號內(nèi)。

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

Promis

Promise 是 ES6 的新功能。這是編寫異步代碼的方法。例如，當(dāng)我們想要從 API 獲取數(shù)據(jù)時(shí)，可以使用它，或者當(dāng)我們有一個(gè)需要時(shí)間執(zhí)行的函數(shù)時(shí)。Promise 使解決問題更容易，所以讓我們創(chuàng)建我們的第一個(gè) Promise！

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

如果您登錄控制臺(tái)，它將返回一個(gè) Promise。因此，如果我們想在獲取數(shù)據(jù)后執(zhí)行一個(gè)函數(shù)，我們將使用 Promise。 Promise有兩個(gè)參數(shù)： resolve 和 reject 來處理預(yù)期的錯(cuò)誤。

注意：fetch函數(shù)返回一個(gè)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));

現(xiàn)在，如果您登錄控制臺(tái)，它將返回一個(gè)數(shù)據(jù)數(shù)組。

Rest 參數(shù)和 Spread 運(yùn)算符

Rest 參數(shù)用于獲取數(shù)組的參數(shù)，并返回一個(gè)新數(shù)組。

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

// 通過解構(gòu)獲取值
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 運(yùn)算符與 rest 參數(shù)具有相同的語法，但是 spread 運(yùn)算符采用數(shù)組本身而不僅僅是參數(shù)。我們可以使用 Spread 參數(shù)來獲取數(shù)組的值，而不是使用 for 循環(huán)或任何其他方法。

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

類是面向?qū)ο缶幊蹋∣OP）的核心。它們使您的代碼更安全和封裝。使用類可以為代碼提供一個(gè)很好的結(jié)構(gòu)并使其保持面向?qū)ο蟆?/p>

class myClass {
  constructor() {
  }
}

要?jiǎng)?chuàng)建一個(gè)類，請使用 class 關(guān)鍵字，后跟帶有兩個(gè)大括號的類的名稱。

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

現(xiàn)在我們可以使用 new 關(guān)鍵字訪問類方法和屬性。

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

要從其他類繼承，請使用 extends 關(guān)鍵字，后跟要繼承的類的名稱。

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