undefined会变为null吗？
echarts 会将 series data中的数据并不是你想的那样简单
我们很多小伙伴都使用过echarts。
然后 series：[{ data:[] }] 中的数据可能并没有我们想的那样简单
为什么会这样说：因为你看下面这个例子绝对会然你有所收获。
series data 中的数据会自动发生变化吗？
<template>
<div>
<!-- 第1处：小伙伴们觉得这里数组中的值是否是
[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处：小伙伴们觉得这里应该输出的数组的值是什么呢？
console.log('控制台输入的数据', this.objInfo.data1)
myChart1.setOption(option1);
}
}
</script>
大家觉得页面中
第1处： <h4>{{ objInfo.data1 }}</h4> 数组中的值是否是 undefined ？
很多小伙伴都会觉得这里应该是
[undefined, undefined, undefined, undefined,
undefined, undefined, undefined] 是这样还是不是这样 ？
第2处：小伙伴们觉得这里应该输出的数组的值是什么呢？
console.log('控制台输入的数据', this.objInfo.data1)
[undefined, undefined, undefined, undefined,
undefined, undefined, undefined] 是这样还是不是这样 ？
小伙伴们想好结果了吗？ 如果想好了。请看下面的图片
为什么会series data 中 undefined 会变为 null
有的小伙伴会说：是不是echarts底层在更改了数据？
有可能，我们使用watch去监听一下，如果更改数据肯定会被我们监听到
watch: {
"obj.data1": function (newval, oldval) {
console.log('oldval', oldval)
console.log('newval', newval)
},
deep: true,
},
通过上面的图片我们可以知道，echarts并没有更改数据.否者会触发watch
说明并不是echarts底层给我们改了数据。
那数据从undefined 变为 null 肯定是有一个地方改动了。
如果不是echarts，那就是vue。难道真的是vue给我们改了数据？
求证：undefined 会变为 null是 vue 的锅
<template>
<div>
<h3>数据会变为unll吗</h3>
<h2>{{ data2 }}</h2>
</div>
</template>
export default {
data() {
return {
data2:[undefined,undefined]
}
},
mounted() {
console.log('data2', this.data2)
}
}
我滴亲娘呢？真的是vue给我们改了的呀，简直不敢相信。
有的小伙伴又说：有没有可能也不是vue的锅。
而是js本身就有这样的特征，在视图上会由 undefined 变为 null
下面我们不要使用vue框架。就使用普通的js去看看。
如果还是从 undefined 变为了 null.说明是 vue 的锅。
否者这就是一个特征：在视图上会由 undefined 变为 null
小心求证 数据由 undefined 变为 null
<body>
<h3>数据会发生变化吗？</h3>
<div id="demo"> </div>
</body>
<script>
let data = {
arr: [undefined, undefined, undefined, undefined, '数据1'],
title: '会发生变化吗?'
}
let demo = document.getElementById('demo')
console.log('控制台的数据', data)
let htmltest = `<div>${data.arr}</div>`
demo.innerHTML = htmltest
</script>
我们发现了：
原生js中， undefined在视图上会变为空字符串。
但是在vue中,undefined在视图上会变为null。
我们看下：原生js中 null 在视图上是否也会变为空字符串吗？
<body>
<h3>数据会发生变化吗？</h3>
<div id="demo"> </div>
</body>
<script>
let data = {
arr: [undefined, '数据2', null, '数据4'],
}
let demo = document.getElementById('demo')
console.log('控制台的数据', data)
let htmltest = `<div>${data.arr}</div>`
demo.innerHTML = htmltest
</script>
原生js中 null 在视图上也会变为空字符串吗? 是的
我为什会纠结在视图上 undefined 发生了变化呢？
因为今天我发现：在页面上的null。
我在代码中找了好久都没有找到哪一个地方写了null.这让我很疑惑
花费了我不少时间，导致我没有办法摸鱼。
所以：为了更好的摸鱼，呸，呸，呸，是为了和大家一起进步。
总结
通过一步一步的分析：我们知道了
1==》在vue中, undefined 在视图上会变为 null。
在vue中, null 在视图上仍然是 null
补充：但是字符串 'undefined' 和 'null' 在视图上会保持不变
2==》原生js中， undefined 在视图上会变为空字符串。
null 在视图上也会变为空字符串。
补充：但是字符串 'undefined' 和 'null' 在视图上会保持不变
undefined会变为null吗？的更多相关文章
- 关于 JavaScript 的 null 和 undefined，判断 null 的真实类型
null.undefined 博客地址: https://ainyi.com/39 undefined:表示一个变量最原始的状态,而非人为操作的结果 null:表示一个对象被人为的重置为空对象,而非一 ...
- 将Excel导入SQL Server 只能导入数字，其他数据变为NULL怎么解决？
先新建一个TXT文件,把数据粘贴进去 再新建一个Excel文件,在菜单栏中选Data再选From Text 找到txt文件,点import 一定要选Text 点Finish,点OK. 接下来在往数据库 ...
- JavaScript中undefined与null的区别
通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...
- 判断一个值是否为null或者undefined
var a=null; var b=undefined; if(a===null){ //a==null alert("a=null") }else{ alert("a= ...
- JS中判断null、undefined与NaN的方法
写了个 str ="s"++; 然后出现Nan,找了一会. 收集资料如下判断: 1.判断undefined: 代码如下: <span style="font-siz ...
- 【阿里李战】解剖JavaScript中的 null 和 undefined
在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理.于是,细想之后,写下本文,请各位 ...
- null、undefined、false、0相等性比较
之前在看<JavaScript权威指南>的时候看到三个相等性比较的式子: null == undefined ;// ==>true undefined == false;// == ...
- js中NAN、NULL、undefined的区别
NaN:保留字(表明数据类型不是数字) undefined:对象属性或方法不存在,或声明了变量但从未赋值.即当你使用了对象未定的属性或者未定义的方法时或当你声明一个变量,但你确从未对其进行赋值,便对其 ...
- 说说null和undefined的那些事
网上有很多关于null和undefined的解释,那么今天我们也来简单的聊聊null与undefined的话题,以便解开它们的神秘面纱,当然这这是简单的介绍,在日后会有相应的更新. 为什么用==的时候 ...
- js基础篇——call/apply、arguments、undefined/null
a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...
随机推荐
- 高性能MySQL(第4版) 第一章 MySQL架构 读书笔记
这本书去年11月出的,今年中文版也出了,并且直接上了微信读书,之后有空就读一读,分享下读书笔记~ 原文内容比较充实,建议有时间可以读一下原文. 第一章主要是个概览. MySQL的逻辑架构 默认情况下, ...
- docker构建容器时 容器内使用代理
build 容器时 使用代理 demo1 使用前 指定 env 使用后 记得 清空, 否则 会影响 使用容器 时的 网络 cat dockerfile --> FROM jenkins/jenk ...
- 如何开发Vite3插件构建Electron开发环境
新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1 ...
- CentOS 7.x字符界面安装图形界面方法
1. 配置好yum源,可以使用光盘镜像源,也可以使用网络源. 阿里源下载示例: wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.ali ...
- 靶机练习: Hacker_Kid-v1.0.1
靶机: Hacker_Kid-v1.0.1 准备工作 靶机地址: https://download.vulnhub.com/hackerkid/Hacker_Kid-v1.0.1.ova MD5 校验 ...
- HDLBits答案——Getting started
Getting started 1 Step one module top_module( output one ); // Insert your code here assign one = 1' ...
- SPFA和链式前向星
链式前向星 一种存储图的数据结构 建立一个结构体和一个数组加一个变量,这里的to代表边\((u,v)\)中的\(v\)结点,而\(edge\)数组的索引\(idx\)代表\(u\),其中\(w\)代表 ...
- BFS和DFS学习笔记
1 算法介绍 1.1 BFS Breadth First Search(广度优先搜索),将相邻的节点一层层查找,找到最多的 以上图为例,首先确定一个根节点,然后依次在剩下的节点中找已找出的节点的相邻节 ...
- 重新认识下JVM级别的本地缓存框架Guava Cache(3)——探寻实现细节与核心机制
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 通过<重新认识下JVM级别的本地 ...
- 对于async和await的使用方式、作用效果不怎么理解 ?没关系，初步看这篇就够了
结论 同步还是异步,区别如下: 同步:你使用 await 修饰符去调用一个异步(async)方法(是异步方法,不过是阻塞式的,可简单理解为同步): 异步:你获取异步方法返回的 Task,就是异步(后文 ...