【template的{{each }}】,【jQuery的each】,【EcmaScript 5的forEach】

  1. 区别
1. each 是 art-template 的模板语法,专属的只能在模板字符串中使用
  {{each 数组}}
  <li>{{ $value }}</li>
  {{/each}}


2. jQuery的 each,一般用于遍历 jQuery 选择器选择到的伪数组实例对象
  $.each(数组, function)
  $('div').each(function) 

  # 使用场景,$('div')是伪数组是对象,伪数组是对象,对象的原型链中没有 forEach, 对象的原型链是 Object.prototype
    1. 方便的遍历 jQuery 元素
    2. 可以在不兼容 forEach 的低版本浏览器中使用 jQuery 的 each 方法

  # 代替方法:  
    ;[].slice.call($('div')).forEach(function (item) {console.log(item)})
      1. slice(start,end)接受两个参数,start和end是将一个数组从start项开始截取到end项但不包含end项
      2. call(thisArg,arg1, arg2, ...)thisArg代表当前函数执行时this的指向,args为函数的参数(


3. forEach 
  forEach 是 EcmaScript 5 中的一个数组遍历函数,是 JavaScript 原生支持的遍历方法 可以遍历任何可以被遍历的成员,由于是 EcmaScript 5 中的,所以低版本浏览器不支持
  jQuery 的 each 方法和 forEach 几乎一致

  1. 伪数组概念
# 1.
var obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}
  
;[].push.call(obj, 'd')
console.log([].slice.call(obj))
  
;[].forEach.call(obj, function (num, index) {
    console.log(num)
})



# 2.
function test() {
    return  [].slice.call(arguments)
}
var list = test(4, 5, 6) // [4,5,6]
console.log(list)

# 【重要理解】
通过call()将[].slice中的this指向了arguments,使其拥有了slice方法。
slice()如果不传参则是从第0项开始截取到length-1项并返回截取后的数组[4,5,6]。
上面其实就是省略了call()的第二个参数,你可以把它看作为[].slice.call(arguments,0)

  1. slice更加详细的解释

Array.prototype.mySlice = function () {
  var start = 0
  var end = this.length
  if (arguments.length === 1) {
    start = arguments[0]
  } else if (arguments.length === 2) {
    start = arguments[0]
    end = arguments[1]
  }
  var tmp = []
  for (var i = start; i < end; i++) {
    // fakeArr[0]
    // fakeArr[1]
    // fakeArr[2]
    tmp.push(this[i])
  }
  return tmp
}

var fakeArr = {
  0: 'abc',
  1: 'efg',
  2: 'haha',
  length: 3
}

// 所以你就得到了真正的数组。 
[].mySlice.call(fakeArr)
原文地址:https://www.cnblogs.com/amize/p/14883490.html