关于读取数组里的对象内容

Question

  $(document).ready(function(){
    var dataId=$("h2").attr("data-id");
    var arr= new Array(
      {
        "color":"#fb6964",
        "text":"真理惟一可靠的标准就是永远自相符合",
        "author":"欧文"
      },
      {
        "color":"#9b59b6",
        "text":"我需要三件东西：爱情友谊和图书。然而这三者之间何其相通！炽热的爱情可以充实图书的内容，图书又是人们最忠实的朋友",
        "author":"蒙田"
      },
      {
        "color":"#73a867",
        "text":"世界上一成不变的东西，只有“任何事物都是在不断变化的”这条真理",
        "author":"斯里兰卡"
      },
       {
        "color":"#16a085",
        "text":"过放荡不羁的生活，容易得像顺水推舟，但是要结识良朋益友，却难如登天",
        "author":"巴尔扎克"
      },
      {
        "color":"#000",
        "text":"时间是一切财富中最宝贵的财富",
        "author":"德奥弗拉斯多"
      }
      );
    $(".btn").on("click",function(){
      if (dataId!==4) {
        $("h2").html(arr[dataId+1]["text"]).attr("data-id",dataId+1);
        $("body").css("background-color",arr[dataId+1]["color"]);
        $(".btn").css("background-color",arr[dataId+1]["color"]);
        $(".author").text(arr[dataId+1]["text"]);
      }
      console.log(arr[dataId-1].text);
    });
  });

为什么无法读取text的内容？我把中括号改为点号，也同样无法读取对象里面的属性内容，这个是什么原因呢？而console.log却能够正常打印出来

Answer 1

你这个判断条件有问题啊，dataId你获取到的是个字符串，你在对比的时候用了严格对比模式会一直返回true的

Answer 2

是不是类型不对，你是用!==判断此时dataID是string，而你判断的是Number类型的4～～ 建议 dataId = Number($('h2').data('id'));试试

Answer 3

数组越界了吧， 你ID一直加 肯定要越界

Answer 4

console.log(arr[dataId-1].text);
这一行前面console.log(dataId)看看。

Answer 5

发生这种现象应该是数组越界了，你的数组长度为5，最多只能取到arr[4]，当dataId超过4时，自然读取不到数组相应属性，建议你可以在判断时console.log一下dataId。
还有一种可能是你的dataId类型为string类型，最好用typeof判断一下你的dataId是为数值类型还是string类型，你用的是严格相等!==，若类型不同，判断条件将会一直为true，而数值类型和string类型相加结果将会是字符串拼接，例如1+'1'结果将为是'11',这种情况自然也会发生数组越界，建议用Number(dataId)进行强制类型转换

Answer 6

您好，使用数组获取数据且索引不确定的时候一定要注意数组越界。比如：
`var dataId = 0;
console.log(arr[dataId-1].text); // Uncaught TypeError: Cannot read property 'text' of undefined(…)`

Answer 7

我猜是dataId = 0,然后dataId-1变成arr[-1].text无法获取对象属性导致的