JavaScript速記

JavaScript常見知識點積累，包括數據類型、數值轉換、對象、原型與原型鏈、做用域與閉包等等，持續整理更新，若有錯誤請指正，甚是感激

本文連接：JavaScript那些磨人的小妖精

做者：狐狸家的魚

GitHub：八至

數據類型

一共有七種數據類型，主要爲兩大類：原始類型、對象類型

1.基礎類型（原始值）

• 數值number：用於任何類型的數字，包括整數或浮點數
• 字符串string：字符串
• 布爾值boolean：邏輯類型，true和false
• 空值null：未知的值
• 無定義undefined：未定義的值
• symbol：建立對象的惟一標識符（ES6新增）

2.複雜類型（對象值）

• 對象object：複雜的數據結構

3.instance操做符

用來比較兩個操做數的構造函數。

4.隱式轉換

顯示轉換主要涉及三種轉換：

• 值->原始值：ToPrimitive()
• 值->數字：ToNumber()
• 值->字符串：ToString()

內置類型的構造函數隱式轉換

• 轉換爲字符串：''+10==='10'//true 將一個值加上空字符串能夠轉換爲字符串類型
• 轉化爲數字：+'10' === 10//true 使用一元的加號操做符，把字符串轉換爲數字
• 轉換爲布爾值：使用否操做符兩次

!!'foo';   // true
!!'';      // false
!!'0';     // true
!!'1';     // true
!!'-1'     // true
!!{};      // true
!!true;    // true

運算符

• 算術運算符：加減乘除（+-*/）、指數（**）、餘數（%）、自增(++)、自減（--）、數值、負數值
• 比較運算符：大於(>)、小於(<)、大於或等於(>=)、小於或等於(<=)、相等(==)、嚴格相等(===)、不相等(!=)、嚴格不相等(!==)
• 布爾運算符：取反(!)、且(&&)、或(||)、三元(? :)
• 二進制位運算符

數組Array

對象容許存儲鍵值化的集合,能夠存儲任何類型的元素

1.方法

添加/移除元素 pop/push、shift/unshift

• unshift：在數組首部添加一個元素
• shift：取出並返回第一個元素
• push：在末尾添加一個元素
• pop:取出並返回最後一個元素

添加/刪除/插入元素splice()/slice()

arr.splice(index[], deleteCount, elem1, ..., elemN])

• 從索引位置刪除幾個元素，並用另外的元素替換它們。
• 將 deleteCount 設置爲 0，splice 方法就可以插入元素而不用刪除 arr.slice(start, end)
• 從全部元素的開始索引 "start" 複製到 "end" (不包括 "end") 返回一個新的數組

合併數組concat()

arr.concat(arg1, arg2...)

查詢數組 sort()

• 1.indexOf/lastIndexOf 和 includes
  • arr.indexOf(item, from) 從索引 from 查詢 item，若是找到返回索引，不然返回 -1
  • arr.lastIndexOf(item, from) 和上面相同，只是從尾部開始查詢
  • arr.includes(item, from) 從索引 from 查詢 item，若是找到則返回 true
• 2.find 和 findIndex

  let result = arr.find(function(item, index, array) { // 若是查詢到返回 true
  });

  • item是元素
  • index是它的索引
  • array是數組自己

返回true中止查詢，返回item，沒有查詢到結果則返回undefined。

arr.findIndex與之同樣，不過返回的是元素索引而不是元素自己。

過濾數組filter()

返回全部匹配元素組成的數組

let results = arr.filter(function(item, index, array) { // 在元素經過過濾器時返回 true
});

轉換數組

• map()

迭代並返回數組中每一個元素調用函數並返回符合結果的數組

let result = arr.map(function(item, index, array) { // 返回新值而不是當前元素
})

• sort():數組排序
• reverse():顛倒數組，而後返回它

迭代forEach

容許爲數組的每一個元素運行一個函數

arr.forEach(function(item, index, array) { // ... do something with item
});

遍歷數組

• 老方法for循環：for(let i=0; i<arr.length; i++)
• for...of：不能獲取當前元素的索引,只能訪問 items
• for...in（不推薦）
• forEach

對象(Object)

• 對象是用來存儲鍵值對和屬性的實體
• 對象是單個實物的抽象

1.屬性的getter和setter

屬性分爲兩種：數據屬性和訪問器屬性。

當讀取屬性值時，用getter，當設置屬性值時，使用setter。

2.對象操做

