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)