08-javascript基礎-Object & Array & Function拓展

一、Object拓展

ES5給

Object

拓展了一些靜态方法，常用的：

1、

Object.create

• 寫法：

  Object.create(原型對象， [自有屬性])

• 作用：以指定對象為原型，建立新的對象

// 原型對象
var obj = {
  name: 'Tom',
  showName: function () {
    console.log(this.name)
  }
}

// 新對象
var obj2 = Object.create(obj, {
  name: {
    value: 'Jerry',
    writable: true // 可以被修改
  },
  age: {
    value: 18,
    configurable: true // 可以被删除
  }
})

console.log(obj2.name) // Jerry
obj2.name = 'Jerry After'
delete obj2.age
obj2.showName() // Jerry After
           

第二個屬性，添加自有屬性的配置

• value

  ：值

• writable

  ：是否可修改，預設false

• configurable

  ：是否可删除，預設false

• enumerable

  ：是否可用for in 枚舉，預設false

2、Object.defineProperties

• 寫法：

  Object.defineProperties(對象， 屬性配置對象)

• 在一個對象上定義新的屬性或修改現有屬性，并傳回該對象。
• 執行個體：

  Vue

  的雙向資料綁定

// 母資料
var obj = {
  name: 'Tom',
  age: 18
}

// 要讓這個 obj2 于 obj 做 雙向資料綁定
var obj2 = {}

// 1. 循環 母資料的屬性
for (var key in obj) {
  // 判斷是否是自己的屬性，而不是原型鍊的
  if (obj.hasOwnProperty(key)) {

    // 因為是 var ,是以需要立即執行函數儲存循環值，let 就不用
    (function (key) {
      // 2. 為obj2 增添母資料的屬性
      Object.defineProperties(obj2, {
        [key]: {
          // 用來擷取目前屬性的方法
          get: function () {
            return obj[key]
          },
          // 監視目前擴充屬性
          set: function (param) {
            obj[key] = param
          }
        }
      })
    })(key)

  }
}

// 測試是否指派成功
console.log(obj2.name)
console.log(obj2.age)

// 測試修改子資料，母資料是否修改
obj2.name = 'Jerry'
console.log(obj2.name)
console.log(obj.name)

// 測試修改母資料，子資料是否修改
obj.age = 40
console.log(obj2.age)
           

二、Array拓展

1、Array.prototype.indexof()

• 寫法：

  [].indexof(value)

• 作用：得到值在數組中的第一個下标

/* 輸出第一個 2 的下标 */
var arr = [1, 2, 3, 2, 5, 4, 5]
console.log(arr.indexof(2)) // 1
           

2、Array.prototype.lastIndexof()

• 寫法：

  [].lastindexof(value)

• 作用：得到值在數組中的最後一個下标

/* 輸出最後一個 2 的下标 */
var arr = [1, 2, 3, 2, 5, 4, 5]
console.log(arr.indexof(2)) // 3
           

3、Array.prototype.forEach()

• 寫法：

  [].forEach(function(item, index)(){})

• 作用：周遊數組

/* 輸出所有元素的值的下标 */
var arr = [1, 2, 3, 2, 5, 4, 5]

arr.forEach((v, i) => {
  console.log('值：' + v + ' 下标：' + i)
})
           

4、Array.prototype.map()

• 寫法：

  [].map(function(item, index)(){})

• 作用：周遊數組傳回一個新的數組，傳回加工後的值

/* 根據arr産生一個新的數組，要求每個元素都比原來大10 */
var arr = [1, 2, 3, 2, 5, 4, 5]

var arr2 = arr.map((v, i) => {
  return v + 10
})

console.log(arr2) // (7) [11, 12, 13, 12, 15, 14, 15]
           

5、Array.prototype.filter()

• 寫法：

  [].filter(function(item, index)(){})

• 作用：周遊數組過濾出一個新的子數組，傳回條件為true的值

/* 根據arr産生一個新的數組，要求每個元素要大于3 */
var arr = [1, 2, 3, 2, 5, 4, 5]

var arr2 = arr.filter((v, i) => {
  return v > 3
})

console.log(arr2) // (3) [5, 4, 5]

           

6、Array.prototype.reduce()

• 寫法：

  [].reduce(function(總和，目前值，目前下标，數組)(){})

• 作用：方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值

/* 計算總和 */
var arr = [1, 2, 3, 2, 5, 4, 5]

var result = arr.reduce((total, currVal, currIndex) => {
  return total + currVal
})

console.log(result) // 22
           

/* 計算平均值 */
var arr = [1, 2, 3, 2, 5, 4, 5]

var result = arr.reduce((total, currVal, currIndex, array) => {

  var length = array.length
  // 如果到了最後一位，則相加後，除以長度
  if(currIndex == length - 1) {
    return (total + currIndex) / length
  }

  return total + currVal
})

console.log(result) // 3.2857
           

三、Function拓展

1、

call

和

apply

• 作用：改變 this 指向
• 相同點：使用後立即執行函數
• 不同點：

  • call

    ：傳參接第一個後面

    fun.call(this的指向， 參數1， 參數2)

  • apply

    ：傳參為一個數組

    fun.apply(this的指向, [參數1， 參數2] )

var obj = {
  name: 'Tom'
}

function showName(param1, param2) {
  console.log(this.name)
  console.log(param1, param2)
}

showName.call(obj, '參數一', '參數二')

showName.apply(obj, ['參數一', '參數二'])
           

2、

bind

• 作用：改變 this 指向
• 于

  call 和 apply

  不同點：使用後不會立即執行
• 适用于：回調函數

var obj = {
  name: 'Tom'
}

setTimeout(function(param1, param2) {

  console.log(this.name)
  console.log(param1, param2)

}.bind(obj, '參數一', '參數二'), 1000)