undefined是否會(huì)變?yōu)閚ull原理解析

更新時(shí)間：2023年02月10日 08:45:13 作者：我的div丟了腫么辦

這篇文章主要為大家介紹了undefined是否會(huì)變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

series data 中的數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化嗎？
為什么會(huì)series data 中 undefined 會(huì)變?yōu)?null
求證：undefined 會(huì)變?yōu)?null是 vue 的鍋
小心求證數(shù)據(jù)由 undefined 變?yōu)?null
我們看下：原生js中 null 在視圖上是否也會(huì)變?yōu)榭兆址畣幔?/a>
我為什會(huì)糾結(jié)在視圖上 undefined 發(fā)生了變化呢？

總結(jié)

echarts 會(huì)將 series data中的數(shù)據(jù)并不是你想的那樣簡(jiǎn)單

我們很多小伙伴都使用過(guò)echarts。

然后 series：[{ data:[] }] 中的數(shù)據(jù)可能并沒(méi)有我們想的那樣簡(jiǎn)單

為什么會(huì)這樣說(shuō)：因?yàn)槟憧聪旅孢@個(gè)例子絕對(duì)會(huì)然你有所收獲。

series data 中的數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化嗎？

<template>
  <div>
    <!-- 第1處：小伙伴們覺(jué)得這里數(shù)組中的值是否是
      [undefined, undefined, undefined, undefined,
      undefined, undefined, undefined]
    -->
    <h4>{{ objInfo.data1 }}</h4>
    <div id='demo1'></div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      objInfo: {
        data1: [undefined, undefined, undefined, undefined,
        undefined, undefined, undefined],
        xdata1: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    }
  },
  mounted() {
    var myChart1 = echarts.init(document.getElementById("demo1"));
    let option1 = {
      xAxis: {
        type: 'category',
        data: this.objInfo.xdata1
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: this.objInfo.data,
          type: 'line',
          smooth: true
        }
      ]
    };
    //第2處：小伙伴們覺(jué)得這里應(yīng)該輸出的數(shù)組的值是什么呢？
    console.log('控制臺(tái)輸入的數(shù)據(jù)', this.objInfo.data1)
    myChart1.setOption(option1); 
  }
}
</script>

大家覺(jué)得頁(yè)面中

第1處： <h4>{{ objInfo.data1 }}</h4> 數(shù)組中的值是否是 undefined ？

很多小伙伴都會(huì)覺(jué)得這里應(yīng)該是

[undefined, undefined, undefined, undefined,
undefined, undefined, undefined] 是這樣還是不是這樣？

第2處：小伙伴們覺(jué)得這里應(yīng)該輸出的數(shù)組的值是什么呢？

console.log('控制臺(tái)輸入的數(shù)據(jù)', this.objInfo.data1)
[undefined, undefined, undefined, undefined,
undefined, undefined, undefined] 是這樣還是不是這樣？

小伙伴們想好結(jié)果了嗎？如果想好了。請(qǐng)看下面的圖片

為什么會(huì)series data 中 undefined 會(huì)變?yōu)?null

有的小伙伴會(huì)說(shuō)：是不是echarts底層在更改了數(shù)據(jù)？
有可能，我們使用watch去監(jiān)聽(tīng)一下，如果更改數(shù)據(jù)肯定會(huì)被我們監(jiān)聽(tīng)到
watch: {
  "obj.data1": function (newval, oldval) {
    console.log('oldval', oldval)
    console.log('newval', newval)
  },
  deep: true,
},

通過(guò)上面的圖片我們可以知道，echarts并沒(méi)有更改數(shù)據(jù).否者會(huì)觸發(fā)watch

說(shuō)明并不是echarts底層給我們改了數(shù)據(jù)。

那數(shù)據(jù)從undefined 變?yōu)?null 肯定是有一個(gè)地方改動(dòng)了。

如果不是echarts，那就是vue。難道真的是vue給我們改了數(shù)據(jù)？

求證：undefined 會(huì)變?yōu)?null是 vue 的鍋

<template>
  <div>
    <h3>數(shù)據(jù)會(huì)變?yōu)閡nll嗎</h3>
    <h2>{{ data2 }}</h2>
   </div>
</template>
export default {
  data() {
    return {
      data2:[undefined,undefined]
    }
  },
  mounted() {
    console.log('data2', this.data2)
  }
}

我滴親娘呢？真的是vue給我們改了的呀，簡(jiǎn)直不敢相信。

有的小伙伴又說(shuō)：有沒(méi)有可能也不是vue的鍋。

而是js本身就有這樣的特征，在視圖上會(huì)由 undefined 變?yōu)?null

下面我們不要使用vue框架。就使用普通的js去看看。

如果還是從 undefined 變?yōu)榱?null.說(shuō)明是 vue 的鍋。

否者這就是一個(gè)特征：在視圖上會(huì)由 undefined 變?yōu)?null

小心求證數(shù)據(jù)由 undefined 變?yōu)?null

<body>
    <h3>數(shù)據(jù)會(huì)發(fā)生變化嗎？</h3>
    <div id="demo"> </div>
</body>
<script>
    let data = {
        arr: [undefined, undefined, undefined, undefined, '數(shù)據(jù)1'],
        title: '會(huì)發(fā)生變化嗎?'
    }
    let demo = document.getElementById('demo')
    console.log('控制臺(tái)的數(shù)據(jù)', data)
    let htmltest = `<div>${data.arr}</div>`
    demo.innerHTML = htmltest
</script>

我們發(fā)現(xiàn)了：

原生js中， undefined在視圖上會(huì)變?yōu)榭兆址?/p>

但是在vue中,undefined在視圖上會(huì)變?yōu)閚ull。

我們看下：原生js中 null 在視圖上是否也會(huì)變?yōu)榭兆址畣幔?/h3>

<body>
    <h3>數(shù)據(jù)會(huì)發(fā)生變化嗎？</h3>
    <div id="demo"> </div>
</body>
<script>
  let data = {
      arr: [undefined, '數(shù)據(jù)2', null, '數(shù)據(jù)4'],
  }
  let demo = document.getElementById('demo')
  console.log('控制臺(tái)的數(shù)據(jù)', data)
  let htmltest = `<div>${data.arr}</div>`
  demo.innerHTML = htmltest
</script>