ES6新增的特性有哪些及怎么用

這篇文章主要講解了“ES6新增的特性有哪些及怎么用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“ES6新增的特性有哪些及怎么用”吧！

理解ES6

ECMAScript ，是由網(wǎng)景公司制定的一種腳本語(yǔ)言的標(biāo)準(zhǔn)化規(guī)范；最初命名為 Mocha ，后來(lái)改名為 LiveScript ，最后重命名為 JavaScript
ECMAScript 2015（ES2015），第 6 版，最早被稱作 ECMAScript 6（ES6），添加了新的特性。

ES6 塊級(jí)作用域 let

首先，什么是作用域？作用域簡(jiǎn)單講就是聲明一個(gè)變量，這個(gè)變量的有效范圍，在 let 沒來(lái)之前。js 只有 var 的全局作用域和 函數(shù)作用域 ，ES6 為 js 帶來(lái)了塊級(jí)作用域。【相關(guān)推薦：javascript學(xué)習(xí)教程】

{
    var a = "?";
    let b = "?";
}
console.log(a);
console.log(b);

?
Uncaught ReferenceError: b is not defined

可以看到，我們使用 var 關(guān)鍵字在塊中定義了變量 a，其實(shí)全局可以訪問(wèn)到，所以說(shuō)，var聲明的變量是全局的，但我們想讓變量就在塊中生效，出了塊就訪問(wèn)不了了，這時(shí)就可以使用 ES6 新增的塊級(jí)作用域關(guān)鍵字 let 來(lái)聲明這個(gè)變量 a，當(dāng)我再次訪問(wèn)，報(bào)錯(cuò)了，說(shuō) a is not defined ，a 沒有定義

ES6 解構(gòu)數(shù)組

如下所示，首先定義了一個(gè)函數(shù)，返回一個(gè)數(shù)組，在未使用解構(gòu)數(shù)組前，調(diào)用數(shù)組并把返回值賦值給 temp ，然后打印 temp 數(shù)組，使用了解構(gòu)數(shù)組后，直接定義一個(gè)數(shù)組變量，然后將函數(shù)返回值指向該變量，他會(huì)自動(dòng)把第一項(xiàng)的值賦值給第一個(gè)數(shù)組變量，第二項(xiàng)賦值給第二個(gè)數(shù)組變量，以此類推，最后打印三個(gè)變量，看到?jīng)]有問(wèn)題

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)對(duì)象

首先 breakfast 函數(shù)返回一個(gè)對(duì)象，使用解構(gòu)對(duì)象，定義對(duì)象，鍵值對(duì)中鍵表示映射的實(shí)際對(duì)象的鍵名，值就是自定義變量，解構(gòu)完成，會(huì)自動(dòng)完成賦值，然后調(diào)用 breakfast 函數(shù)，返回對(duì)象，隨后打印變量 a，b，c ，可以看到?jīng)]問(wèn)題

function breakfast() {
    return { a: '?', b: '?', c: '?' }
}
let { a: a, b: b, c: c } = breakfast();
console.log(a, b, c);

? ? ?

ES6 模板字符串

在使用模板字符串前，我們拼接字符串變量使用 +

使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起來(lái)，當(dāng)要使用變量時(shí) ，使用 ${變量}

let a = '?',
    b = '??';

let c = '今天吃' + a + '吃完看' + b;
console.log(c);

let d = `今天吃 ${a} 吃完看 $`;
console.log(d);

今天吃?吃完看??
今天吃 ? 吃完看 ??

ES6 判斷字符串里是否包含其他字符串

使用這些函數(shù)，可以輕松的完成是不是以什么開頭的字符串，是不是以什么結(jié)尾的字符串，是不是包含了什么字符串等的操作

let str = '你好，我是小周 ??';
console.log(str.startsWith('你好'));
console.log(str.endsWith('??'));
console.log(str.endsWith('你好'));
console.log(str.includes(" "));

true
true
false
true

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

ES6里，可以使用默認(rèn)參數(shù)，當(dāng)調(diào)用函數(shù)時(shí)，沒有給參數(shù)進(jìn)行賦值時(shí)，就使用設(shè)置的默認(rèn)參數(shù)執(zhí)行，當(dāng)給參數(shù)賦值時(shí)，就會(huì)使用新賦的值執(zhí)行，覆蓋默認(rèn)值，使用如下：

function say(str) {
    console.log(str);
}
function say1(str = '嘿嘿') {
    console.log(str);
}
say();
say1();
say1('??');

undefined
嘿嘿
??

ES6 展開操作符

使用 ... 可以展開元素，方便操作，使用如下：

let arr = ['??', '?', '?'];
console.log(arr);
console.log(...arr);
let brr = ['王子', ...arr];
console.log(brr);
console.log(...brr);

[ '??', '?', '?' ]
?? ? ?
[ '王子', '??', '?', '?' ]
王子 ?? ? ?

ES6 剩余操作符

