前端培訓-初級階段（13） - ECMAScript （內置對象、函數）

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，如今前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提高技術水平，打牢基礎知識的中心思想，咱們開課啦（每週四）。

該文爲前端培訓-初級階段（1三、18）的補充內容 (介紹了 ECMAScript 歷史，ES6 經常使用點)。

本文介紹ECMAScript基礎知識。

1. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
   上節的基礎內容知識，這節咱們會用到。默認已讀。

咱們要講什麼

1. ECMAScript 基礎對象（Object、Boolean、Number、String）
2. 經常使用內置對象（Date、Array、Math、RegExp、global、Function、Event、arguments、JSON）
3. ECMAScript 函數（聲明、調用、返回值、閉包、遞歸）

ECMAScript 基礎對象

在 ECMAScript 中，全部對象並不是同等建立的。
通常來講，能夠建立並使用的對象有三種：本地對象、內置對象和宿主對象。

ECMA-262 把本地對象（native object）定義爲「獨立於宿主環境的 ECMAScript 實現提供的對象」。簡單來講，本地對象就是 ECMA-262 定義的類（引用類型）。它們包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

ECMA-262 把內置對象（built-in object）定義爲「由 ECMAScript 實現提供的、獨立於宿主環境的全部對象，在 ECMAScript 程序開始執行時出現」。這意味着開發者沒必要明確實例化內置對象，它已被實例化了。ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每一個內置對象都是本地對象）。

全部非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。全部 BOM 和 DOM 對象都是宿主對象。

Object 對象

Object 是全部對象的基礎。JavaScript 中的全部對象都來自 Object ；全部對象從 Object.prototype 繼承方法和屬性，儘管它們可能被覆蓋。例如，其餘構造函數的原型將覆蓋 constructor 屬性並提供本身的 toString() 方法。Object 原型對象的更改將傳播到全部對象，除非受到這些更改的屬性和方法將沿原型鏈進一步覆蓋。

類型	key	用法	做用
屬性	length	Object.length	Object.length 值爲1
屬性	prototype	Object.prototype	能夠爲全部 Object 類型的對象添加屬性
方法	assign	Object.assign()	經過複製一個或多個對象來建立一個新的對象
方法	create	Object.create()	使用指定的原型對象和屬性建立一個新對象
方法	defineProperty	Object.defineProperty()	給對象添加一個屬性並指定該屬性的配置
方法	defineProperties	Object.defineProperties()	給對象添加多個屬性並分別指定它們的配置
方法	entries	Object.entries()	返回給定對象自身可枚舉屬性的[key, value]數組
方法	freeze	Object.freeze()	凍結對象：其餘代碼不能刪除或更改任何屬性
方法	getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor()	返回對象指定的屬性配置
方法	getOwnPropertyNames	Object.getOwnPropertyNames()	返回一個數組，它包含了指定對象全部的可枚舉或不可枚舉的屬性名
方法	getOwnPropertySymbols	Object.getOwnPropertySymbols()	返回一個數組，它包含了指定對象自身全部的符號屬性
方法	getPrototypeOf	Object.getPrototypeOf()	返回指定對象的原型對象
方法	is	Object.is()	比較兩個值是否相同。全部 NaN 值都相等（這與==和===不一樣）
方法	isExtensible	Object.isExtensible()	判斷對象是否可擴展
方法	isFrozen	Object.isFrozen()	判斷對象是否已經凍結
方法	isSealed	Object.isSealed()	判斷對象是否已經密封
方法	keys	Object.keys()	返回一個包含全部給定對象自身可枚舉屬性名稱的數組
方法	preventExtensions	Object.preventExtensions()	防止對象的任何擴展
方法	seal	Object.seal()	防止其餘代碼刪除對象的屬性
方法	setPrototypeOf	Object.setPrototypeOf()	設置對象的原型（即內部[[Prototype]]屬性）
方法	values	Object.values()	返回給定對象自身可枚舉值的數組
原型屬性	([]).constructor === Array	Object.prototype.constructor	特定的函數，用於建立一個對象的原型
原型屬性	([]).__proto__ === Array.prototype	Object.prototype.__proto__	指向當對象被實例化的時候，用做原型的對象
原型方法		Object.prototype.hasOwnProperty()	返回一個布爾值 ，表示某個對象是否含有指定的屬性，並且此屬性非原型鏈繼承的
原型方法		Object.prototype.isPrototypeOf()	返回一個布爾值，表示指定的對象是否在本對象的原型鏈中
原型方法		Object.prototype.propertyIsEnumerable()	判斷指定屬性是否可枚舉
原型方法		Object.prototype.toLocaleString()	直接調用 toString()方法
原型方法		Object.prototype.toString()	返回對象的字符串表示
原型方法		Object.prototype.valueOf()	返回指定對象的原始值

