While循环的一个实用的应用场景

Posted on   |   In   |     |  

前言

    像while这样的循环相信大家会经常用到它的最基本的用法，但是一些技巧性的用法可能都很少在意，下面分享一下我使用while循环的一个小技巧性用法，也是让自己时刻注意要发散性思维的去coding！

这主要是围绕push和apply方法来说,就是在ie8以下，apply方法的第二个参数如果是伪数组的话会报错

    先来看下面这段代码

1
2
3
4
5
6
7
8
9
<!-- 未使用apply的时候，也就是未启用调用上下文模式 -->
var arr = [1,2,3];
arr.push([4,5,6]);
console.log('arr',arr);
<!-- 上面的输出结果为：arr [1, 2, 3, [4,5,6]] -->
var arr1 = [1,2,3];
arr1.push.apply(arr,[4,5,6]);
console.log('arr1',arr1);
<!-- 上面的输出结果为：arr1 [1, 2, 3, 4, 5, 6] -->

上面涉及到了apply的用法，其实apply用法并不难，但是它的作用还是不小的，在Javascript中很多优秀的类库当中都能看到它的身影，因为它具有一个强大的作用，就是“调用上下文”；
用法如下：

1
2
apply(上下文，[arg1, arg2, ...])
fn.apply(a,[1,2]);

解析：apply的参数，第一个参数表示指定的this，第二个参数要求是数组，表示函数的参数,在上面也就是1,2时fn的参数，也就是相当于a.fn(1,2);也就是以a作为上下文调用fn，然后fn里面传入了1和2这两个参数；
这是封装了一个push方法来解决apply第二个参数是伪数组的兼容问题；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- context是指的上下文，大家可以先不用在意这个context，只需要知道`context.getElementsByTagName(tag)`获得了一个伪数组。 -->
var getTag = function(tag,context,results) {
  results = results || [];
  try {
    results.push.apply(results,context.getElementsByTagName(tag));
  } catch(e) {
    myPush(results,context.getElementsByTagName(tag));
  }
  return results;
};
var myPush = function(target,els) {
      var j = target.length,
          i = 0;
      while((target[j++] = els[i++])){} //这里的els[i++]总会有取值完的时候，那时候就会变为假，自动跳出while循环，这也                                    算是while循环的一个小技巧 ，
      target.length = j - 1; //因为伪数组的length不会自己增加，所以手动赋值一下，避免出错
    }

结语

    记录下这个小场景也是为了警醒自己在工作当中解决问题的时候要学会发散思维的去解决一些兼容问题，还有一些应用场景。