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處：小伙伴們覺得這里應(yīng)該輸出的數(shù)組的值是什么呢？
console.log('控制臺輸入的數(shù)據(jù)', this.objInfo.data1)
myChart1.setOption(option1);
}
}
</script>
大家覺得頁面中
第1處： <h4>{{ objInfo.data1 }}</h4> 數(shù)組中的值是否是 undefined ？
很多小伙伴都會覺得這里應(yīng)該是
[undefined, undefined, undefined, undefined,
undefined, undefined, undefined] 是這樣還是不是這樣 ？
第2處：小伙伴們覺得這里應(yīng)該輸出的數(shù)組的值是什么呢？
console.log('控制臺輸入的數(shù)據(jù)', this.objInfo.data1)
[undefined, undefined, undefined, undefined,
undefined, undefined, undefined] 是這樣還是不是這樣 ？
小伙伴們想好結(jié)果了嗎？ 如果想好了。請看下面的圖片
為什么會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>
<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)榭兆址畣? 是的
我為什會糾結(jié)在視圖上 undefined 發(fā)生了變化呢？
因為今天我發(fā)現(xiàn)：在頁面上的null。
我在代碼中找了好久都沒有找到哪一個地方寫了null.這讓我很疑惑
花費了我不少時間，導(dǎo)致我沒有辦法摸魚。
所以：為了更好的摸魚，呸，呸，呸， 為了掘金的獎品 就寫下了這篇文章。
總結(jié)
通過一步一步的分析：我們知道了
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原理解析的詳細(xì)內(nèi)容，更多關(guān)于undefined是否會變?yōu)閚ull的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作
debounce是lodash工具庫中的一個非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue+echarts實現(xiàn)3D柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法
這篇文章主要介紹了VUE在for循環(huán)里面根據(jù)內(nèi)容值動態(tài)的加入class值的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue3+Vite+TS使用elementPlus時踩的坑及解決
這篇文章主要介紹了Vue3+Vite+TS使用elementPlus時踩的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)
最近vue.js 非?；馃?，小編也趁機學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現(xiàn)代碼分享給大家，需要的朋友參考下2018-05-05
element-ui中el-form-item內(nèi)的el-select該如何自適應(yīng)寬度
自從用了element-ui,確實好用,該有的組件都有,但是組件間的樣式都固定好了,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-form-item內(nèi)的el-select該如何自適應(yīng)寬度的相關(guān)資料,需要的朋友可以參考下2022-11-11
Vue2.x Todo之自定義指令實現(xiàn)自動聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動獲取焦點，而不是需要先手動點一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實現(xiàn)自動聚焦,非常具有實用價值，需要的朋友可以參考下2019-01-01
這篇文章主要來和大家一起探討一下在Vue3項目中如何處理重復(fù)渲染代碼的問題,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
上傳文件，基本上用了input框就可以解決，但大文件應(yīng)該怎樣上傳呢，一次性上傳明顯不現(xiàn)實，因為每次一斷網(wǎng)，那就會從頭開始上傳，所以切片勢在必行，關(guān)鍵就是如何切，怎么保障文件數(shù)據(jù)不會丟失，同時優(yōu)化上傳保障機制，本文就來給大家講講如何上傳大文件2023-07-07