Boolean 對象

這個對象很是的簡單。只有從Object哪裏基礎來的方法和屬性。當作函數調用，就是把值轉換成布爾類型

若是第一個參數不是布爾值，則會將其轉換爲布爾值。若是省略該參數，或者其值爲 0、-0、null、false、NaN、undefined、或者空字符串（""），則生成的 Boolean 對象的值爲 false。若是傳入的參數是 DOM 對象 document.all，也會生成值爲 false 的 Boolean 對象。任何其餘的值，包括值爲 "false" 的字符串和任何對象，都會建立一個值爲 true 的 Boolean 對象。
注意不要將基本類型中的布爾值 true 和 false 與值爲 true 和 false 的 Boolean 對象弄混了。
當 Boolean 對象用於條件語句的時候（譯註：意爲直接應用於條件語句），任何不是 undefined 和 null 的對象，包括值爲 false 的 Boolean 對象，都會被當作 true 來對待。例如，下面 if 語句中的條件爲真:

var x = new Boolean(false);
if (x) {
  console.log(typeof x, typeof true, typeof false)
}

Number 對象

類型	key	用法	做用
屬性	EPSILON	Number.EPSILON	兩個可表示(representable)數之間的最小間隔
屬性	MAX_SAFE_INTEGER	Number.MAX_SAFE_INTEGER	JavaScript 中最大的安全整數 (253 - 1)
屬性	MAX_VALUE	Number.MAX_VALUE	能表示的最大正數。最小的負數是 -MAX_VALUE
屬性	MIN_SAFE_INTEGER	Number.MIN_SAFE_INTEGER	JavaScript 中最小的安全整數 (-(253 - 1))
屬性	MIN_VALUE	Number.MIN_VALUE	能表示的最小正數即最接近 0 的正數 (實際上不會變成 0)。最大的負數是 -MIN_VALUE
屬性	NaN	Number.NaN	特殊的「非數字」值
屬性	NEGATIVE_INFINITY	Number.NEGATIVE_INFINITY	特殊的負無窮大值，在溢出時返回該值
屬性	POSITIVE_INFINITY	Number.POSITIVE_INFINITY	特殊的正無窮大值，在溢出時返回改值
屬性	prototype	Number.prototype	Number 對象上容許的額外屬性
方法	isNaN	Number.isNaN()	肯定傳遞的值是不是 NaN
方法	isFinite	Number.isFinite()	肯定傳遞的值類型及自己是不是有限數
方法	isInteger	Number.isInteger()	肯定傳遞的值類型是「number」，且是整數
方法	isSafeInteger	Number.isSafeInteger()	肯定傳遞的值是否爲安全整數 ( -(253 - 1) 至 253 - 1之間)
方法	toInteger	Number.toInteger()	計算傳遞的值並將其轉換爲整數 (或無窮大)
方法	parseFloat	Number.parseFloat()	和全局對象 parseFloat() 同樣
方法	parseInt	Number.parseInt()	和全局對象 parseInt() 同樣
原型方法	toExponential	Number.prototype.toExponential()	返回以科學計數法表示的數字字符串
原型方法	toFixed	Number.prototype.toFixed()	返回固定小數位的數字字符串（四拾伍入）
原型方法	toLocaleString	Number.prototype.toLocaleString()	返回以本地語言爲主的數字字符串。會覆蓋 Object.prototype.toLocaleString()。
原型方法	toPrecision	Number.prototype.toPrecision()	返回固定位數表示的數字字符串（小數點不記位，四拾伍入、位數不夠會返回科學計數法）
原型方法	toString	Number.prototype.toString()	返回以指定基數表示的數字字符串。會覆蓋 Object.prototype.toString()
原型方法	valueOf	Number.prototype.valueOf()	返回以原始數值。會覆蓋 Object.prototype.valueOf()

String 對象

