undefined会变为null吗?

简介: 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' 在视图上会保持不变

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
1月前
|
JavaScript 前端开发 算法
undefined与null的区别
在JavaScript中,undefined和null都表示变量未被赋值或值缺失,但它们在使用场景上有一些区别。 - **`语义不同`**:undefined表示一个变量未被赋值或者声明后未进行初始化。而null表示一个变量被明确地设置为无值或者表示空值的概念。 - **`类型不同`**:undefined是一种基本数据类型,而null是一个引用类型。 - **`条件判断`**:在条件判断中,使用if (variable === undefined)或者if (variable === null)可以进行区分。
|
2月前
|
JavaScript 前端开发 程序员
分享18个用于处理 null、NaN 和undefined 的 JS 代码片段
Null、NaN 和 undefined 是程序员在使用 JavaScript 时遇到的常见值。 有效处理这些值对于确保代码的稳定性和可靠性至关重要。
|
3月前
|
JavaScript 前端开发 API
null和undefined:两个JavaScript中的特殊值(二)
null和undefined:两个JavaScript中的特殊值
|
3月前
|
JavaScript 前端开发 安全
null和undefined:两个JavaScript中的特殊值(一)
null和undefined:两个JavaScript中的特殊值
|
4月前
undefined == null 为ture ?
undefined 和 null 的语义和场景不同 ,值比较
16 0
|
4月前
|
JavaScript 前端开发
JavaScript快速删除对象数组中某一个指定元素。注意:是对象数组,如果是数值数组,请慎用!会伤及无辜0、false、英文空格、undefined、null。
JavaScript快速删除对象数组中某一个指定元素。注意:是对象数组,如果是数值数组,请慎用!会伤及无辜0、false、英文空格、undefined、null。
|
4月前
|
JavaScript 前端开发
JavaScript基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。
JavaScript基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。
29 0
|
4月前
|
JavaScript 前端开发
js基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。具体案例使用演示
js基础语法:包括变量声明、数据类型(Number, String, Boolean, Null, Undefined, Symbol, Object)、运算符、流程控制语句(if...else, switch, for, while, do...while)等。具体案例使用演示
34 1
|
5月前
|
编译器
error TS2322 Type ‘string null‘ is not assignable to type ‘string undefined‘.
error TS2322 Type ‘string null‘ is not assignable to type ‘string undefined‘.
89 1
|
5月前
形象解释 undefined 和 null 之间的区别
形象解释 undefined 和 null 之间的区别