• 訪問屬性的方法
  • 點符號：obj.property
  • 方括號：obj["property]
• 刪除屬性：delete obj.property
• 檢查屬性是否存在：key in obj
• 遍歷對象：for(let key in obj)
• 對象根據引用來複制或者賦值：變量存儲的不是對象的「值」，而是值的「引用」（內存地址）。因此複製變量或者傳遞變量到方法中只是複製了對象的引用。 全部的引用操做（像增長，刪除屬性）都做用於同一個對象
• 深拷貝使用Object.assign或者_.cloneDeep(obj)

3.原型與原型鏈

原型prototype

每一個函數都有一個prototype屬性，指向對象。

function foo() typeof foo.prototype; //Object

對於構造函數來講，生成實例的時候，該prototype屬性會自動成爲實例對象的原型

做用

對象的屬性和方法定義在原型上，那麼全部實例對象都能共享，節省內存。

function Person(name){ this.name = name; } person.prototype.sex = 'male'; let jack = new Person('jack'); let mark = new Person('mark'); jack.sex;//'male'
mark.sex;//'male'

構造函數Person的prototype屬性，就是實例對象jack和mark的原型對象，它倆都共享了該屬性。

原型對象的屬性不是實例對象自身的屬性。修改原型對象時，會體如今全部實例對象上，由於原型對象是共享的。

若是實例對象自身有某個屬性或方法，實例對象不會取原型對象上獲取。 若是

原型鏈

造成一個原型鏈：對象到原型，原型到原型...

• 全部對象都有本身的原型對象prototype
  • 對象能夠充當其餘對象的原型
  • 原型對象自己也是對象，全部它也有本身的原型
• 全部對象的原型最終上溯到Object.prototype，繼承它的屬性
• Obejct.prototype的原型是null，也就是沒有本身的原型，原型鏈的盡頭就是null

Object.getPrototypeOf(Object.prototype) // null

• 讀取對象的某個屬性時，JavaScript 引擎先尋找對象自己的屬性，若是找不到，就到它的原型去找，若是仍是找不到，就到原型的原型去找。若是直到最頂層的Object.prototype仍是找不到，則返回undefined。
• 若是對象自身和它的原型，都定義了一個同名屬性，那麼優先讀取對象自身的屬性，這叫作「覆蓋」（overriding）

原型方法

• Object.create():j接受一個對象做爲參數，而後以它的原型返回一個實例對象，徹底繼承原型對象的屬性
• Object.setPrototypeOf：爲參數對象設置原型，返回該參數對象。接受兩次參數，第一個爲現有對象，第二個爲原型對象
• Object.getPrototypeOf：返回參數對象的原型
• Object.prototype.isPrototypeOf()：判斷該對象是否爲參數對象的原型
• Object.prototype._proto_：返回該對象的原型。_proto_屬性指向當前對象的原型對象，即構造函數的prototypr屬性

let Person = function(){}; let people = new Person(); Object.getPrototypeOf(people);//Person.prototype

• 獲取實例對象obj的原型對象有三種方法：
  • obj._proto_
  • obj.constructor.prototype
  • Objct.getPrototyprOf(obj)
• Object.getOwnPropertyNames：返回一個數組，元素是參數對象自己全部屬性的鍵名
• Object.prototype.hasOwnProperty()：返回布爾值，判斷某個屬性在對象自身仍是在原型鏈上

hasOwnPrototype屬性(推薦用於遍歷對象屬性)

• 判斷一個對象是否包含自定義屬性而不是原型鏈上的屬性
• hasOwnProperty 是 JavaScript 中惟一一個處理屬性可是不查找原型鏈的函數

constructor屬性

• prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數

function Person(){}; Person.prototype.constructor;//Person

• constructor屬性定義在prototype對象上面，意味着能夠被全部實例對象繼承
• 修改了原型對象，通常會同時修改constructor屬性

instanceof運算符

• 返回一個實例，檢驗對象是否爲某個構造函數的實例
• instanceof運算符只能用於對象，不適用原始類型的值
• 對於undefined和null，instanceOf運算符老是返回false

對象拷貝

• 確保拷貝後的對象與元對象具備相同原型
• 確保拷貝後的對象與原對象具備相同的實例屬性

let copyObj = origin => { return Obejct.create( Object.getPrototypeOf(origin), Obejct.getOwnPropertyDescriptors(origin) ); }

this關鍵字

1.涵義

• this在構造函數中，表示實例對象
• 無論在什麼場合，它老是返回一個對象
• this就是屬性或方法「當前」所在的對象
• this的指向是可變的，由於屬性所在的當前對象可變
• this的實質就是在函數體內部，指代函數當前運行環境
• 在全局環境執行，this指向全局環境
• 在obj環境執行，指向obj

function Person(){ return "我是" + this.name; } let jack = { name:"jack", resume:Person }; let mark = { name:"mark", resume:Person }; jack.resume();//"我是jack"
 mark.resume();//"我是mark"

2.使用場合

• (1)全局環境：只要全局環境下使用this，它指向的是頂層對象window
• (2)構造函數：指向實例對象
• (3)對象的方法：指向方法運行時所在的對象
• (4)顯示設置this：當使用Function.prototype的call/apply方法時，函數內的ths·會被顯示設置爲函數調用的第一個參數

3.綁定this的方法

• call()：能夠指定函數內部this的指向（即函數執行時所在的做用域），函數在指定做用域中調用該函數，
  • 其參數是一個對象，爲空時，null和undefined傳入全局對象
  • 其參數是一個原始值，會自動轉爲對應的包裝對象，而後傳入call方法

let obj = {}; let person = function (){ return this; } person();//window
person.call(obj);//obj

全局環境運行函數person時，this指向全局環境（window），call方法改變this指向對象obj

• apply：與call類型，惟一不一樣就是它接收一個數組做爲函數執行時的參數

function.apply(thisValue, [...arr]);

第一個參數是this指向的對象，爲null或undefined時，傳入全局對象。

第二個參數是數組，其元素依次做爲參數傳入原函數。

• bind()：將函數體內的this綁定到某個對象，而後返回一個新函數

let person = function(name, sex){ return "我叫" + name + "," + sex; } let obj = { name:"jack"， sex:21 } let new = person.bind(obj); new();//我叫jack，21

4.this使用注意點

• 避免多層套用this
• 避免數組處理方法中使用this
• 避免回調函數中使用this
• 函數聲明時的this只有等到調用時纔會有值
• 箭頭函數沒有this，在箭頭函數內部訪問的都是來自外部的this值