類型	key	用法	做用
屬性	length	''.length	返回文字長度
方法	String.fromCharCode()	String.fromCharCode(97) == 'A'	經過 一系列UTF-16代碼單元的數字。 範圍介於0到65535（0xFFFF）之間。 大於0xFFFF的數字將被截斷。 不進行有效性檢查。 建立字符串
方法	String.fromCodePoint()	String.fromCodePoint(65,97) == 'Aa'	經過Unicode建立字符串
原型方法	charAt()	'李li'.charAt(1) == 'l'	返回特定位置的字符
原型方法	charCodeAt()	'李li'.charCodeAt(0) == 26446	返回表示給定索引的字符的Unicode的值
原型方法	codePointAt()	'李li'.codePointAt(0) == 26446	返回表示給定索引的字符的Unicode的值
原型方法	concat()	'l'.concat('i') == 'li'	鏈接兩個字符串文本，並返回一個新的字符串
原型方法	includes()	'li'.includes('i')	判斷一個字符串裏是否包含其餘字符串
原型方法	endsWith()	'li'.endsWith('i')	判斷一個字符串的結尾是否包含其餘字符串中的字符
原型方法	indexOf()	'li'.indexOf('i')	從字符串對象中返回首個被發現的給定值的索引值，若是沒有找到則返回-1
原型方法	lastIndexOf()	'li'.lastIndexOf('i')	從字符串對象中返回最後一個被發現的給定值的索引值，若是沒有找到則返回-1
原型方法	localeCompare()		返回一個數字表示是否引用字符串在排序中位於比較字符串的前面，後面，或者兩者相同
原型方法	match()	'onmousemove'.match(/on(w+)/)	使用正則表達式與字符串相比較
原型方法	normalize()		返回調用字符串值的Unicode標準化形式
原型方法	padEnd()	'1'.padEnd(5, ' ')	在當前字符串尾部填充指定的字符串， 直到達到指定的長度。 返回一個新的字符串
原型方法	padStart()	'1'.padStart(5, '0')	在當前字符串頭部填充指定的字符串， 直到達到指定的長度。 返回一個新的字符串
原型方法	repeat()	'*'.repeat(10)	返回指定重複次數的由元素組成的字符串對象
原型方法	replace()	'李？'.replace('？','**')	被用來在正則表達式和字符串直接比較，而後用新的子串來替換被匹配的子串
原型方法	search()	'李？'.search('？')	對正則表達式和指定字符串進行匹配搜索，返回第一個出現的匹配項的下標
原型方法	slice()	"李**".slice(0,2)	摘取一個字符串區域，返回一個新的字符串
原型方法	split()	'a,b,123,f'.split(',')	經過分離字符串成字串，將字符串對象分割成字符串數組
原型方法	startsWith()		判斷字符串的起始位置是否匹配其餘字符串中的字符
原型方法	substr()		經過指定字符數返回在指定位置開始的字符串中的字符
原型方法	substring()		返回在字符串中指定兩個下標之間的字符
原型方法	toLocaleLowerCase()		根據當前區域設置，將符串中的字符轉換成小寫。對於大多數語言來講，toLowerCase的返回值是一致的
原型方法	toLocaleUpperCase()		根據當前區域設置，將字符串中的字符轉換成大寫，對於大多數語言來講，toUpperCase的返回值是一致的
原型方法	toLowerCase()		將字符串轉換成小寫並返回
原型方法	toSource()		返回一個對象文字表明着特定的對象。你可使用這個返回值來建立新的對象。重寫 Object.prototype.toSource 方法
原型方法	toString()		返回用字符串表示的特定對象。重寫 Object.prototype.toString 方法
原型方法	toUpperCase()		將字符串轉換成大寫並返回
原型方法	trim()	' 1 '.trim()	從字符串的開始和結尾去除空格。參照部分 ECMAScript 5 標準
原型方法	trimStart()trimLeft()	' 1 '.trimStart()	從字符串的左側去除空格
原型方法	trimEnd()trimRight()	' 1 '.trimEnd()	從字符串的右側去除空格
原型方法	valueOf()		返回特定對象的原始值。重寫 Object.prototype.valueOf 方法

經常使用內置對象

這個我就直接說經常使用的了。

Date

Date 對象是自1970年1月1日（UTC）起通過的毫秒數。

1. 實例化方式

   new Date();//當前時間
   new Date(Number);//傳入的毫秒數轉換成時間
   new Date(dateString);//傳入的時間格式轉換爲時間。這裏有一些坑（低版本IE、ios、chrome）實現的規範不同，致使有的格式解析不出來，能夠用[momentjs][3]。
   new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

   注意：只能將 Date 做爲構造函數調用，才能實例化（instantiate） Date 對象：若將它做爲常規函數調用（即不加 new 操做符），則將會返回一個字符串，而非 Date 對象。另外，不像其餘的 JavaScript 對象類型，Date 對象沒有字面量語法（literal syntax）。

