建站
咨詢
售后
建站咨詢
新聞中心
了解 ES6
根據(jù)維基百科解釋“ECMAScript 規(guī)范是由 Netscape 的 Brendan Eich 開發(fā)的腳本語言的標(biāo)準(zhǔn)化規(guī)范；最初命名為 Mocha，然后是 LiveScript，最后是 JavaScript?！?/p>
ECMAScript 2015 (ES2015) 是第 6 版，最初稱為 ECMAScript 6 (ES6)，它添加了許多新功能，這些新功能后來成為 Web 開發(fā)人員工具包的重要組成部分。本文旨在幫助您以輕松易懂的方式了解這些新的 ES6 特性。
ES6 塊作用域 let
首先，什么是范圍？范圍是指來自我們程序不同部分的變量的可訪問性。在使用 let 聲明變量之前，JavaScript 變量具有全局范圍和函數(shù)范圍（使用 var 聲明時(shí)）。當(dāng)使用 let 聲明變量時(shí)，ES6 為 JavaScript 帶來了塊級范圍。
{
var a = "";
let b = "";
}
console.log(a);
console.log(b);
Uncaught ReferenceError: b is not defined可以看出，我們使用var關(guān)鍵字在block中定義了變量“a”，可以全局訪問。所以var聲明的變量是全局的，但是，我們希望變量在block中生效，退出block時(shí)不可訪問。然后，可以使用 ES6 新的塊級作用域關(guān)鍵字 let 來聲明變量，就像這里的變量 b 一樣，會報(bào)錯(cuò)說 b 沒有定義。
ES6 解構(gòu)數(shù)組
首先，我們定義一個(gè)返回?cái)?shù)組的函數(shù)。然后我們調(diào)用該函數(shù)并將結(jié)果存儲在變量 temp 中。要訪問每個(gè)值，我們必須打印 temp[0]、temp[1]、temp[2]。使用解構(gòu)，我們可以直接調(diào)用早餐函數(shù)并在此處分離出變量 a、b 和 c 中的每個(gè)單獨(dú)的值（第一個(gè)變量將被分配第一個(gè)值，第二個(gè)變量將被分配第二個(gè)值，依此類推）。最后，我們打印三個(gè)變量，看看有沒有問題。
function breakfast() {
return ['', '', ''];
}
var temp = breakfast();
console.log(temp[0], temp[1], temp[2]);let [a, b, c] = breakfast();
console.log(a, b, c);
ES6 解構(gòu)對象
breakfast函數(shù)返回一個(gè)對象。使用解構(gòu)，我們可以直接檢索對象的值并將它們存儲在變量 a、b 和 c 中。鍵值對中的key代表映射的實(shí)際對象的鍵名，value為自定義變量。解構(gòu)完成后會自動(dòng)完成賦值，然后調(diào)用早餐函數(shù)返回對象。然后，打印變量a、b、c，可以看到?jīng)]有問題。
function breakfast() {
return { a: '', b: '', c: '' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);
ES6 模板字符串
在使用模板字符串之前，我們使用 + 運(yùn)算符連接字符串。
取而代之的是，我們現(xiàn)在可以使用 ES6 提供的模板字符串，首先使用 `` 來包裹字符串，當(dāng)要使用變量時(shí)，使用 ${variable}。
let a = '',
b = '?';let c = 'eat watermelon' + a + 'watch TV' + b;
console.log(c);let d = `eat watermelon ${a} watch TV $`;
console.log(d);eat watermelonwatch TV?
eat watermelon watch TV ?
ES6 檢查字符串是否包含其他字符串
使用這些函數(shù)，可以輕松檢查字符串是否以某物開頭，是否以某物結(jié)尾，以及是否包含任何字符串等。
let str = 'hello, my name is Tom ?';
console.log(str.startsWith('hello'));
console.log(str.endsWith('?'));
console.log(str.endsWith('hello'));
console.log(str.includes(" "));true
true
false
true
ES6 默認(rèn)參數(shù)
在 ES6 中，可以使用默認(rèn)參數(shù)。調(diào)用函數(shù)時(shí)，當(dāng)參數(shù)沒有賦值時(shí)，會使用設(shè)置的默認(rèn)參數(shù)執(zhí)行。分配參數(shù)時(shí)，它將使用新分配的值執(zhí)行，覆蓋默認(rèn)值。使用以下內(nèi)容：
function say(str) {
console.log(str);
}
function say1(str = 'hey-hey') {
console.log(str);
}
say();
say1();
say1('?');undefined
hey-hey
?
ES6 擴(kuò)展運(yùn)算符
使用 ... 擴(kuò)展元素以便于操作。按如下方式使用：
let arr = ['?', '', ''];
console.log(arr);
console.log(...arr);
let brr = ['prince', ...arr];
console.log(brr);
console.log(...brr);[ '?', '', '' ]
?
[ 'prince', '?', '', '' ]
prince ?
ES6 展開運(yùn)算符
用于函數(shù)參數(shù)，接收參數(shù)數(shù)組，使用以下內(nèi)容：
function f1(a, b, ...c) {
console.log(a, b, c);
console.log(a, b, ...c);
}
f1('','','?',''); [ '?', '' ]
?
ES6 函數(shù)名
使用 .name 獲取函數(shù)的名稱，如下：
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 箭頭函數(shù)
使用箭頭函數(shù)可以讓代碼更簡潔，但也要注意箭頭函數(shù)的局限性，而且箭頭函數(shù)本身并沒有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 對象表達(dá)式
使用 ES6 對象表達(dá)式，如果對象屬性與值相同，則可以省略值，不寫函數(shù)也可以寫函數(shù)。用法如下：
let a = '';
let b = '?';const obj = {
a: a,
b: b,
say: function () {}
}const es6obj = {
a,
b,
say() {}
}console.log(obj);
console.log(es6obj);{ a: '', b: '?', say: [Function: say] }
{ a: '', b: '?', say: [Function: say] }
ES6 常量
使用 const 關(guān)鍵字定義度量。const 限制為度量分配值的操作，而不是度量中的值。使用以下內(nèi)容：
const app = ['?', ''];
console.log(...app);
app.push('????');
console.log(...app);
app = 10;
可以看出，當(dāng)再次給測量賦值時(shí)，報(bào)錯(cuò)。
?
? ????
app = 10;
^
TypeError: Assignment to constant variable.
ES6 對象屬性名
使用點(diǎn)定義對象屬性時(shí)，如果屬性名稱中包含空格字符，則為非法，語法不能通過。使用【屬性名】就可以完美解決，不僅可以直接寫屬性名，還可以使用變量來指定，具體使用如下：
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 檢查兩個(gè)值是否相等
使用 === 或 == 比較某些特殊值的結(jié)果可能無法滿足您的需求。可以用Object.is（第一個(gè)值，第二個(gè)值）來判斷，說不定你會開心 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 復(fù)制對象
使用 Object.assign() 將一個(gè)對象復(fù)制到另一個(gè)對象，如下所示：
let obj = {};
Object.assign(
// source
obj,
// Copy target object
{ a: '?' }
);
console.log(obj);{ a: '?' }
ES6 設(shè)置對象的原型
使用 es6，可以如下設(shè)置對象的原型：
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 生成迭代器
學(xué)習(xí)之前，先寫一個(gè)迭代器
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 = ['?', '????', ''];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: '', done: false }
{ value: undefined, done: true }OK，看看簡化的生成器
function* die(arr) {
for (let i = 0; i < arr.length; i++) {
yield arr[i];
}
}
let test = die(['','?']);
console.log(test.next());
console.log(test.next());
console.log(test.next());{ value: '', done: false }
{ value: '?', done: false }
{ value: undefined, done: true }
ES6 類
使用 es6 可以快速輕松地構(gòu)建類
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 設(shè)置
定義獲取或修改類屬性的 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 靜態(tài)
使用 static 關(guān)鍵字修改的方法可以直接使用，無需實(shí)例化對象
class stu {
static say(str) {
console.log(str);
}
}
stu.say("This is a static method");This is a static method
ES6 擴(kuò)展
使用繼承，可以減少代碼冗余，例如：
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 集合，與數(shù)組不同，Set 集合中不允許有重復(fù)元素:
// Create Set collection
let food = new Set('????');
// Repeatedly add, only one can enter
food.add('');
food.add('');console.log(food);
// current collection size
console.log(food.size);
// Check if an element exists in a collection
console.log(food.has(''));
// 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) { '', '????', '' }
3
true
Set(2) { '', '' }
Set(0) {}
ES6 Map
Map組合存儲鍵值對:
let food = new Map();
let a = {}, b = function () { }, c = "name";food.set(a, '');
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) { {} => '', [Function: b] => '????', 'name' => 'rice' }
3
Map(2) { {} => '', [Function: b] => '????' }
true
[object Object] +
function () { } + ????
Map(0) {}
ES6 模塊化
使用模塊化開發(fā)，ES6可以很方便的導(dǎo)入導(dǎo)出一些內(nèi)容，以及默認(rèn)導(dǎo)出等細(xì)節(jié)：
let a = '';
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');
總結(jié)
以上就是我今天跟你分享的關(guān)于ES6的一些內(nèi)容，希望你能從中學(xué)到新的內(nèi)容，如果你覺得有用的話，請記得點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
最后，感謝你認(rèn)真閱讀完這篇文章，如果覺得文章非常不錯(cuò)，歡迎下次再來。
網(wǎng)站標(biāo)題：20分鐘快速學(xué)習(xí)了解下ES6
轉(zhuǎn)載來于：http://m.fisionsoft.com.cn/article/cdhopji.html
