欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年02月10日 08:45:13   作者：我的div丟了腫么辦  
這篇文章主要為大家介紹了undefined是否會變?yōu)閚ull原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

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

我們很多小伙伴都使用過echarts。

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

為什么會這樣說：因為你看下面這個例子絕對會然你有所收獲。

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

<template>
  <div>
    <!-- 第1處：小伙伴們覺得這里數(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處：小伙伴們覺得這里應該輸出的數(shù)組的值是什么呢？
    console.log('控制臺輸入的數(shù)據(jù)', this.objInfo.data1)
    myChart1.setOption(option1); 
  }
}
</script>

大家覺得頁面中

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

很多小伙伴都會覺得這里應該是 

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

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

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

小伙伴們想好結果了嗎？ 如果想好了。請看下面的圖片

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

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

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

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

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

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

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

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

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

有的小伙伴又說：有沒有可能也不是vue的鍋。

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

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

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

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

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

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

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

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

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

我們看下：原生js中 null 在視圖上是否也會變?yōu)榭兆址畣幔?/h3> 
<body>
    <h3>數(shù)據(jù)會發(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('控制臺的數(shù)據(jù)', data)
  let htmltest = `<div>${data.arr}</div>`
  demo.innerHTML = htmltest
</script>

 原生js中 null 在視圖上也會變?yōu)榭兆址畣? 是的

我為什會糾結在視圖上 undefined 發(fā)生了變化呢？

因為今天我發(fā)現(xiàn)：在頁面上的null。

我在代碼中找了好久都沒有找到哪一個地方寫了null.這讓我很疑惑

花費了我不少時間，導致我沒有辦法摸魚。

所以：為了更好的摸魚，呸，呸，呸， 為了掘金的獎品 就寫下了這篇文章。

總結

通過一步一步的分析：我們知道了

1==》在vue中, undefined 在視圖上會變?yōu)?null。

在vue中, null 在視圖上仍然是 null

補充：但是字符串 'undefined' 和 'null' 在視圖上會保持不變

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

null 在視圖上也會變?yōu)榭兆址?/p>

補充：但是字符串 'undefined' 和 'null' 在視圖上會保持不變

以上就是undefined是否會變?yōu)閚ull原理解析的詳細內容，更多關于undefined是否會變?yōu)閚ull的資料請關注腳本之家其它相關文章！

相關文章

  • vue實現(xiàn)滾動鼠標滾輪切換頁面

    vue實現(xiàn)滾動鼠標滾輪切換頁面

    這篇文章主要為大家詳細介紹了vue實現(xiàn)滾動鼠標滾輪切換頁面，類似于縱向走馬燈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件

    vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件

    這篇文章主要介紹了vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果

    vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果

    這篇文章主要介紹了vue使用swiper實現(xiàn)中間大兩邊小的輪播圖效果，本文分步驟通過實例代碼講解的非常詳細,需要的朋友可以參考下
    2019-11-11
  • vue項目如何去掉URL中#符號的方法

    vue項目如何去掉URL中#符號的方法

    在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項目如何去掉URL中#符號的相關資料,文中通過實例代碼的非常詳細,需要的朋友可以參考下
    2022-07-07
  • Vue使用font-face自定義字體的案例詳解

    Vue使用font-face自定義字體的案例詳解

    @font-face?是?CSS?中的一個規(guī)則,它允許你加載服務器上的字體文件（遠程或者本地）,并在網(wǎng)頁中使用這些字體,本文給大家介紹了Vue使用font-face自定義字體的案例,并通過代碼講解的非常詳細,需要的朋友可以參考下
    2024-03-03
  • 基于Vue-Cli 打包自動生成/抽離相關配置文件的實現(xiàn)方法

    基于Vue-Cli 打包自動生成/抽離相關配置文件的實現(xiàn)方法

    基于Vue-cli 項目產(chǎn)品部署，涉及到的交互的地址等配置信息，每次都要重新打包才能生效，極大的降低了效率。這篇文章主要介紹了基于Vue-Cli 打包自動生成/抽離相關配置文件 ,需要的朋友可以參考下
    2018-12-12
  • vue-star評星組件開發(fā)實例

    vue-star評星組件開發(fā)實例

    下面小編就為大家分享一篇vue-star評星組件開發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue實現(xiàn)縱向的物流時間軸效果的示例代碼

    Vue實現(xiàn)縱向的物流時間軸效果的示例代碼

    在當今數(shù)字化的時代,用戶體驗的優(yōu)化至關重要,物流信息的展示作為電商和供應鏈領域中的關鍵環(huán)節(jié),其呈現(xiàn)方式直接影響著用戶對貨物運輸狀態(tài)的感知和滿意度,所以本文介紹了Vue實現(xiàn)縱向的物流時間軸效果的方法,需要的朋友可以參考下
    2024-08-08
  • Pinia簡單使用以及數(shù)據(jù)持久化詳解

    Pinia簡單使用以及數(shù)據(jù)持久化詳解

    最近正在使用Pinia進行狀態(tài)管理,我希望在重新刷新頁面時保持狀態(tài),下面這篇文章主要給大家介紹了關于Pinia簡單使用以及數(shù)據(jù)持久化的相關資料,需要的朋友可以參考下
    2022-05-05
  • vue實現(xiàn)移動端touch拖拽排序

    vue實現(xiàn)移動端touch拖拽排序

    這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端touch拖拽排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-07-07

最新評論