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

這篇文章主要講解了“ES6新增的特性有哪些及怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“ES6新增的特性有哪些及怎么用”吧！

理解ES6

ECMAScript ，是由網景公司制定的一種腳本語言的標準化規范；最初命名為 Mocha ，后來改名為 LiveScript ，最后重命名為 JavaScript
ECMAScript 2015（ES2015），第 6 版，最早被稱作 ECMAScript 6（ES6），添加了新的特性。

ES6 塊級作用域 let

首先，什么是作用域？作用域簡單講就是聲明一個變量，這個變量的有效范圍，在 let 沒來之前。js 只有 var 的全局作用域和 函數作用域 ，ES6 為 js 帶來了塊級作用域。【相關推薦：javascript學習教程】

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

?
Uncaught ReferenceError: b is not defined

可以看到，我們使用 var 關鍵字在塊中定義了變量 a，其實全局可以訪問到，所以說，var聲明的變量是全局的，但我們想讓變量就在塊中生效，出了塊就訪問不了了，這時就可以使用 ES6 新增的塊級作用域關鍵字 let 來聲明這個變量 a，當我再次訪問，報錯了，說 a is not defined ，a 沒有定義

ES6 解構數組

如下所示，首先定義了一個函數，返回一個數組，在未使用解構數組前，調用數組并把返回值賦值給 temp ，然后打印 temp 數組，使用了解構數組后，直接定義一個數組變量，然后將函數返回值指向該變量，他會自動把第一項的值賦值給第一個數組變量，第二項賦值給第二個數組變量，以此類推，最后打印三個變量，看到沒有問題

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 解構對象

首先 breakfast 函數返回一個對象，使用解構對象，定義對象，鍵值對中鍵表示映射的實際對象的鍵名，值就是自定義變量，解構完成，會自動完成賦值，然后調用 breakfast 函數，返回對象，隨后打印變量 a，b，c ，可以看到沒問題

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

? ? ?

ES6 模板字符串

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

使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起來，當要使用變量時 ，使用 ${變量}

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

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

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

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

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

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

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

true
true
false
true

ES6 默認參數

ES6里，可以使用默認參數，當調用函數時，沒有給參數進行賦值時，就使用設置的默認參數執行，當給參數賦值時，就會使用新賦的值執行，覆蓋默認值，使用如下：

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 剩余操作符

... 操作符用在函數參數上，接收一個參數數組，使用如下：

function f1(a, b, ...c) {
    console.log(a, b, c);
    console.log(a, b, ...c);
}
f1('?','?','??','秘?');

? ? [ '??', '秘?' ]
? ? ?? 秘?

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的對象表達式，如果對象屬性和值一樣，可以省略值，函數寫法可以省去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 關鍵字定義衡量，const 限制的是給衡量分配值的動作，并不限制衡量中的值，使用如下：

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

可以看到當再次給衡量分配值就報錯了

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

ES6 對象屬性名

使用點定義對象屬性時，如果屬性名中含有空格字符，是不合法的，語法通不過的，使用 [屬性名] 可以完美解決，并且不僅可以直接寫明屬性名，還可以使用變量來指定，具體使用如下：

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

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

ES6 判斷兩個值是否相等

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

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(
    // 源
    obj,
    // 復制目標對象
    { a: '??' }
);
console.log(obj);

{ a: '??' }

ES6 設置對象的 prototype

使用es6可以設置對象的 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 生成迭代器

在學習前，先首寫一個迭代器

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可以快速方便的構建類，好耶

class stu {
    constructor(name) {
        this.name = name;
    }
    say() {
        return this.name + '說奧里給';
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());

小明說奧里給

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關鍵字修飾的方法，不用實例化對象也可以直接使用

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

奧里給 靜態方法

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 集合，與數組不同，Set 集合中不允許有重復元素

// 創建Set集合
let food = new Set('??');
// 重復添加，只有一個能進去
food.add('?');
food.add('?');

console.log(food);
// 當前集合大小
console.log(food.size);
// 判斷集合中是否存在某一元素
console.log(food.has('?'));
// 刪除集合中某一元素
food.delete('?');
console.log(food);
// 循環遍歷集合
food.forEach(f => {
    console.log(f);
});
// 清空集合
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, '米飯');

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 模塊化

使用模塊化開發，es6可以方便的導入和導出一些內容，還有默認導出等等細節

let a = '?';
let f1 = function (str = '你丫的寫參數') {
    console.log(str);
}
export { a, f1 };

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

感謝各位的閱讀，以上就是“ES6新增的特性有哪些及怎么用”的內容了，經過本文的學習后，相信大家對ES6新增的特性有哪些及怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！