ECMAScript理解

1. 它是一種由ECMA組織（前身為歐洲計算機制造商協會）制定和發(fā)布的腳本語言規(guī)范

2. 而我們學的 JavaScript 是ECMA的實現,但術語ECMAScript和JavaScript平時表達同一個意思

3. JS包含三個部分：

1). ECMAScript（核心）

2). 擴展==>瀏覽器端

* BOM（瀏覽器對象模型）

* DOM（文檔對象模型）

3). 擴展==>服務器端

* Node

4. ES的幾個重要版本

* ES5 : 09年發(fā)布

* ES6(ES2015) : 15年發(fā)布, 也稱為ECMA2015

* ES7(ES2016) : 16年發(fā)布, 也稱為ECMA2016? (變化不大)

ES5

嚴格模式

1. 理解:

* 除了正常運行模式(混雜模式)涯肩，ES5添加了第二種運行模式："嚴格模式"（strict mode）

* 顧名思義敬鬓，這種模式使得Javascript在更嚴格的語法條件下運行

2. 目的/作用

* 消除Javascript語法的一些不合理煌寇、不嚴謹之處掩幢，減少一些怪異行為

* 消除代碼運行的一些不安全之處族操，為代碼的安全運行保駕護航

* 為未來新版本的Javascript做好鋪墊

3. 使用

* 在全局或函數的第一條語句定義為: 'use strict';

* 如果瀏覽器不支持, 只解析為一條簡單的語句, 沒有任何副作用

4. 語法和行為改變

* 必須用var聲明變量

* 禁止自定義的函數中的this指向window

* 創(chuàng)建eval作用域

* 對象不能有重名的屬性

JSON對象

1. JSON.stringify(obj/arr)

* js對象(數組)轉換為json對象(數組)

2. JSON.parse(json)

* json對象(數組)轉換為js對象(數組)

Object擴展

ES5給Object擴展了一些靜態(tài)方法, 常用的2個:

1. Object.create(prototype, [descriptors])

* 作用: 以指定對象為原型創(chuàng)建新的對象

* 為新的對象指定新的屬性, 并對屬性進行描述

- value : 指定值

- writable : 標識當前屬性值是否是可修改的, 默認為false

- configurable: 標識當前屬性是否可以被刪除 默認為false

- enumerable： 標識當前屬性是否能用for in 枚舉 默認為false

2. Object.defineProperties(object, descriptors)

* 作用: 為指定對象定義擴展多個屬性

- get ：用來獲取當前屬性值得回調函數

- set ：修改當前屬性值得觸發(fā)的回調函數锐峭，并且實參即為修改后的值

* 存取器屬性：setter,getter一個用來存值，一個用來取值

Array擴展

1. Array.prototype.indexOf(value) : 得到值在數組中的第一個下標

2. Array.prototype.lastIndexOf(value) : 得到值在數組中的最后一個下標

3. Array.prototype.forEach(function(item, index){}) : 遍歷數組

4. Array.prototype.map(function(item, index){}) : 遍歷數組返回一個新的數組驾讲，返回加工之后的值

5. Array.prototype.filter(function(item, index){}) : 遍歷過濾出一個新的子數組蚊伞， 返回條件為true的值

Function擴展

1. Function.prototype.bind(obj) :

* 作用: 將函數內的this綁定為obj, 并將函數返回

2. 面試題: 區(qū)別bind()與call()和apply()?

* 都能指定函數中的this

* call()/apply()是立即調用函數

* bind()是將函數返回

ES6

let關鍵字

1. 作用:

* 與var類似, 用于聲明一個變量

2. 特點

* 在塊作用域內有效

* 不能重復聲明

* 不會預處理, 不存在變量提升

3. 應用

* 循環(huán)遍歷加監(jiān)聽

* 使用let取代var是趨勢

const關鍵字

1. 作用:

* 定義一個常量

2. 特點:

* 不能修改

* 其它特點同let

3. 應用

* 保存不用改變的數據

變量的解構賦值

1. 理解:

* 從對象或數組中提取數據, 并賦值給變量(多個)

2. 對象的解構賦值

let {n, a} = {n:'tom', a:12}

3. 數組的解構賦值

let [a,b] = [1, 'hello'];

4. 用途

* 給多個形參賦值

模板字符串

1. 模板字符串 : 簡化字符串的拼接

* 模板字符串必須用 `` 包含

* 變化的部分使用${xxx}定義

簡化的對象寫法

1. 省略同名的屬性值

2. 省略方法的function

3. 例如:

let x = 1;

let y = 2;

let point = {

x,

y,

setX (x) {this.x = x}

};

箭頭函數

1. 作用: 定義匿名函數

2. 基本語法:

* 沒有參數: () => console.log('xxxx')

* 一個參數: i => i+2

* 大于一個參數: (i,j) => i+j

* 函數體不用大括號: 默認返回結果

* 函數體如果有多個語句, 需要用{}包圍，若有需要返回的內容吮铭，需要手動返回

