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

简介: 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的语法还有解析以及系列化等概念就靠大家自己私底下了解了。


今天的课就到这里结束了。

感谢你的阅读.

目录
相关文章
|
5月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
959 58
|
6月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
157 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
7月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
8月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
954 2
|
11月前
|
存储 索引 Python
Python编程数据结构的深入理解
深入理解 Python 中的数据结构是提高编程能力的重要途径。通过合理选择和使用数据结构,可以提高程序的效率和质量
264 59
|
7月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
12月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
143 1
JavaScript控制台:提升Web开发技能的秘密武器
|
11月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
11月前
|
前端开发 JavaScript 持续交付
提高JavaScript编程效率
提高JavaScript编程效率
135 3
|
11月前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
93 2