开发者问题收集

未捕获的类型错误：无法读取 JavaScript 函数中的 null(…) 属性“1”

2016-11-11
57691
javascript

此方法是模块的一部分；尽管有错误……

未捕获的类型错误：无法读取 null(…) 的属性“1”

在一定程度上有效，但似乎阻止了模块上的其他方法。

这是一个包含整个模块的 fiddle 。 

searchURL: function() {
  function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
  }
  var link, url, parser, newPathName = '',
    newstr = '',
    doc = document,
    avon_rep_container = doc.getElementById('avon_rep_container'),
    avon_rep_container_id,
    avon_rep_container_links,
    avon_rep_container_images,
    documentTableWrapper,
    docBodyFirstChild,
    full_width_container_1 = doc.getElementsByClassName('full-width-container')[1],
    full_width_img_class_el = doc.getElementsByClassName('full-width-img')[0];
  if (!avon_rep_container) {
    avon_rep_container = doc.createElement('div');
    avon_rep_container.setAttribute('id', 'avon_rep_container');
    avon_rep_container.className = 'container-avon-representative-news';
    avon_rep_container_links = avon_rep_container.getElementsByTagName('a');
    avon_rep_container_id = doc.getElementById('avon_rep_container');
    docBodyFirstChild = doc.body.firstChild;
    documentTableWrapper = doc.getElementsByClassName('marginfix')[0];
    avon_rep_container.appendChild(documentTableWrapper);
    doc.body.appendChild(avon_rep_container);
    full_width_container_1.removeChild(full_width_container_1.getElementsByTagName('table')[0]);
    full_width_img_class_el.removeAttribute('style');
  } else {
    avon_rep_container_links = doc.getElementById('avon_rep_container').getElementsByTagName('a');
  }
  avon_rep_container_images = avon_rep_container.getElementsByTagName('img');
  for (var i = 0; i < avon_rep_container_images.length; i++) {
    var images = avon_rep_container_images[i];
    images.src = '/dam/avon-us/landing-pages/rep-news/' + images.src.split('/').pop();
    if (avon_rep_container_images[i].width == "538") {
      avon_rep_container_images[i].style.width = "538px";
    }
    if (avon_rep_container_images[i].width == "258") {
      avon_rep_container_images[i].style.width = "258px";
    }
    avon_rep_container_images[i].style.width = 'inherit';
    avon_rep_container_images[i].style.margin = 'auto';
  }
  //for (var i = 0, len = arguments.length; i < len; i++) { // Using a for loop to allow unlimited arguments to be passed in
  //instead collect all necessary urls
  url = getURL(arguments); //[i]); // We are calling the publicApi.getURL() method and passing the looped argument from above
  for (var j = 0, jlen = avon_rep_container_links.length; j < jlen; j++) { // This loop goes over the whole documents links...
    link = avon_rep_container_links[j];
    var domain = link.href.match(/(https?:\/\/.+?)\//)[1];
    if ((url.indexOf(domain) !== -1) && (!link.href.match(/\.(pdf)/gi))) { // //...and we are checking each argument passed in to see if it matches the object value stored in the getURL function e.g. like a switch statement..
      parser = document.createElement('a'); //...if so we are essentially adding a blank tag to all the documents in the document
      parser.href = link.href;
      link.setAttribute('target', '_self');
      newPathName = parser.pathname;
      console.log(domain);
      if (newPathName.search(/Executive|District|Division|National/) != -1) { // Added check for these strings for SMO page
        newPathName = newPathName.split('/').pop();
        newstr = newPathName;
      } else {
        newstr = newPathName;
      }
      link.href = newstr;
    } else {
      link.setAttribute('target', '_blank');
    }
  }
  //}
}

有人能解释一下这个错误在我的模块中意味着什么吗？我似乎无法理解它。

谢谢，任何帮助都将不胜感激！

更新

这是错误发生的地方： 

var domain=link.href.match(/(https?:\/\/.+?)\//)[1];
3个回答

String#match 返回 null （无匹配）或包含匹配项的数组。 

var domain = link.href.match(/(https?:\/\/.+?)\//)[1];
//                     ^^^^^

使用 check 解决 

var domain = link.href.match(/(https?:\/\/.+?)\//);

if (domain) {
    // do something with domain[1]
}
Nina Scholz
2016-11-11

根据 string.match() :

Return value

An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.

正则表达式应匹配字符串以及您拥有的协议和域（即用括号 (https?:\/\/.+?) 括起来的分组）。您可以确保返回值不为空（因此它应该是一个数组），并且在尝试访问索引 1（因为第一个索引应该是 0）之前具有多个元素，如下所示： 

var matches = link.href.match(/(https?:\/\/.+?)\//);
if (matches !== null && matches.length > 1) {

因此，请看此示例： 

function match(link) {
    var matches=link.href.match(/(https?:\/\/.+?)\//);
    if (matches !== null && matches.length > 1) {
        var protocolAndDomain = matches[1];
          console.log('protocol and domain: ',protocolAndDomain );
    }
    else {
          console.log('no matching protocol and domain');
    }
}
var link = { href: 'stackoverflow.com'};
match(link); //should find no matches

var link2 = { href: 'https://domain.com/'};
match(link2); //should match https://domain.com

我使用术语 协议和域 ，因为表达式在域之前查找协议（即 https:// ）。有关 URL 各部分的更多信息， 请参阅此 MDN 页面 。

Sᴀᴍ Onᴇᴌᴀ
2016-11-11

您可以使用 if 语句来检查匹配项是否为空，就像其他答案所提到的那样。

或者，您可以使用逻辑或运算符将其放到一行上并使其更清晰，例如

var domain = (link.href.match(/(https?:\/\/.+?)\//) || [])[1];

您收到类型错误，因为当匹配为假时，函数返回 null 并且您无法访问 null 的索引 1，因为它不是数组。

null[1] 导致类型错误

通过使用逻辑或运算符 || ，当第一个条件为假时，域变量设置为第二个条件。

因此，当匹配为假时，结果默认为空数组 [] 并且您可以访问空数组的任何索引而不会出现错误，并且导致 undefined

当匹配为 false 时，这将使 domain = undefined 。

我真的希望类型错误不是 JS 中的问题，尤其是对象。我似乎每隔一行就添加了很多 if 语句和额外的代码来处理类型错误。

TheKnightCoder
2019-01-16