3. 使用場景: 多用來定義回調函數

4. 箭頭函數的特點：

1时迫、簡潔

2、箭頭函數沒有自己的this谓晌，箭頭函數的this不是調用的時候決定的掠拳，而是在定義的時候所處的對象就是它的this

3、擴展理解： 箭頭函數的this看外層的是否有函數纸肉，如果有溺欧，外層函數的this就是內部箭頭函數的this，如果沒有柏肪，則this是window姐刁。

擴展運算符

1. rest(可變)參數

* 用來取代arguments 但比 arguments 靈活,只能是最后部分形參參數

function fun(...values) {

? ? console.log(arguments);

? ? arguments.forEach(function (item, index) {

? ? ? ? console.log(item, index);

? ? });

? ? console.log(values);

? ? values.forEach(function (item, index) {

? ? ? ? console.log(item, index);

? ? })

}

fun(1,2,3);

2. 擴展運算符

let arr1 = [1,3,5];

let arr2 = [2,...arr1,6];

arr2.push(...arr1);

形參默認值

當不傳入參數的時候默認使用形參里的默認值

function Point(x = 1,y = 2) {

? ? this.x = x;

? ? this.y = y;

}

Promise對象

1. 理解:

* Promise對象: 代表了未來某個將要發(fā)生的事件(通常是一個異步操作)

* 有了promise對象, 可以將異步操作以同步的流程表達出來, 避免了層層嵌套的回調函數(俗稱'回調地獄')

* ES6的Promise是一個構造函數, 用來生成promise對象的實例

2. 使用promise基本步驟(2步):

* 創(chuàng)建promise對象

let promise = new Promise((resolve, reject) => {

? ? //初始化promise狀態(tài)為 pending

? //執(zhí)行異步操作

? if(異步操作成功) {

? ? resolve(value);//修改promise的狀態(tài)為fullfilled

? } else {

? ? reject(errMsg);//修改promise的狀態(tài)為rejected

? }

})

* 調用promise的then()

promise.then(function(

? result => console.log(result),

? errorMsg => alert(errorMsg)

))

3. promise對象的3個狀態(tài)

* pending: 初始化狀態(tài)

* fullfilled: 成功狀態(tài)

* rejected: 失敗狀態(tài)

4. 應用:

* 使用promise實現超時處理

* 使用promise封裝處理ajax請求

let request = new XMLHttpRequest();

request.onreadystatechange = function () {

}

request.responseType = 'json';

request.open("GET", url);

request.send();

5. promise過程分析:

Symbol

1. 前言：ES5中對象的屬性名都是字符串，容易造成重名烦味，污染環(huán)境

2. 概念：ES6中的添加了一種原始數據類型symbol(已有的原始數據類型：String, Number, boolean, null, undefined, 對象)

3. 特點：

1聂使、Symbol屬性對應的值是唯一的，解決命名沖突問題

2谬俄、Symbol值不能與其他數據進行計算柏靶，包括同字符串拼串

3、for in, for of遍歷時不會遍歷symbol屬性

4. 使用：

1凤瘦、調用Symbol函數得到symbol值

let symbol = Symbol();

let obj = {};

obj[symbol] = 'hello';

2宿礁、傳參標識

let symbol = Symbol('one');

let symbol2 = Symbol('two');

console.log(symbol);// Symbol('one')

console.log(symbol2);// Symbol('two')

3、內置Symbol值

* 除了定義自己使用的Symbol值以外蔬芥，ES6還提供了11個內置的Symbol值梆靖，指向語言內部使用的方法

- Symbol.iterator

* 對象的Symbol.iterator屬性控汉，指向該對象的默認遍歷器方法

Iterator遍歷器

概念： iterator是一種接口機制，為各種不同的數據結構提供統(tǒng)一的訪問機制

作用：

1返吻、為各種數據結構姑子，提供一個統(tǒng)一的、簡便的訪問接口测僵；

2街佑、使得數據結構的成員能夠按某種次序排列

3、ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)捍靠，Iterator接口主要供for...of消費

工作原理：

- 創(chuàng)建一個指針對象(遍歷器對象)沐旨，指向數據結構的起始位置

- 第一次調用next方法，指針自動指向數據結構的第一個成員

- 接下來不斷調用next方法榨婆，指針會一直往后移動磁携，直到指向最后一個成員

- 每調用next方法返回的是一個包含value和done的對象，{value: 當前成員的值,done: 布爾值}

* value表示當前成員的值良风，done對應的布爾值表示當前的數據的結構是否遍歷結束

* 當遍歷結束的時候返回的value值是undefined谊迄，done值為false

原生具備iterator接口的數據(可用for of遍歷)

1、Array

2烟央、arguments

3统诺、set容器

4、map容器

5疑俭、String

……

Generator函數

概念：

1粮呢、ES6提供的解決異步編程的方案之一

2、Generator函數是一個狀態(tài)機怠硼，內部封裝了不同狀態(tài)的數據

3鬼贱、用來生成遍歷器對象

