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吗？的更多相关文章

  1. 关于 JavaScript 的 null 和 undefined，判断 null 的真实类型

    null.undefined 博客地址: https://ainyi.com/39 undefined:表示一个变量最原始的状态,而非人为操作的结果 null:表示一个对象被人为的重置为空对象,而非一 ...

  2. 将Excel导入SQL Server 只能导入数字，其他数据变为NULL怎么解决？

    先新建一个TXT文件,把数据粘贴进去 再新建一个Excel文件,在菜单栏中选Data再选From Text 找到txt文件,点import 一定要选Text 点Finish,点OK. 接下来在往数据库 ...

  3. JavaScript中undefined与null的区别

    通常情况下, 当我们试图访问某个不存在的或者没有赋值的变量时,就会得到一个undefined值.Javascript会自动将声明是没有进行初始化的变量设为undifined. 如果一个变量根本不存在会 ...

  4. 判断一个值是否为null或者undefined

    var a=null; var b=undefined; if(a===null){ //a==null alert("a=null") }else{ alert("a= ...

  5. JS中判断null、undefined与NaN的方法

    写了个 str ="s"++; 然后出现Nan,找了一会. 收集资料如下判断: 1.判断undefined: 代码如下: <span style="font-siz ...

  6. 【阿里李战】解剖JavaScript中的 null 和 undefined

    在JavaScript开发中,被人问到:null与undefined到底有啥区别? 一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理.于是,细想之后,写下本文,请各位 ...

  7. null、undefined、false、0相等性比较

    之前在看<JavaScript权威指南>的时候看到三个相等性比较的式子: null == undefined ;// ==>true undefined == false;// == ...

  8. js中NAN、NULL、undefined的区别

    NaN:保留字(表明数据类型不是数字) undefined:对象属性或方法不存在,或声明了变量但从未赋值.即当你使用了对象未定的属性或者未定义的方法时或当你声明一个变量,但你确从未对其进行赋值,便对其 ...

  9. 说说null和undefined的那些事

    网上有很多关于null和undefined的解释,那么今天我们也来简单的聊聊null与undefined的话题,以便解开它们的神秘面纱,当然这这是简单的介绍,在日后会有相应的更新. 为什么用==的时候 ...

  10. js基础篇——call/apply、arguments、undefined/null

    a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象 ...

随机推荐

  1. 【翻译】Spring Security抛弃了WebSecurityConfigurerAdapter

    原文链接:Spring Security without the WebSecurityConfigurerAdapter 作者:ELEFTHERIA STEIN-KOUSATHANA 发表日期:20 ...

  2. 【云原生 · Kubernetes】KubeVirt热迁移

    [云原生 · Kubernetes]KubeVirt热迁移 检查节点和kubevirt状态 启用热迁移 创建虚拟机 在虚拟机上启动一个服务 迁移虚拟机 热迁移是KubeVirt支持的一个常见虚拟化特性 ...

  3. 【云原生 · Kubernetes】部署博客系统

    [云原生 · Kubernetes]Kubernetes运维 接着上次的内容,后续来了! (1)配置NFS服务 master节点安装NFS与RPC服务: # yum install -y nfs-ut ...

  4. 简单使用Nginx反向代理和负载均衡

    配置文件主要是三点: events . http . server 配置反向代理和负载均衡策略 #配置tomcat的IP地址和访问端口||负载均衡:权重就是比例 upstream guotong { ...

  5. Duplicate property mapping of xxx found in xx 嵌套异常，重复的属性在映射中发现。

    该异常的原意是因为在映射文件中出现了两个一样的属性名: <property name="相同的属性名出现了两次以上" > <property name=" ...

  6. 【实时数仓】Day01-数据采集层：数仓分层、实时需求、架构分析、日志数据采集（采集到指定topic和落盘）、业务数据采集（MySQL-kafka）、Nginx反向代理、Maxwell、Canel

    一.数仓分层介绍 1.实时计算与实时数仓 实时计算实时性高,但无中间结果,导致复用性差 实时数仓基于数据仓库,对数据处理规划.分层,目的是提高数据的复用性 2.电商数仓的分层 ODS:原始日志数据和业 ...

  7. 动态SQL遇到的问题

    看图 查不出来任何数据 因为判断有问题 修改方法如下:

  8. MySQL可视化软件(Navicat)部署与使用

    目录 一:可视化软件(Navicat) 1.什么是可视化软件? 2.什么是Navicat? 二:部署MySQL(Navicat) 1.Navicat连接本地MySQL 2.连接MySQL,输入密码,在 ...

  9. 数据库MySQL(完结)

    SQL注入问题 简介 针对SQL注入的攻击行为可描述为通过用户可控参数中注入SQL语法,破坏原有SQL结构,达到编写程序意料之外结果的攻击行为. 其成因可归结为以下两个原理叠加造成: 程序编写者在处理 ...

  10. Python面试常见算法题集锦（递归部分）

    0x1 前言 开始学习python基础的时候,有以下几种算法是面试中常见的,也是前期学习python的时候可以连带学习了解的,不卡门槛哟 0x2 实现算法的方式很多种,而算法的实现也是分程序语言的,此 ...