• 【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)
    
  • 相关阅读:
    bind(),live(),delegate(),on()绑定事件方式
    3 《锋利的jQuery》jQuery中的DOM操作
    表格功能
    5.2 《锋利的jQuery》jQuery对表格的操作(选项卡/换肤)
    4.1 《锋利的jQuery》jQuery中的事件
    5.1 《锋利的jQuery》jQuery对表单的操作
    4.2 《锋利的jQuery》jQuery中的动画
    2 《锋利的jQuery》jQuery选择器
    回流(reflow)与重绘(repaint)
    BOX2d绘制曲线
  • 原文地址:https://www.cnblogs.com/amize/p/14883490.html
Copyright © 2020-2023  润新知