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，就把這篇文章發給他！