ES6

AJAX

異步網(wǎng)絡(luò)請(qǐng)求

var request = new XMLHttpRequest(); // 新建XMLHttpRequest對(duì)象

request.onreadystatechange = function () { // 狀態(tài)發(fā)生變化時(shí)，函數(shù)被回調(diào)
    if (request.readyState === 4) { // 成功完成
        // 判斷響應(yīng)結(jié)果:
        if (request.status === 200) {
            // 成功，通過(guò)responseText拿到響應(yīng)的文本:
            return success(request.responseText);
        } else {
            // 失敗，根據(jù)響應(yīng)碼判斷失敗原因:
            return fail(request.status);
        }
    } else {
        // HTTP請(qǐng)求還在繼續(xù)...
    }
}

// 發(fā)送請(qǐng)求:
request.open('GET', '/api/categories');
request.send();

alert('請(qǐng)求已發(fā)送，請(qǐng)等待響應(yīng)...');

Promise

使用了Promise對(duì)象之后可以鏈?zhǔn)秸{(diào)用的方式組織代碼

new Promise(test).then(function (result) {
    console.log('成功：' + result);
}).catch(function (reason) {
    console.log('失?。? + reason);
});

Promise.all: 都成功才會(huì)返回
Promise.race: 有一個(gè)成功就返回

var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000);
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000);
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"]
});

對(duì)象

delete Person.name 刪除對(duì)象屬性
'name' in Person 對(duì)象是否存在該屬性
in缺陷---屬性是繼承來(lái)的時(shí)候,仍然返回true
最好使用 hasOwnProperty()
Person.hasOwnProperty('name')

Map

對(duì)象缺陷: key必須是字符串
Map就是支持全類(lèi)型的key(如:number)

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95


var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 刪除key 'Adam'
m.get('Adam'); // undefined

Set

沒(méi)有重復(fù)值得Array,重復(fù)值會(huì)被自動(dòng)過(guò)濾掉

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
s.add(4) //添加(重復(fù)添加無(wú)效果)
s.delete(3) //刪除

迭代器(iterable)

for...in 遍歷的是對(duì)象的屬性名稱(chēng)(key) Array的key就是index

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    alert(x); // '0', '1', '2', 'name'
}

for...of就是解決這個(gè)問(wèn)題的循環(huán)

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    alert(x); // 'A', 'B', 'C'
}

更好的方式: forEach

var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向當(dāng)前元素的值
    // index: 指向當(dāng)前索引
    // array: 指向Array對(duì)象本身
    alert(element);
});

Set

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});

Map

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

函數(shù)

如果沒(méi)有return語(yǔ)句,函數(shù)也會(huì)返回結(jié)果,只是結(jié)果為undefined
arguments: 獲取函數(shù)傳入的所有參數(shù)
rest: 抑制參數(shù)(用于獲取定義參數(shù)之外的參數(shù),不過(guò)要改寫(xiě)法)

function foo(a, b, ...rest) {
    console.log('a = ' + a);
    console.log('b = ' + b);
    console.log(rest);
}

foo(1, 2, 3, 4, 5);
// 結(jié)果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]

foo(1);
// 結(jié)果:
// a = 1
// b = undefined
// Array []

變量

var變量會(huì)提升到函數(shù)頂部聲明(未賦值)
局部作用域
JS變量作用域?qū)嶋H上是函數(shù)內(nèi)部, 那么在for循環(huán)語(yǔ)句塊中是無(wú)法定義局部變量的

function foo() {
    for (var i=0; i<100; i++) {
        //
    }
    i += 100; // 仍然可以引用變量i
}

let變量: 可以用來(lái)聲明塊級(jí)作用域的變量

function foo() {
    var sum = 0;
    for (let i=0; i<100; i++) {
        sum += i;
    }
    i += 1; // SyntaxError
}

const: 定義常量

方法

對(duì)象綁定方法

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        var y = new Date().getFullYear();
        return y - this.birth;
    }
};

xiaoming.age; // function xiaoming.age()
xiaoming.age(); // 今年調(diào)用是25,明年調(diào)用就變成26了

this: 指向當(dāng)前對(duì)象
apply call綁定函數(shù)

function getAge() {
    var y = new Date().getFullYear();
    return y - this.birth;
}

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: getAge
};

xiaoming.age(); // 25
getAge.apply(xiaoming, []); // 25, this指向xiaoming, 參數(shù)為空