2. 方法

   1. Date.now() 返回自 1970-1-1 00:00:00 UTC（世界標準時間）至今所通過的毫秒數。
      等效寫法+new Date(),new Date().getTime()
   2. Date.parse() 解析一個表示日期的字符串，並返回從 1970-1-1 00:00:00 所通過的毫秒數。
   3. Date.UTC() 接受和構造函數最長形式的參數相同的參數（從2到7），並返回從 1970-01-01 00:00:00 UTC 開始所通過的毫秒數。

3. 原型方法

   1. getDay()周，getFullYear()年，getMonth()月，getDate()日，getHours()時，getMinutes()分，getSeconds()秒
   2. getTimezoneOffset() 返回當前時區的時區偏移。
   3. set方法同上，須要注意的地方有setHours()能夠把時分秒毫秒都設置了

Array

1. Array數組對象的forEach、map、filter、reduce
2. join 合併成串
3. concat 合併其餘數組
4. slice 分割數組

Math

1. Math.random() 隨機數。來個公式（end-start+1）*num+start
   好比 60-90區間內(90-60+1)*Math.random()+60>>0便可獲得區間內整數
2. Math.ceil 向上取整Math.ceil(5.1)
3. Math.floor 向下取整Math.floor(1.9)
4. Math.round 四拾伍入Math.round(2.3)
5. Math.pow Math.pow(3,5)等同於3**5,可是前者兼容更好

RegExp

原生的方法其實不多用。須要注意的地方是，有部分函數會記錄上次差到的點。通常都是用字符串的 replace 和 match

JSON

低版本 IE 沒有。須要使用 eval。
提供了 JSON.stringify 和 JSON.parse()用來序列化與反序列化

//提供一個tips,你能夠在控制檯試試喲。
JSON.stringify([{
    userid: 7848950,
    nickname: 'abc'
},{
    userid: 920110633,
    nickname: 'abc'
},{
    userid: 7848952,
    nickname: 'abc'
}], null, '   ')

ECMAScript 函數（聲明、調用、返回值、閉包、遞歸）

函數聲明

1. 函數聲明 function fun(){}
2. 函數表達式 fun = function fun(){}
3. IFFE void function(){console.log(1)}()
4. 構造函數 new Function('a','b','return a+b')(1,2)

函數調用

function fun(){console.log(1)};fun() 經過括號來調用

返回值

function fun(){return 1};console.log(fun()) 函數內部經過return來返回

閉包

1. 什麼是做用域
   做用域(scope)指的是變量存在的範圍。 在 es5 中的，Javascript 只有兩種做用域：一種是全局做用域，變量在整個程序中一直存在，全部地方均可以讀取；另外一種是函數做用域，變量只在函數內部存在。（es6中又新增了塊級做用域）全局做用域能夠在代碼的任何地方都能被訪問。
2. 什麼是做用域鏈
   是指做用域生成的路徑。當代碼在一個執行環境中執行時，就會建立一個做用域鏈。咱們有可能兩個 function 內都使用了 state 這個變量,咱們不但願他共享，他被限制在了本身的做用域中。
   內部環境能夠經過做用域鏈訪問全部外部環境，可是外部環境不能訪問內部環境中的任何變量和函數。
   在 js 中與做用域鏈類似的有原型鏈

3. 那麼什麼是閉包呢？
   閉包就是依賴這個特性，思考以下代碼。可讓咱們的代碼和外部環境隔離。

   var getNum = (function(){
     var sum = 0;//閉包中的變量
     return function(){
         return ++sum//內部能夠訪問
     }
   })()
   getNum();//1,這裏能夠獲取調用次數
   sum = 1000;//這裏改變的實際上是全局的，由於他拿不到閉包內的sum
   getNum();//2,這裏能夠獲取調用次數

回調函數

有的教程裏面叫高階函數，思考以下代碼

[1,2,3].map(v=>v*2);//map就是一個高階函數，經過把回調傳遞進去。對原數組進行操做。

遞歸函數

這個主要是用來沒有預期的狀況。好比遍歷一顆樹。你不知道要循環多少次。或者說當前有個dom節點，你須要找到他的一個父級.editor_main。

//求菲波那切數列
function factorial(num){
   if(num <= 1){
       return 1
   }else {
       return num * factorial(num - 1);
   }
}

後記

主講人的講稿地址
這裏也要吐槽一下本身，斷更這麼久，實在是太忙了。

參考文獻

1. JavaScript 標準庫