... 操作符用在函數(shù)參數(shù)上，接收一個(gè)參數(shù)數(shù)組，使用如下：

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ù)可以讓代碼更簡(jiǎn)潔，但是也要注意箭頭函數(shù)的局限性，以及箭頭函數(shù)中自身沒有 this，this指向父級(jí)

let f1 = a => a;

let f2 = (a, b) => {
    return a + b;
}

console.log(f1(10));
console.log(f2(10, 10));

10
20

ES6 對(duì)象表達(dá)式

使用es6的對(duì)象表達(dá)式，如果對(duì)象屬性和值一樣，可以省略值，函數(shù)寫法可以省去function，用法如下：

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 限制的是給衡量分配值的動(dòng)作，并不限制衡量中的值，使用如下：

const app = ['??', '?'];
console.log(...app);
app.push('?');
console.log(...app);
app = 10;

可以看到當(dāng)再次給衡量分配值就報(bào)錯(cuò)了

?? ?
?? ? ?
app = 10;
    ^
TypeError: Assignment to constant variable.

ES6 對(duì)象屬性名

使用點(diǎn)定義對(duì)象屬性時(shí)，如果屬性名中含有空格字符，是不合法的，語(yǔ)法通不過(guò)的，使用 [屬性名] 可以完美解決，并且不僅可以直接寫明屬性名，還可以使用變量來(lái)指定，具體使用如下：

let obj = {};
let a = 'little name';
obj.name = '王子';
// 使用點(diǎn)定義屬性中間有空格是不合法的
// obj.little name = '小王子';
obj[a] = '小王子';
console.log(obj);

{ name: '王子', 'little name': '小王子' }

ES6 判斷兩個(gè)值是否相等

一些特殊值使用 === 或 == 進(jìn)行比較的結(jié)果，可能不滿足你的需求，這是你可以使用Object.is(第一個(gè)值，第二個(gè)值) 來(lái)進(jìn)行判斷，可能你就開心的笑了

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ù)制對(duì)象

使用 Object.assign() 可以把一個(gè)對(duì)象復(fù)制到另一個(gè)對(duì)象，使用如下：

let obj = {};
Object.assign(
    // 源
    obj,
    // 復(fù)制目標(biāo)對(duì)象
    { a: '??' }
);
console.log(obj);

{ a: '??' }

ES6 設(shè)置對(duì)象的 prototype

使用es6可以設(shè)置對(duì)象的 prototype，使用如下：

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 proto

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 super

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，看看簡(jiǎn)化的生成器

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 + '說(shuō)奧里給';
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());

小明說(shuō)奧里給

ES6 get set

定義get/set方法，用于獲取或者修改類的屬性

class stu {
    constructor(name) {
        this.name = name;
    }
    get() {
        return this.name;
    }
    set(newStr) {
        this.name = newStr;
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());

小明
大明

ES6 static

使用static關(guān)鍵字修飾的方法，不用實(shí)例化對(duì)象也可以直接使用

class stu {
    static say(str) {
        console.log(str);
    }
}
stu.say("奧里給 靜態(tài)方法");

奧里給 靜態(tài)方法

ES6 extends

使用繼承，可以減少代碼冗余，比如：

class Person {
    constructor(name, bir) {
        this.name = name;
        this.bir = bir;
    }
    showInfo() {
        return '姓名：' + this.name + '生日：' + this.bir;
    }
}
class A extends Person {
    constructor(name, bir) {
        super(name, bir);
    }
}
let zhouql = new A("周棋洛", "2002-06-01");
// 周棋洛本身是沒有showInfo方法的，是繼承自Person的
console.log(zhouql.showInfo());

姓名：周棋洛生日：2002-06-01

ES6 Set

Set 集合，與數(shù)組不同，Set 集合中不允許有重復(fù)元素

// 創(chuàng)建Set集合
let food = new Set('??');
// 重復(fù)添加，只有一個(gè)能進(jìn)去
food.add('?');
food.add('?');

console.log(food);
// 當(dāng)前集合大小
console.log(food.size);
// 判斷集合中是否存在某一元素
console.log(food.has('?'));
// 刪除集合中某一元素
food.delete('?');
console.log(food);
// 循環(huán)遍歷集合
food.forEach(f => {
    console.log(f);
});
// 清空集合
food.clear();
console.log(food);

Set(3) { '?', '?', '?' }
3
true
Set(2) { '?', '?' }
?
?
Set(0) {}

ES6 Map

Map結(jié)合存儲(chǔ)鍵值對(duì)

let food = new Map();
let a = {}, b = function () { }, c = "name";

food.set(a, '?');
food.set(b, '?');
food.set(b, '?');
food.set(c, '米飯');

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' => '米飯' }
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 = '你丫的寫參數(shù)') {
    console.log(str);
}
export { a, f1 };

import {a, f1} from './27模塊測(cè)試.js';
console.log(a);
f1();
f1('知道了');

感謝各位的閱讀，以上就是“ES6新增的特性有哪些及怎么用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)ES6新增的特性有哪些及怎么用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！