另一個(gè)與apply()類(lèi)似的方法是call()，唯一區(qū)別是：
? apply()把參數(shù)打包成Array再傳入；
? call()把參數(shù)按順序傳入。
比如調(diào)用Math.max(3, 5, 4)，分別用apply()和call()實(shí)現(xiàn)如下：

Math.max.apply(null, [3, 5, 4]); // 5
Math.max.call(null, 3, 5, 4); // 5

對(duì)普通函數(shù)調(diào)用，我們通常把this綁定為null。

高級(jí)函數(shù)

map(): 定義在Array中,對(duì)數(shù)組中每個(gè)元素執(zhí)行map中傳入的操作,并返回新數(shù)組

function pow(x) {
    return x * x;
}

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

reduce(): 定義在Array中,必須接受兩個(gè)參數(shù),并把結(jié)果和下一個(gè)元素,做累積計(jì)算

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

filter(): 定義在Array中,過(guò)濾掉元素,返回剩下的元素

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});
r; // [1, 5, 9, 15]

sort(): 定義在Array中,排序函數(shù)

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
}); // [1, 2, 10, 20]

箭頭函數(shù)

箭頭函數(shù)相當(dāng)于匿名函數(shù)

// 兩個(gè)參數(shù):
(x, y) => x * x + y * y

// 無(wú)參數(shù):
() => 3.14

// 可變參數(shù):
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

如果要返回一個(gè)對(duì)象

// SyntaxError:
x => { foo: x } //錯(cuò)誤寫(xiě)法
// ok:
x => ({ foo: x })
//因?yàn)楹蛖...}函數(shù)體的語(yǔ)法沖突

箭頭函數(shù)和匿名函數(shù)的區(qū)別:
匿名函數(shù)會(huì)出現(xiàn)this的錯(cuò)指向

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

箭頭函數(shù)已綁定this,不會(huì)出現(xiàn)錯(cuò)指向

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj對(duì)象
        return fn();
    }
};
obj.getAge(); // 25

generator(多返回函數(shù)) 使用function*定義

function* foo(x) {
    yield x + 1;
    yield x + 2;
    return x + 3;
}

閉包: 返回值是函數(shù), 函數(shù)的參數(shù)記錄父函數(shù)的環(huán)境,這樣就把東西帶出來(lái)了

面向?qū)ο?/h2>

JS不區(qū)分類(lèi)和對(duì)象的概念,而是通過(guò)原型(prototype)實(shí)現(xiàn)面向?qū)ο缶幊?/p> 

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

var xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;

JS沒(méi)有類(lèi)的概念,多有的都是對(duì)象,使用原型實(shí)現(xiàn)繼承
原型鏈

arr ----> Array.prototype ----> Object.prototype ----> null

構(gòu)造函數(shù)

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
//這確實(shí)是一個(gè)普通函數(shù)，但是在JavaScript中，可以用關(guān)鍵字new來(lái)調(diào)用這個(gè)函數(shù)，并返回一個(gè)對(duì)象：
var xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

prototype: 可以用來(lái)擴(kuò)展原型的屬性和方法

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 函數(shù)參數(shù)的默認(rèn)值 基本用法 在ES6之前，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法。 上面代碼檢查函數(shù)l...
    呼呼哥閱讀 3,708評(píng)論 0贊 1
  • 看這本書(shū)是在markdown在做的筆記，更友好的閱讀方式訪問(wèn)： github es6.md(https://git...
    汪汪仙貝閱讀 514評(píng)論 0贊 0
  • 1.函數(shù)參數(shù)的默認(rèn)值 (1).基本用法 在ES6之前，不能直接為函數(shù)的參數(shù)指定默認(rèn)值，只能采用變通的方法。
    趙然228閱讀 831評(píng)論 0贊 0
  • 三，字符串?dāng)U展 3.1 Unicode表示法 ES6 做出了改進(jìn)，只要將碼點(diǎn)放入大括號(hào)，就能正確解讀該字符。有了這...
    eastbaby閱讀 1,672評(píng)論 0贊 8
  • 一、ES6簡(jiǎn)介 ? 歷時(shí)將近6年的時(shí)間來(lái)制定的新 ECMAScript 標(biāo)準(zhǔn) ECMAScript 6（亦稱(chēng) ...
    一歲一枯榮_閱讀 6,209評(píng)論 8贊 25

友情鏈接更多精彩內(nèi)容