《JavaScript語言精粹》讀書筆記

時間 2019-12-07

原文原文鏈接

第三章對象

檢索

var obj = {a: 1, b:2, c:3}
obj[a] // obj.a
// 檢索結果是undefined 時用 || 或 && 避免錯誤
obj[a] && obj[b]
複製代碼

反射

var obj = {
  number: 111,
  airline: 'dsdsds'
}

// hasOwnProperty檢測對象的屬性
console.log(typeof obj.number) // number
console.log(obj.hasOwnProperty('number')) // true
console.log(obj.hasOwnProperty('number1')) // false

複製代碼

枚舉

第四章函數

調用

js中一共有4中調用模式：javascript

方法調用模式
函數調用模式
構造器調用模式
apply調用模式

//1 方法調用模式
	var myObject = {
		value: 0,
		increment: function(inc) {
			this.value += typeof inc === 'number' ? inc: 1;
		}
	}
	myObject.increment();
document.writeln(myObject.value)/// 1
	myObject.increment(2);
	document.writeln(myObject.value) // 3
	
	// 方法可使用this訪問本身所屬的對象，因此他能從對象中取值或者對對象進行修改。
	// this到對象的綁定發生在調用的時候。
複製代碼

函數調用模式

//2 函數調用模式
		var add = function(a, b) {
			return a+ b;
		}
		var sum = add(3, 4); // 7

			// 給myObject 增長一個double方法
		myObject.double = function() {
			var that = this;
			var helper = function () {
				that.value = add(that.value, that.value);
			}
			helper(); // 以函數的形式調用helper
		}
		// 以方法的形式調用double
		myObject.double();
		console.log(myObject.value) // 6
		// 方法調用函數時，this被綁定到全局對象， 解決方案 ： 定義一個變量，將this賦值給它，name內部函數就能夠經過that訪問到this
複製代碼

構造器調用模式不推薦

//3 構造器調用模式 不推薦
		var Quo = function(string) {
			this.status = string;
		}
		// 給quo的全部實例提供一個名爲get_status的公用方法
		Quo.prototype.get_status = function() {
			return this.status;
		}

		// 構造一個quo的實例
		var myQuo = new Quo('confused');
    document.writeln(myQuo.get_status()) // confused
    // 若是在一個函數前面帶上new 來調用，那麼背地裏將會建立一個鏈接到該函數的prototype成員的新對象，同時this會被綁定到那麼新對象上。

  // 使用閉包的方法來調用
    var quo = function(status) {
    return {
      get_status: function() {
        return status
      }
    }
  }
  var myQuo = quo('amazed')
  console.log(myQuo.get_status()) //amazed
複製代碼

Apply調用模式

// 4 Apply調用模式
		// Apply方法讓咱們構建一個參數數組傳遞給調用的函數，它容許咱們選擇this的值。apply方法接收兩個參數，第1個是要綁定給this的值，第2個就是一個參數數組

		var array =[3, 4];
		var sum = add.apply(null, array);
		alert(sum) // 7
		// 構造一個包含status成員的對象
		var statusObject = {
			status: 'A-OK'
		}
		// statusobject並無繼承自Quo.protoptype,但咱們能夠在statusobject上調用
		// get_status方法，儘管statusObject並無一個名爲get_status的方法
		var status = Quo.prototype.get_status.apply(statusObject);
		console.log(status) // A-OK
複製代碼

擴充類型功能

// js容許給語言的基本類型擴充功能； 能夠給object。prototype添加方法，可讓該方法對全部對象均可用。
    // 這樣的方式對函數，數組，字符串，數字，正則表達式和布爾值一樣適用
    Function.prototype.method= function(name, func) {
      this.prototype[name] = func
      return this
    }
    // 經過給function.prototype 增長一個method方法，咱們下次給對象曾加方法的時候就沒必要鍵入prototype這幾個資產，省略掉了一點麻煩
    // 1 給Number.prototype 增長一個integer方法來改善它，他會根據數字的正負來判斷是使用Math.ceiling 仍是Math.floor
    Number.method('integer', function() {
      return  Math[this<0 ? 'ceil': 'floor'](this)
    })
    document.writeln((-10/3).integer()) // -3
複製代碼

做用域

var foo = function() {
	var a =3, b=5;
	var bar = function() {
		var b=7, c=11;
		// a =3 b =7 c=11
		a+=b+c // a=21 b=7 c= 11
	}
	// a=3 b=5 c undefined
	bar()
	// a=21 b 5
}
複製代碼

閉包

// 建立一個名爲quo的構造函數
    // 它構造帶有get_status方法和status私有屬性的一個對象
    var quo = function (status) {
      return {
        get_status: function () {
          return status
        }
      }
    }
    // 構造一個quo實例
    var myQuo = quo('amazed')
    console.log(myQuo.get_status()) //amazed
    // 這個quo函數設計成無需再前面加上new來使用，因此名字也沒有首字母大寫。當咱們調用quo時，它返回包含
    // get_status方法並非訪問該參數的一個副本，它訪問的就是該參數自己。這是可能的；
    // 由於該函數能夠訪問它被建立時所處的上下文環境。 這就稱爲閉包。
複製代碼

// 定義一個函數，它設置一個DOM節點爲黃色，而後把它漸變爲白色
var fade = function (node) {
      var level = 1;
      var step = function () {
        var hex = level.toString(16);
        node.style.backgroundColor = '#FFFF' + hex + hex;
        if (level < 15) {
          level += 1;
          setTimeout(step, 100);
        }
      }
      setTimeout(step, 100);
    }
    fade(document.body) 
複製代碼

記憶

