11-create和数组的高级函数

87 阅读7分钟

1.Object.create()

1.1什么是:

基于一个现有父对象,创建一个新的子对象继承父对象。

1.2何时:

今后,如果想创建一个子对象,继承父对象,但是又没有构造函数时,就不能用new,只能用Object.create()。

1.3如何继承

var 新子对象=Object.create(父对象, {
  //给子对象添加自有属性
  //必须用defineProperties函数相同的格式:
  属性名:{
   value:属性值, 
   writable:true,
   enumerable:true,
   configurable:false
  },
  ... : { ... }
 })

保护结构6.jpg

1.4Object.create()共做了3件事:

  • 创建新对象
  • 设置新对象继承父对象
  • 强行为新对象添加自有属性

2替换this:

如果系统自动指定的this对象不是我们想要的,我们就可主动更换this指向的对象。

2.1替换一次this(call)

在一次调用函数时,临时替换一次函数中的this为指定对象。

要调用的函数.call(替换this的对象, 实参值1,...)

call1.jpg

call2.jpg

call做了三件事

  • 立刻调用一次点前的函数
  • 自动将.前的函数中的this替换为指定的新对象
  • 还能向要调用的函数中传实参值

2.2替换this时,参数是数组(apply)

如果多个实参值是放在一个数组中给的。需要既替换this,又要拆散数组再传参

要调用的函数.apply(替换this的对象, 包含实参值的数组)

call3.jpg

apply做了三件事

  • 调用.前的函数
  • 替换.前的函数中的this为指定对象
  • 先拆散数组为多个元素值,再分别传给函数的形参变量。

2.3创建函数副本,并永久绑定this(bind)

var 新函数=原函数.bind(替换this的对象)

bind做二件事

  • 创建一个和原函数一模一样的新函数
  • 永久替换新函数中的this为指定对象

如何使用新函数:

新函数(实参值,...)

bind2.jpg 强调: 因为bind()已经提前将指定对象替换了新函数中的this,则后续每次调用时,不需要再替换this了!

bind()不但可以提前永久绑定this,而且还能提前永久绑定部分实参值

var 新函数=原函数.bind(替换this的对象, 不变的实参值)

bind1.jpg

做了三件事

  • 创建一模一样的新函数
  • 永久替换this为指定对象
  • 永久替换部分形参变量为固定的实参值!

如何调用:

只需要传剩余的实参值即可!

 新函数(剩余实参值,...,...)

**强调:**被bind()永久绑定的this,即使用call,也无法再替换为其它对象了。

3.数组新增函数:

3.1every: 每个

什么是: 专门判断一个数组中是否所有元素都符合要求,只要有一个不符合要求,就返回false,结束遍历。所有者符合要求,返回true;

如何:

var 判断结果=数组.every(
	function(当前元素值,当前下标i,当前数组){//回调函数
		return 检查当前元素值是否符合要求,并返回检查结果
	}
);

every.jpg

原理:

  • every内自带for循环,自动遍历数组中每个元素

  • 每遍历一个元素,就自动调用一次回调函数

  • 每次调用回调函数时,都自动传入三个值:

      ①当前元素值
      
      ②当前下标i
      
      ③当前数组对象
    
  • 在回调函数内,判断当前元素值是否符合要求,并返回判断结果给every函数

  • 如果本次回调函数判断结果为true,则至少说明当前元素符合要求,every会自动遍历下一个元素。直到所有元素遍历完成,都没有碰到不符合要求的元素,则结束循环,整体返回true,说明当前数组中所有元素都符合要求!

  • 如果本次回调函数判断结果为false,则说明当前元素不符合要求,every立刻退出循环,直接返回false,表明当前数组中不是所有元素都符合要求。

3.2some: 一些,不要求全部

什么是: 专门检查一个数组中是否包含符合要求的元素,只要有一个符合要求,就返回true,并结束遍历,如果所有的都不符合要求,就返回false;

如何:

var 判断结果=数组.some(
	function(当前元素值, 当前下标位置, 当前数组){
		return 判断当前元素值是否符合要求
	}
)

