解决findindex、includes等不兼容ie的解决方案附代码

最新推荐文章于 2024-04-24 14:45:46 发布

m0_45456399

最新推荐文章于 2024-04-24 14:45:46 发布

阅读量4.7k

点赞数 2

分类专栏： ie兼容文章标签： javascript es6 chrome 前端 edge

本文链接：https://blog.csdn.net/m0_45456399/article/details/106527646

版权

ie兼容专栏收录该内容

3 篇文章 0 订阅

订阅专栏

解决findindex、includes兼容ie方法附代码

前提：今天遇到兼容性问题，写了半天代码，在谷歌上测试没问题，然而被告知还要考虑IE的兼容！
瞬间爆炸，记得写了好多findIndex、includes 可怎么办，百度了好多解决办法，也没有解决。翻到了个好的网站，上面的解决办法，参考了下，下面进入正题。

上代码！

//这个是判断 没有findindex 方法的
if (!Array.prototype.findIndex) {

        Object.defineProperty(Array.prototype, 'findIndex', {
            value: function(predicate) {
                // 1. Let O be ? ToObject(this value).
                if (this == null) {
                    throw new TypeError('"this" is null or not defined');
                }

                var o = Object(this);

                // 2. Let len be ? ToLength(? Get(O, "length")).
                var len = o.length >>> 0;

                // 3. If IsCallable(predicate) is false, throw a TypeError exception.
                if (typeof predicate !== 'function') {
                    throw new TypeError('predicate must be a function');
                }

                // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
                var thisArg = arguments[1];

                // 5. Let k be 0.
                var k = 0;

                // 6. Repeat, while k < len
                while (k < len) {
                    // a. Let Pk be ! ToString(k).
                    // b. Let kValue be ? Get(O, Pk).
                    // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
                    // d. If testResult is true, return k.
                    var kValue = o[k];
                    if (predicate.call(thisArg, kValue, k, o)) {
                        return k;
                    }
                    // e. Increase k by 1.
                    k++;
                }

                // 7. Return -1.
                return -1;
            }
        });
    }

//这个是判断 没有includes 方法的
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(valueToFind, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(valueToFind, elementK) is true, return true.
        if (sameValueZero(o[k], valueToFind)) {
          return true;
        }
        // c. Increase k by 1. 
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}

看你需要哪个就复制哪个加上之后还是不行，对不对！
还需要引入babel

//并把类型改为 type="text/babel" 
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"></script>

接下来就是奇迹的时刻了！，在ie上运行你会发现，可以用了，谷歌也没问题！
附上完整代码，。有兴趣的同学可以深入研究下
在这里插入图片描述

<body>
    <h1 id="box1"></h1>
    <h1 id="box2"></h1>
</body>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    let arr1 = [[11,22,33], [44,55,66],[77,88,99],[1010,1111,1212]]
    let arr2 = [1,2,3,4,5,6,7,8,9]
    // 兼容ie数组没有findIndex方法
    if (!Array.prototype.findIndex) {

        Object.defineProperty(Array.prototype, 'findIndex', {
            value: function(predicate) {
                // 1. Let O be ? ToObject(this value).
                if (this == null) {
                    throw new TypeError('"this" is null or not defined');
                }

                var o = Object(this);

                // 2. Let len be ? ToLength(? Get(O, "length")).
                var len = o.length >>> 0;

                // 3. If IsCallable(predicate) is false, throw a TypeError exception.
                if (typeof predicate !== 'function') {
                    throw new TypeError('predicate must be a function');
                }

                // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
                var thisArg = arguments[1];

                // 5. Let k be 0.
                var k = 0;

                // 6. Repeat, while k < len
                while (k < len) {
                    // a. Let Pk be ! ToString(k).
                    // b. Let kValue be ? Get(O, Pk).
                    // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
                    // d. If testResult is true, return k.
                    var kValue = o[k];
                    if (predicate.call(thisArg, kValue, k, o)) {
                        return k;
                    }
                    // e. Increase k by 1.
                    k++;
                }

                // 7. Return -1.
                return -1;
            }
        });
    }
    //兼容没有includes方法
    if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(valueToFind, fromIndex) {

      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }

      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;

      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }

      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(valueToFind, elementK) is true, return true.
        if (sameValueZero(o[k], valueToFind)) {
          return true;
        }
        // c. Increase k by 1. 
        k++;
      }

      // 8. Return false
      return false;
    }
  });
}
    let index1 = arr1.findIndex(v => {
        return v.includes(1212);
    })
    let index2 = arr2.findIndex(v => {
        return v===5;
    })
    document.getElementById('box1').innerText = index1
    document.getElementById('box2').innerText = index2
</script>

最后附上参阅的网址，有需要兼容其他方法的可以去学习 =>https://developer.mozilla.org/zh-CN/.
如果解决了你的问题，麻烦点个赞呗

m0_45456399

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
解决findindex、includes等不兼容ie的解决方案附代码

解决findindex、includes兼容ie方法附代码前提：今天遇到兼容性问题，写了半天代码，在谷歌上测试没问题，然而被告知还要考虑IE的兼容！瞬间爆炸，记得写了好多findIndex、includes 可怎么办，百度了好多解决办法，也没有解决。翻到了个个好的网站，上面的解决办法，参考了下，下面进入正题。上代码！//这个是判断没有findindex 方法的if (!Array.prototype.findIndex) { Object.defineProperty(Arra
复制链接

扫一扫