// 函數能夠將先前操做的結果記憶在某個對象裏，從而避免無謂的重複運算。這種優化被稱爲記憶
    // 實現一個遞歸函數來計算Fibonacci數列
    // 一個斐波那契數列 數字是以前兩個斐波那契數字之和。 最前面的兩個數字是0 和1 
    var fibonacci = function(n) {
      return n<2 ? n : fibonacci(n-1) +fibonacci(n-2)
    }
    for(var i=0;i<=10; i+=1){
      document.writeln('//'+i+':' +fibonacci(i))
      //0:0 //1:1 //2:1 //3:2 //4:3 //5:5 //6:8 //7:13 //8:21 //9:34 //10:55
    } 
複製代碼

// 優化
    // 咱們在一個名爲memo的數組裏保存咱們的存儲結果，存儲結果能夠隱藏在閉包中。當函數被調用時，
    // 這個函數首先檢查結果是否已存在，若是已經存在，就當即返回這個結果。
    var fibonacci =function(n) {
      var memo = [0,1]
      var fib=function(n) {
        var result =memo[n]
        if(typeof result !== 'number') {
          result = fib(n-1) +fib(n-2)
          memo[n]=result
        }
        return result
      }
      return fib
    }()
    for(var i=0;i<=10; i+=1){
      document.writeln('//'+i+':' +fibonacci(i))
      //0:0 //1:1 //2:1 //3:2 //4:3 //5:5 //6:8 //7:13 //8:21 //9:34 //10:55
    }
複製代碼

// 推廣
    // 咱們memoizer函數取得一個初始化memo數組和formula函數。它返回一個管理meno存儲和在須要時調用formula函數的recur函數。
    // 咱們把這個recur函數和它的參數傳遞給formula函數
    var memoizer =function (memo, formula){
      var recur = function(n){
        var result = memo[n]
        if(typeof result !== 'number') {
          result = formula(recur, n)
          memo[n] =result
        }
        return result
      }
      return recur
    }
    // 如今，咱們可使用memoizer函數來定義fibonacci函數， 提供其初始的memo數組和formula函數
    var fibonacci = memoizer([0,1], function(recur, n) {
      return recur(n-1) +recur(n-2)
    })

    var factorial = memoizer([1,1], function(recur, n) {
      return n * recur(n-1)
    })
複製代碼

js易混淆的地方

// 區分數組和對象
    var is_array = function(value) {
      return Object.prototype.toString.apply(value) === '[object Array]'
    }
    console.log(is_array([])) // true
複製代碼

第八章方法

Array

array.concat()

// concat方法產生一個新數組，它包含一份array的淺複製並把一個或多個參數item附加在後面，若是參數item是一個數組
    // name它的每一個元素會被分別添加 相似於 array.push()
    var a = [1,2,3]
    var b= [4,5,6]
    console.log(a.concat(b, true)) //[1, 2, 3, 4, 5, 6, true]
複製代碼

array.join()
array.pop()

// pop移除數組中最後一個元素並返回改元素，若是array是空，它返回undefined
    var a = [1,2,3]    
    var c= a.pop()
    console.log(c) // 3
    console.log(a)
複製代碼

array.push()java
array.reverse()node
array.shift()正則表達式
array.slice()數組
array.sort() 排序閉包

var n = [4,6,7,1,5]
    n.sort(function(a,b) {
      return a-b
    })
    console.log(n) // [1, 4, 5, 6, 7]

    var m = ['aa','bb', 'a', 4,8,16,23,42]
    m.sort(function(a, b) {
      if(a ===b) {
        return 0
      }
      if(typeof a === typeof b) {
        return a< b? -1 : 1
      }
      return typeof a <typeof b ? -1 :1
    })
    console.log(m) //[4, 8, 16, 23, 42, "a", "aa", "bb"]
複製代碼

array.splice()
array.unshift()

Function

function.apply(thisArg, argArray) apply方法調用function，傳遞一個會綁定到this上的對象和一個可選的數組做爲參數。 apply方法被用在apply調用模式中

Function.method('bind', function(that) {
      // 返回一個函數，調用這個函數就像調用那個對象 的一個方法
      var method = this,
      slice = Array.prototype.slice,
      args = slice.apply(arguments, [1])
      return function() {
        return method.apply(that, args.concat(slice.apply(arguments, [0])))
      }
    })
    var x = function() {
      return this.value
    }.bind({value: 666})
    alert(x())
複製代碼

object.hasOwnProperty(name) 若是這個object包含一個名爲name的屬性，n那麼hasOwnProperty方法返回true

RegExg

regexp.exec(string) 若是匹配成功regexp和字符串string，它會返回一個數組。數組中的下標未0的元素將包含正則表達式regexp匹配的子字符串app

regexp.test(string) 返回 true 和false

String

string.charAt()
string.charCodeAt()
string.concat()
string.indexOf() 返回 -1 未找到找到返回位置
string.lastIndexOf()
string.match(regexp) 字符串和正則匹配和全局匹配 g
string.replace(searchValue, replaceValue) 對string進行查找和替換操做，並返回一個新的字符串。

var reg = /\((\d{3})\)/g
var p = '(555)666-1212'.replace(reg, '$1-')
console.log(p) //555-666-1212
複製代碼

string.search(regexp) search方法和indexOf方法相似，接收一個正則表達式對象做爲參數而不是一個字符串找到匹配返回第一匹配的位置，沒有返回-1

var text = 'and in it he says "Any damn fool could'
var pos = text.search(/["']/) // 18
複製代碼

string.slice(start, end) 若是start/end是負數，他將與string.length相加。end參數是可選參數，默認string.length
string.split(separator, limit) 把string分割成片斷來建立一個字符串數組。
string.substring(start, end) 和slice()的用法同樣，不能處理負數參數
string.toLocaleLowerCase()
string.toLocaleUpperCase()