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

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

我們提供的服務(wù)有：做網(wǎng)站、網(wǎng)站設(shè)計、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、市中ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的市中網(wǎng)站制作公司

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

理解ES6

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

ES6 塊級作用域 let

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

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

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

?
Uncaught ReferenceError: b is not defined

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

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

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

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òu)對象，定義對象，鍵值對中鍵表示映射的實際對象的鍵名，值就是自定義變量，解構(gòu)完成，會自動完成賦值，然后調(diào)用 breakfast 函數(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 模板字符串

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

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

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

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

let d = `今天吃 ${a} 吃完看 ${b}`;
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 默認參數(shù)

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

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ù)上，接收一個參數(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ù)可以讓代碼更簡潔，但是也要注意箭頭函數(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 對象表達式

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

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

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

?? ?
?? ? ?
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 判斷兩個值是否相等

一些特殊值使用 === 或 == 進行比較的結(jié)果，可能不滿足你的需求，這是你可以使用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 復(fù)制對象

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

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

{ a: '??' }

ES6 設(shè)置對象的 prototype

使用es6可以設(shè)置對象的 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í)前，先首寫一個迭代器

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 + '說奧里給';
    }
}
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關(guān)鍵字修飾的方法，不用實例化對象也可以直接使用

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ù)添加，只有一個能進去
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é)合存儲鍵值對

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)容，還有默認導(dǎo)出等等細節(jié)

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

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

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

網(wǎng)頁標(biāo)題：ES6新增的特性有哪些及怎么用
標(biāo)題來源：http://www.chinadenli.net/article40/iieoeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、定制開發(fā)、商城網(wǎng)站、、網(wǎng)站設(shè)計公司、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

理解ES6

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

ES6 解構(gòu)對象

ES6 模板字符串

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

ES6 默認參數(shù)

ES6 展開操作符

ES6 剩余操作符

ES6 函數(shù)名字

ES6 箭頭函數(shù)

ES6 對象表達式

ES6 恒量

ES6 對象屬性名

ES6 判斷兩個值是否相等

ES6 復(fù)制對象

ES6 設(shè)置對象的 prototype

ES6 proto

ES6 super

ES6 生成迭代器

ES6 類

ES6 get set

ES6 static

ES6 extends

ES6 Set

ES6 Map

ES6 模塊化