some.jpg

原理:

  • some内自带for循环,自动遍历数组中每个元素

  • 每遍历一个元素,就自动调用一次回调函数

  • 每次调用回调函数时,都自动传入三个值:

    ①当前元素值

    ②当前下标i

    ③当前数组对象

  • 在回调函数内,判断当前元素值是否符合要求,并返回判断结果给some函数

  • 如果本次回调函数判断结果为true,则说明至少当前元素符合要求,some立刻退出循环,直接返回true,说明当前数组中包含至少一个符合要求的元素。

  • 如果本次回调函数判断结果为false,则说明当前元素不符合要求,some只能继续遍历下一个元素。如果直到遍历结束都没有发现符合要求的元素,则返回false。说明当前数组中不包含符合要求的元素。

3.3forEach

什么是: 专门代替for循环来简化遍历索引数组的特殊函数。

如何:

  数组.forEach(function(当前元素值, 当前下标i, 当前数组){
    对当前元素值执行操作
  })

foreach.jpg

原理:

  • forEach内自带for循环,自动遍历数组中每个元素

  • 每遍历一个元素,就自动调用一次回调函数

  • 每次调用回调函数时,都自动传入三个值:

    ①当前元素值

    ②当前下标i

    ③当前数组对象

  • 在回调函数内,对当前元素执行规定的操作。不需要返回值。

3.4map: 映射/对应

什么是map: 专门读取原数组中每个元素值,进行修改后,生成一个新数组返回

如何:

  var 新数组=原数组.map(
   function(当前元素值, 当前下标i, 当前数组){
     return 当前元素值修改后的新值
   }
  )

map.jpg

原理:

  • 内部创建一个新的空数组等待

  • map内自带for循环,自动遍历原数组中每个元素

  • 每遍历一个元素,就自动调用一次回调函数

  • 每次调用回调函数时,都自动传入三个值:

    ①当前元素值

    ②当前下标i

    ③当前数组对象

  • 在回调函数内,对当前元素值进行修改,并将修改后的新值返回给map函数

  • map函数接到新值后,自动放入新数组中对应的位置。

  • 遍历结束,map返回新数组。原数组保持不变。

3.5过滤filter:

什么是: 复制出数组中符合要求的个别元素,放入新数组中返回。

如何:

  var 新数组=数组.filter(
  function(当前元素值, 当前下标i, 当前数组){
   return 判断当前元素值是否符合要求
  }
  )

filter.jpg

原理:

  • 内部创建一个新的空数组等待

  • filter内自带for循环,自动遍历原数组中每个元素

  • 每遍历一个元素,就自动调用一次回调函数

  • 每次调用回调函数时,都自动传入三个值:

    ①当前元素值

    ②当前下标i

    ③当前数组对象

  • 在回调函数内,判断当前元素值是否符合要求,并返回判断结果为filter函数

  • 如果当前元素的判断结果为true,说明当前元素符合条件,则filter会将当前元素追加到新数组中保存

  • 否则如果当前元素的判断结果为false,说明当前元素不符合要求,则filter什么也不干,继续遍历下一个元素.

3.6汇总: (仅以求和举例)(reduce)

什么是: 对数组中所有元素进行统计,并放回统计结果的函数

如何:

 var 结果=数组.reduce(
  function(捐款箱, 当前元素值, 当前下标i, 当前数组){
      return捐款箱+当前元素值
  },
  起始值
 )

reduce.jpg

原理:

  • 内部创建一个变量,保存汇总的起始值——捐款箱变量

  • reduce内自带for循环,自动遍历原数组中每个元素

  • 每遍历一个元素,就自动调用一次回调函数

  • 每次调用回调函数时,都自动传入4个值:

    i. 捐款箱变量中的临时汇总值

    ii. 当前元素值

    iii. 当前下标i

    iv. 当前数组对象

  • 在回调函数内,将临时汇总值与当前元素值相加,算出新的汇总值,再返回给reduce

  • reduce拿到新的汇总值之后,放回捐款箱变量中暂存,为继续累加下一个值做准备。