• javascript挑战编程技能第九题:数据结构


    妄图用一节课的内容讲完javascript的数据结构,其实还是有点勉强的。

    所以我只讲几个比较常用的数据类型。

    基本应用级开发中已经都够用的,想深入了解的朋友可以去查阅详细的API。

    之前我们的练习都是比较简单的程序,通过将数据保存在变量中就能够解决。

    其实我们新建的变量可以说成是一个全局变量的属性。

    如我们在全局定义一个 var a = 1;

    其实可以理解为window.a = 1;

    其实如果只是单纯从当前的js出发,且不考虑维护和可读性的话,

    不管多复杂的应用,都是可以不引入数据结构的,因为全部是全局变量也是可以处理的。

    但是考虑到代码可读性可维护性及运算的时间复杂度,以及跟服务端的交互等因素。

    那就很有必要好好的看看数据结构了。

    这里我们不深究什么是数据结构,不理解的可以另行百度一下。

    我们只谈在js中比较常用的几种数据结构。

    数组[]、哈希数组{}、对象{}、json{}等

    js中有5种简单的数据类型:undefined、null、boolean、number、string和一种复杂的数据类型object

    1、这里先提一个操作符:typeof

    (type of 这样便于记忆啊,对于我这种英语渣渣,这个单词竟然记错了几次,后来才看出来是个组合单词),

    用于检测某个变量的数据类型。

    常用方式是

    if(typeof aaaaa === 'string'){

    //如果变量aaaaa的类型是一个字符串,就执行这里的代码

    }

    这里有一个需要注意的地方,虽然简单数据类型里面有一个null ,但是使用typeof是不会返回null的。

    如果变量是一个null,将会返回object.

    var a=null;

    console.log(typeof a)
    打印出object

    前面我们也强调过判断操作符==和===的表现差异性,就是使用==的时候,

    会有一个隐形的数据类型转换的过程,导致判断结果与预期所想的不太相同,

    所以推荐使用===。

    2、其他的没什么好说的,这里在提一下number类型。

    有int型和float型。

    这里有一个float常用的方法需要记忆一下,就是保留小数点后两位,

    var a = 2.67373;

    console.log(a.toFixed(2))//这里的数值2表示,保留两位。

    打印出2.67

    还有一个特殊的number值NaN,既非数值,是一个特殊的数值,一般是数值和字符串运算之后会产生这个特殊值。

    这里需要注意的是,不能用NaN去判断NaN,因为它和任何值都不相等,包括它自己。

    var a = NaN;

    console.log(a === NaN);

    打印出false

    所以使用if(a === NaN){ //永假哦}

    这里也有个小细节,当一个数值+上一个字符串,会输出一个字符串,而不是NaN。

    var a  = 1;console.log(a-'w')------------------------NaN

    var a  = 1;console.log(a/'w')------------------------NaN
    var a  = 1;console.log(a*'w')------------------------NaN

    var a  = 1;console.log(a+'w')------------------------1w
    3、object本质上是由一组无序的键值对组成的。

    js中的对象其实就是一组属性和方法的集合。跟其他语言的对象概念类似。

    可以使用new来新建对象,如

    var a = new Object();

    但其实我们在日常开发中使用到比较多的是

    var a= {};

    用这种方式申明a是一个空对象,这样它就拥有了对象的所有方法和特性。

    如hasOwnProperty(判断是否存在某个属性)、toString(返回对象的字符串表示)等。

    4、跟这个有点类似的比较常用的是申明空数组的表达式。

    var a = [];

    申明a是一个空数组对象,这样a就拥有了数组的方法和特性。

    比较常用的方法是,split,join,map,push,splice等

    ①split 将字符串拆分成数组(下面的例子是根据空字符做拆分,也可以根据指定的字符)

    var a = “helloworld”.split('');

    console.log(a)

    打印["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

    ②join将数组转换成字符串(在数组之间键入)

    console.log(a.join(','))

    打印 h,e,l,l,o,w,o,r,l,d

    如果这里想把上面的字符串在转成数组,则 a.join(",").split(',');

    ③map

    map是数组特有的一个循环操作符,类似for in

    ④push

    往一个数组尾部增加新的元素。

    如 var a = ['1','2','3']

    a.push('4')

    console.log(a)

    打印['1','2','3','4']

    ⑤splice 从数组中删除某个值,这个方法可以删除一系列的值,但是常用的是删除一个。

    一般使用方法是

    var a = [{id:1,value:122},{id:2,value:423}]

    for(var key in a){

    if(a[key].id === 1){

    a.splice(key,1)

    }}

    5、从上面的操作我们可以看出对数组对象操作其中的一个属性时是比较麻烦的,所以这里引入另一个比较常用的数据结构,哈希数组

    严格来说其实这是不存在的,因为它的申明是声明一个对象,如

    var a = {};

    要往该哈希数组里面添加元素时直接就是a.key = 11;

    或者a['key']=11;下面这种定义方式也是比较常用的。

    特别是当key也是一个变量时,就只能使用下面这种方式定义了。

    var a = {};

    var key = "test";

    a.key = 123;

    console.log(a.test);

    打印undefined

    var a = {};
    var key = "test";
    a[key] = 123;
    console.log(a.test);

    打印123

    这里其实是利用了对象的本质其实是一个键值对的集合,所以来变相的定义了哈希数组类型。

    6、将上面所提到的简单数值类型、数值、对象等结合起来放到一个对象中,就可以简单的理解为一个json对象。

    我们先来看一段服务端返回的json对象。

    {

    code:200,

    msg:‘success’,

    data:[

    {id:1,text:'你好'},

    {id:1,text:'hai'},

    {id:1,text:'什么啊',list:['1','2','3']}

    ]

    }

    通过上面的例子,我们就能比较清晰的理解json对象的语法可以用来表示三种类型的值,其实就是这些值得集合。

    我们将上面的json对象保存为一个response。

    然后就可以对这个json对象做建议的解析

    if(response.code === 200){

    //这里再处理正确的业务

    }else{

    //业务错误

    alert(response.msg)

    }

    上面的例子只是在日常开发中比较常用的方法,json的语法还有解析以及系列化等概念就靠大家自己私底下了解了。

    本来想在十二点之前写完了,这样明天就可以再写一篇,但是不知不觉的就超过了。今天的课就到这里结束了。

    感谢你的阅读.

    有什么问题可以直接联系我本人微信:yu_xiaohu
    希望大家关注我的个人公众号,有更新会在上面同步发布哦.
    我是小虎Oni,希望你开心.



  • 相关阅读:
    浏览器和node中的event loop的区别
    path.resolve(dir)与path.join(__dirname,dir)的区别
    如何在typescript项目中使用eslint
    eslint无法检测ts类型错误
    todo
    brew update 卡住
    async await原理
    node的require
    Hive表头导出成csv文件
    算法--决策树
  • 原文地址:https://www.cnblogs.com/xiaohuoni/p/7642278.html
Copyright © 2020-2023  润新知