20分鐘快速學習瞭解下ES6
瞭解 ES6
根據維基百科解釋“ECMAScript 規範是由 Netscape 的 Brendan Eich 開發的指令碼語言的標準化規範;最初命名為 Mocha,然後是 LiveScript,最後是 JavaScript。”
ECMAScript 2015 (ES2015) 是第 6 版,最初稱為 ECMAScript 6 (ES6),它添加了許多新功能,這些新功能後來成為 Web 開發人員工具包的重要組成部分。本文旨在幫助您以輕鬆易懂的方式瞭解這些新的 ES6 特性。
ES6 塊作用域 let
首先,什麼是範圍?範圍是指來自我們程式不同部分的變數的可訪問性。在使用 let 宣告變數之前,JavaScript 變數具有全域性範圍和函式範圍(使用 var 宣告時)。當使用 let 宣告變數時,ES6 為 JavaScript 帶來了塊級範圍。
{ var a = ":watermelon:"; let b = ":golf:"; } console.log(a); console.log(b);:watermelon: Uncaught ReferenceError: b is not defined
可以看出,我們使用var關鍵字在block中定義了變數“a”,可以全域性訪問。所以var宣告的變數是全域性的,但是,我們希望變數在block中生效,退出block時不可訪問。然後,可以使用 ES6 新的塊級作用域關鍵字 let 來宣告變數,就像這裡的變數 b 一樣,會報錯說 b 沒有定義。
ES6 解構陣列
首先,我們定義一個返回陣列的函式。然後我們呼叫該函式並將結果儲存在變數 temp 中。要訪問每個值,我們必須列印 temp[0]、temp[1]、temp[2]。使用解構,我們可以直接呼叫早餐函式並在此處分離出變數 a、b 和 c 中的每個單獨的值(第一個變數將被分配第一個值,第二個變數將被分配第二個值,依此類推)。最後,我們列印三個變數,看看有沒有問題。
function breakfast() { return [':watermelon:', ':hamburger:', ':pizza:']; } var temp = breakfast(); console.log(temp[0], temp[1], temp[2]);let [a, b, c] = breakfast(); console.log(a, b, c);:watermelon: :hamburger: :pizza: :watermelon: :hamburger: :pizza:
ES6 解構物件
breakfast函式返回一個物件。使用解構,我們可以直接檢索物件的值並將它們儲存在變數 a、b 和 c 中。鍵值對中的key代表對映的實際物件的鍵名,value為自定義變數。解構完成後會自動完成賦值,然後呼叫早餐函式返回物件。然後,列印變數a、b、c,可以看到沒有問題。
function breakfast() { return { a: ':watermelon:', b: ':pizza:', c: ':hamburger:' } } let { a: a, b: b, c: c } = breakfast(); console.log(a, b, c);:watermelon: :pizza: :hamburger:
ES6 模板字串
在使用模板字串之前,我們使用 + 運算子連線字串。
取而代之的是,我們現在可以使用 ES6 提供的模板字串,首先使用 `` 來包裹字串,當要使用變數時,使用 ${variable}。
let a = ':watermelon:', b = ' ️';let c = 'eat watermelon' + a + 'watch TV' + b; console.log(c);let d = `eat watermelon ${a} watch TV ${b}`; console.log(d);eat watermelon:watermelon:watch TV ️ eat watermelon :watermelon: watch TV ️
ES6 檢查字串是否包含其他字串
使用這些函式,可以輕鬆檢查字串是否以某物開頭,是否以某物結尾,以及是否包含任何字串等。
let str = 'hello, my name is Tom :heart:'; console.log(str.startsWith('hello')); console.log(str.endsWith(':heart:')); console.log(str.endsWith('hello')); console.log(str.includes(" "));true true false true
ES6 預設引數
在 ES6 中,可以使用預設引數。呼叫函式時,當引數沒有賦值時,會使用設定的預設引數執行。分配引數時,它將使用新分配的值執行,覆蓋預設值。使用以下內容:
function say(str) { console.log(str); } function say1(str = 'hey-hey') { console.log(str); } say(); say1(); say1(':heart:');undefined hey-hey :heart:
ES6 擴充套件運算子
使用 ... 擴充套件元素以便於操作。按如下方式使用:
let arr = [':heart:', ':blush:', ':heart_eyes:']; console.log(arr); console.log(...arr); let brr = ['prince', ...arr]; console.log(brr); console.log(...brr);[ ':heart:', ':blush:', ':heart_eyes:' ] :heart: :blush: :heart_eyes: [ 'prince', ':heart:', ':blush:', ':heart_eyes:' ] prince :heart: :blush: :heart_eyes:
ES6 展開運算子
用於函式引數,接收引數陣列,使用以下內容:
function f1(a, b, ...c) { console.log(a, b, c); console.log(a, b, ...c); } f1(':apple:',':rainbow:','☃️',':blush:');:apple: :rainbow: [ '☃️', ':blush:' ] :apple: :rainbow: ☃️ :blush:
ES6 函式名
使用 .name 獲取函式的名稱,如下:
function f1() { } console.log(f1.name); let f2 = function () { }; console.log(f2.name); let f3 = function f4() { }; console.log(f3.name);f1 f2 f4
ES6 箭頭函式
使用箭頭函式可以讓程式碼更簡潔,但也要注意箭頭函式的侷限性,而且箭頭函式本身並沒有this,this指向父級。
let f1 = a => a;let f2 = (a, b) => { return a + b; }console.log(f1(10)); console.log(f2(10, 10));10 20
ES6 物件表示式
使用 ES6 物件表示式,如果物件屬性與值相同,則可以省略值,不寫函式也可以寫函式。用法如下:
let a = ':rainbow:'; let b = '☃️';const obj = { a: a, b: b, say: function () {} }const es6obj = { a, b, say() {} }console.log(obj); console.log(es6obj);{ a: ':rainbow:', b: '☃️', say: [Function: say] } { a: ':rainbow:', b: '☃️', say: [Function: say] }
ES6 常量
使用 const 關鍵字定義度量。const 限制為度量分配值的操作,而不是度量中的值。使用以下內容:
const app = ['☃️', ':rainbow:']; console.log(...app); app.push(' '); console.log(...app); app = 10; 可以看出,當再次給測量賦值時,報錯。 ☃️ :rainbow: ☃️ :rainbow: app = 10; ^ TypeError: Assignment to constant variable.
ES6 物件屬性名
使用點定義物件屬性時,如果屬性名稱中包含空格字元,則為非法,語法不能通過。使用【屬性名】就可以完美解決,不僅可以直接寫屬性名,還可以使用變數來指定,具體使用如下:
let obj = {}; let a = 'little name'; obj.name = 'prince'; // It is illegal to use dots to define properties with spaces between them // obj.little name = 'little Prince'; obj[a] = 'little Prince'; console.log(obj);{ name: 'prince', 'little name': 'little Prince' }
ES6 檢查兩個值是否相等
使用 === 或 == 比較某些特殊值的結果可能無法滿足您的需求。可以用Object.is(第一個值,第二個值)來判斷,說不定你會開心 Laughed
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));false true true false
ES6 複製物件
使用 Object.assign() 將一個物件複製到另一個物件,如下所示:
let obj = {}; Object.assign( // source obj, // Copy target object { a: '☃️' } ); console.log(obj);{ a: '☃️' }
ES6 設定物件的原型
使用 es6,可以如下設定物件的原型:
let obj1 = { get() { return 1; } } let obj2 = { a: 10, get() { return 2; } } let test = Object.create(obj1); console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj1); Object.setPrototypeOf(test, obj2); console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj2);1 true 2 true
ES6 原型
使用方法如下。
let obj1 = { get() { return 1; } } let obj2 = { a: 10, get() { return 2; } } let test = { __proto__: obj1 } console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj1); test.__proto__ = obj2; console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj2);1 true 2 true
ES6 超級
let obj1 = { get() { return 1; } } let test = { __proto__: obj1, get() { return super.get() + ' ☃️'; } } console.log(test.get());1 ☃️
ES6 生成迭代器
學習之前,先寫一個迭代器
function die(arr) { let i = 0;return { next() { let done = (i >= arr.length); let value = !done ? arr[i++] : undefined;return { value: value, done: done } } } } let arr = ['☃️', ' ', ':rainbow:'];let dieArr = die(arr); console.log(dieArr.next()); console.log(dieArr.next()); console.log(dieArr.next()); console.log(dieArr.next());{ value: '☃️', done: false } { value: ' ', done: false } { value: ':rainbow:', done: false } { value: undefined, done: true }
OK,看看簡化的生成器
function* die(arr) { for (let i = 0; i < arr.length; i++) { yield arr[i]; } } let test = die([':rainbow:','☃️']); console.log(test.next()); console.log(test.next()); console.log(test.next());{ value: ':rainbow:', done: false } { value: '☃️', done: false } { value: undefined, done: true }
使用 es6 可以快速輕鬆地構建類
class stu { constructor(name) { this.name = name; } say() { return this.name + 'say hello'; } } let xiaoming = new stu("Tom"); console.log(xiaoming.say());Tom say hello
ES6 設定
定義獲取或修改類屬性的 get/set 方法
class stu { constructor(name) { this.name = name; } get() { return this.name; } set(newStr) { this.name = newStr; } } let xiaoming = new stu("Tom"); console.log(xiaoming.get()); xiaoming.set("John") console.log(xiaoming.get());Tom John
ES6 靜態
使用 static 關鍵字修改的方法可以直接使用,無需例項化物件
class stu { static say(str) { console.log(str); } } stu.say("This is a static method");This is a static method
ES6 擴充套件
使用繼承,可以減少程式碼冗餘,例如:
class Person { constructor(name, bir) { this.name = name; this.bir = bir; } showInfo() { return 'name:' + this.name + 'Birthday:' + this.bir; } } class A extends Person { constructor(name, bir) { super(name, bir); } } let zhouql = new A("Tom", "2002-08-24"); // Tom itself does not have a showInfo method, it is inherited from Person console.log(zhouql.showInfo());Name: Tom Birthday: 2002-08-24
ES6 套裝
Set 集合,與陣列不同,Set 集合中不允許有重複元素:
// Create Set collection let food = new Set(':apple: '); // Repeatedly add, only one can enter food.add(':watermelon:'); food.add(':watermelon:');console.log(food); // current collection size console.log(food.size); // Check if an element exists in a collection console.log(food.has(':watermelon:')); // remove an element from a collection food.delete(' '); console.log(food); // loop through the collection food.forEach(f => { console.log(f); }); // empty collection food.clear(); console.log(food);Set(3) { ':apple:', ' ', ':watermelon:' } 3 true Set(2) { ':apple:', ':watermelon:' } :apple: :watermelon: Set(0) {}
ES6 Map
Map組合儲存鍵值對:
let food = new Map(); let a = {}, b = function () { }, c = "name";food.set(a, ':watermelon:'); food.set(b, ' '); food.set(b, ' '); food.set(c, 'rice');console.log(food); console.log(food.size); console.log(food.get(a)); food.delete(c); console.log(food); console.log(food.has(a));food.forEach((v, k) => { console.log(`${k} + ${v}`); }); food.clear(); console.log(food);Map(3) { {} => ':watermelon:', [Function: b] => ' ', 'name' => 'rice' } 3 :watermelon: Map(2) { {} => ':watermelon:', [Function: b] => ' ' } true [object Object] + :watermelon: function () { } + Map(0) {}
ES6 模組化
使用模組化開發,ES6可以很方便的匯入匯出一些內容,以及預設匯出等細節:
let a = ':watermelon:'; let f1 = function (str = 'you write parameters') { console.log(str); } export { a, f1 };import {a, f1} from './27 module test.js'; console.log(a); f1(); f1('understood');
以上就是我今天跟你分享的關於ES6的一些內容,希望你能從中學到新的內容,如果你覺得有用的話,請記得點讚我,關注我,並將它分享給你身邊做開發的朋友,也許能夠幫助到他。
最後,感謝你認真閱讀完這篇文章,如果覺得文章非常不錯,歡迎下次再來。
- Spring中實現非同步呼叫的方式有哪些?
- 帶引數的全型別 Python 裝飾器
- 整理了幾個Python正則表示式,拿走就能用!
- SOLID:開閉原則Go程式碼實戰
- React中如何引入CSS呢
- 一個新視角:前端框架們都卷錯方向了?
- 編碼中的Adapter,不僅是一種設計模式,更是一種架構理念與解決方案
- 手寫程式語言-遞迴函式是如何實現的?
- 一文搞懂模糊匹配:定義、過程與技術
- 新來個阿里 P7,僅花 2 小時,做出一個多執行緒永動任務,看完直接跪了
- Puzzlescript,一種開發H5益智遊戲的引擎
- @Autowired和@Resource到底什麼區別,你明白了嗎?
- CSS transition 小技巧!如何保留 hover 的狀態?
- React如此受歡迎離不開這4個主要原則
- LeCun再炮轟Marcus: 他是心理學家,不是搞AI的
- Java保證執行緒安全的方式有哪些?
- 19個殺手級 JavaScript 單行程式碼,讓你看起來像專業人士
- Python 的"self"引數是什麼?
- 別整一坨 CSS 程式碼了,試試這幾個實用函式
- 再有人問你什麼是MVCC,就把這篇文章發給他!