[譯]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 複製程式碼
原文:ofollow,noindex">medium.freecodecamp.org/write-less-…