一文搞懂entries的使用 bind 实现myBind 封装getElementsByClassName

_聪明勇敢有力气

已于 2022-10-18 12:06:19 修改

阅读量86

点赞数

分类专栏： js 文章标签： javascript es6 前端

于 2022-10-05 14:07:10 首次发布

本文链接：https://blog.csdn.net/weixin_65402230/article/details/127171844

版权

js 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

entries

基本使用

Array.prototype.entries
返回数组的迭代器对象

const arr = [1, 2, 3, 4, 5];
const it = arr.entries();
console.log(it);

在这里插入图片描述

const arr = [1, 2, 3, 4, 5];
const it = arr.entries();
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

在这里插入图片描述

当我们用for of 遍历arr时是无法获得对应数组元素的下标的

const arr = [1, 2, 3, 4, 5];
for (let c of arr) {
  console.log(c);
}

在这里插入图片描述
当然使用for in 是可以解决这个问题的

const arr = [1, 2, 3, 4, 5];
for (let c in arr) {
  console.log(c);
}

在这里插入图片描述
但是我们使用entries可以更好的解决

const arr = [1, 2, 3, 4, 5];
const it = arr.entries();
for (let c of it) {
  console.log(c);
}

在这里插入图片描述
此时用数组的解构方法就可以获得数组的值和下标

const arr = [1, 2, 3, 4, 5];
const it = arr.entries();
for (let c of it) {
  const [key, value] = c;
  console.log(key, value);
}

在这里插入图片描述

用在二维数组的排序

定义一个多维数组

var arr = [
	[23,4535,78,77],
	[34,67,89,9,2],
	[1,3,587,4,4,6],
	[33,51],
	[2,7,3]
]

function sorArr(arr) {
  var _it = arr.entries(),
    _doNext = true;
  while (_doNext) {
    var _r = _it.next();
    if (!_r.done) {
      _r.value[1].sort(function (a, b) {
        return a - b;
      });
      _doNext = true;
    } else {
      _doNext = false;
    }
  }
  return arr;
}

console.log(sorArr(arr));

在这里插入图片描述

bind

bind改变this的指向后返回一个新的函数不执行实例化时失效在Function.prototype上
call改变this指向后立即执行

实现myBind

      Function.prototype.myBind = function (context) {
        if (typeof this !== 'function') {
          throw new Error('Only type "function" is to be called by "myBind');
        }
        var _self = this,
          args = Array.prototype.slice.call(arguments, 1),
          tempFn = function () {};
        var fn = function () {
          var newArgs = Array.prototype.slice.call(arguments);
          _self.apply(this instanceof _self ? this : context, args.concat(newArgs));
        };
        tempFn.prototype = this.prototype;
        fn.prototype = new tempFn();
        return fn;
      };

封装getElementsByClassName

      Document.prototype.getElementsByClassName = Element.prototype.getElementsByClassName =
        document.getElementsByClassName ||
        function (className) {
          var allDoms = document.getElementsByTagName('*'),
            allDomsList = allDoms.length,
            allDomsItem,
            finialDoms = [];
          for (var i = 0; i < allDomsList; i++) {
            allDomsItem = allDoms[i];
            var classArr = trimSpace(allDomsItem.className).trim().split(' '),
              classArrLen = classArr.length,
              classArrItem;
            for (var i = 0; i < classArrLen; i++) {
              classArrItem = classArr[i];
              if (classArrItem === className) {
                finialDoms.push(classArrItem);
                break;
              }
            }
          }
          function trimSpace(str) {
            return str.replace(/\s+/g, ' ');
          }
          return finialDoms;
        };