4、可暫停函數(惰性求值), yield可暫停香璃，next方法可啟動这难。每次返回的是yield后的表達式結果

特點：

1、function 與函數名之間有一個星號

2葡秒、內部用yield表達式來定義不同的狀態(tài)

例如：

function* generatorExample(){

? let result = yield 'hello';? // 狀態(tài)值為hello

? yield 'generator'; // 狀態(tài)值為generator

}

3姻乓、generator函數返回的是指針對象(即iterator)，而不會執(zhí)行函數內部邏輯

4眯牧、調用next方法函數內部邏輯開始執(zhí)行蹋岩，遇到y(tǒng)ield表達式停止，返回{value: yield后的表達式結果/undefined, done: false/true}

5学少、再次調用next方法會從上一次停止時的yield處開始剪个，直到最后

6、yield語句返回結果通常為undefined版确，當調用next方法時傳參內容會作為啟動時yield語句的返回值

async函數

async函數(源自ES2017)

概念： 真正意義上去解決異步回調的問題扣囊，同步流程表達異步操作

本質： Generator的語法糖

語法：

async function foo(){

await 異步操作;

await 異步操作乎折；

}

特點：

1、不需要像Generator去調用next方法侵歇，遇到await等待骂澄，當前的異步操作完成就往下執(zhí)行

2、返回的總是Promise對象惕虑，可以用then方法進行下一步操作

3坟冲、async取代Generator函數的星號*，await取代Generator的yield

4溃蔫、語意上更為明確健提，使用簡單，經臨床驗證伟叛，暫時沒有任何副作用

class

1. 通過class定義類/實現類的繼承

2. 在類中通過constructor定義構造方法

3. 通過new來創(chuàng)建類的實例

4. 通過extends來實現類的繼承

5. 通過super調用父類的構造方法

6. 重寫從父類中繼承的一般方法

字符串擴展

1. includes(str) : 判斷是否包含指定的字符串

2. startsWith(str) : 判斷是否以指定字符串開頭

3. endsWith(str) : 判斷是否以指定字符串結尾

4. repeat(count) : 重復指定次數

數值擴展

1. 二進制與八進制數值表示法: 二進制用0b, 八進制用0o

2. Number.isFinite(i) : 判斷是否是有限大的數

3. Number.isNaN(i) : 判斷是否是NaN

4. Number.isInteger(i) : 判斷是否是整數

5. Number.parseInt(str) : 將字符串轉換為對應的數值

6. Math.trunc(i) : 直接去除小數部分

數組擴展

1. Array.from(v) : 將偽數組對象或可遍歷對象轉換為真數組

2. Array.of(v1, v2, v3) : 將一系列值轉換成數組

3. find(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素

4. findIndex(function(value, index, arr){return true}) : 找出第一個滿足條件返回true的元素下標

對象擴展

1. Object.is(v1, v2)

* 判斷2個數據是否完全相等

2. Object.assign(target, source1, source2..)

* 將源對象的屬性復制到目標對象上

3. 直接操作 __proto__ 屬性

let obj2 = {};

obj2.__proto__ = obj1;

深度克隆

1矩桂、數據類型：

* 數據分為基本的數據類型(String, Number, boolean, Null, Undefined)和對象數據類型

- 基本數據類型特點： 存儲的是該對象的實際數據

- 對象數據類型特點： 存儲的是該對象在棧中引用，真實的數據存放在堆內存里

2痪伦、復制數據

- 基本數據類型存放的就是實際的數據，可直接復制

let number2 = 2;

let number1 = number2;

- 克隆數據：對象/數組

1雹锣、區(qū)別： 淺拷貝/深度拷貝

判斷： 拷貝是否產生了新的數據還是拷貝的是數據的引用

知識點：對象數據存放的是對象在棧內存的引用网沾，直接復制的是對象的引用

let obj = {username: 'kobe'}

let obj1 = obj; // obj1 復制了obj在棧內存的引用

2、常用的拷貝技術

1). arr.concat(): 數組淺拷貝

2). arr.slice(): 數組淺拷貝

3). JSON.parse(JSON.stringify(arr/obj)): 數組或對象深拷貝, 但不能處理函數數據

4). 淺拷貝包含函數數據的對象/數組

5). 深拷貝包含函數數據的對象/數組

Set和Map數據結構

1. Set容器 : 無序不可重復的多個value的集合體

* Set()

* Set(array)

* add(value)

* delete(value)

* has(value)

* clear()

* size

2. Map容器 : 無序的 key不重復的多個key-value的集合體

* Map()

* Map(array)

* set(key, value)//添加

* get(key)

* delete(key)

* has(key)

* clear()

* size

for_of循環(huán)

for(let value of target){}循環(huán)遍歷

1. 遍歷數組

2. 遍歷Set

3. 遍歷Map

4. 遍歷字符串

5. 遍歷偽數組

ES7

1. 指數運算符(冪): **

2. Array.prototype.includes(value) : 判斷數組中是否包含指定value