JS有哪些数据类型和常用方法

大家好,我是IT修真院郑州分院第三期的学员高雪峰,一枚正直、纯洁、善良的前端程序员

今天给大家分享一下,修真院官网JS(职业)任务1,深度思考中的知识点——JS有哪些数据类型和常用方法

1.背景介绍

我们目前对Javascript多少都有一些了解和使用。其中最基础的,就是js的数据类型,分为两大块,一个是基本数据类型,包括:undefined、null、boolean、number、string等;一个是引用数据类型,包括object、array、Date、RegExp等。在引用类型中,还有三个特殊的引用类型,和基本数据类型相似,我们接下来来认识一下:boolean、number、string。

2.知识剖析

2.1 特殊的引用类型之string

var a = "Hello World!";

var b = a.substring(3);

console.log(b);  // "lo World!"

如同上边代码所示,字符串是一个基本数据值。但是,我们知道基本数据类型不是对象,在逻辑上来讲,它不应该有方法,但是上边的substring()是如何实现的呢?详细剖析的话,我们可以把它分成一下这种步骤:

var a = new String("Hello World!");//创建String类型的一个实例;

var b = a.substring(3); //在实例上调用指定的方法;

a = null; //销毁这个实例;

console.log(b);  // "lo World!"

通过上一页的代码细节的展示,我们可以看出,基本类型的字符串就变成了和对象一样。这就引入了基本包装类型的概念:每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据。

作为特殊的引用类型,其与引用类型的的主要区别在于对象的生存期上。使用new或者其他简写的方法创建引用类型的实例,在执行六离开当前作用域之前都一直保存在内存中。自动创建的基本包装类型的对象,则只存在于一行代码执行的瞬间,然后立即被销毁了。这就意味着,不能在运行时为基本类型值添加属性和方法。

var a = "something";

a.color = "red";

console.logo(a.color); //undefined

String类型在ECMAScript中提供了一些方法,用于对字符串进行解析和操作。

//字符方法

var svalue = "Hello World!";

console.log(svalue.length);   // 12

console.log(svalue.charAt(4));  // o  首位和数组一样,index从0开始

console.log(svalue.charCodeAt(4)); //这里会显示字符编码

console.log(svalue[3]); //这个方法支持IE8+ 及所有其他浏览器,显示结果和svalue.charAt(3)一样

字符串的方法:

concat()用于对一个或者多个字符串进行拼接显示,生成新的字符串,不会影响原有字符串。

//字符串方法

var svalue = "Hello";

var result = svalue.concat("Da Wa");

console.log(result);

console.log(svalue);

var b = svalue + 'Er Wa';

相比于concat()方法,我们一般较多使用的是 “+”的方法进行字符串的拼接显示,也比较方便简单。

还有三种创建新字符串的方法:slice()、substr()、substring()。以上三种方法都可输入1到2个参数。三种方法的第一个参数都是指字符串操作的起始位置,slice()、substring()的第二个参数指的是结束位置后一个位置的,substr()的第二个参数则指的是从第一个参数开始的位置起要返回的字符的个数。这里注明一下。同时在参数为负值时的表现效果和定义也不一致,需要注意!

var a = "tianqingle";

console.log(a.slice(3)); //“nqingle”

console.log(a.substring(3)); //“nqingle”

console.log(a.substr(3)); //“nqingle”

console.log(a.slice(3, 7)); //"nqin"

console.log(a.substring(3, 7)); //"nqin"

console.log(a.substr(3, 7)); //“nqingle”

2.4 特殊的引用类型之Boolean

var aobj = new Boolean(false);

var result = aobj && true;

console.log(result);   //  true

var bvalue = false;

result = bvalue && true;

console.log(result); //  false

在布尔值运算中,fals&&true返回false,一假全假;布尔表达式中所有对象会返回true。

console.log(typeof aobj);  //object

console.log(typeof bvalue); //  boolean

console.log(aobj instanceof Boolean);   //  true

console.log(bvalue instanceof Boolean);  //  false

由于以上的原因,建议轻易不要使用Boolean对象。

2.3 特殊的引用类型之Number

Number类型是与数字值对应的引用类型。

var num = new Number(100);

console.log(num.toString());    //  "100"

console.log(num.toLocaleString());  //  "100"

console.log(num.valueOf());   //  100(数字,不是字符串,和上边有区别)

console.log(num.toFixed(3));  //  100.000

console.log(num.toExponential(3));  //    1.000e+2 (指数显示)

console.log(num.toPrecision(2));    //    1.0e+2  (根据需要显示的位数,自行判断是使用指数显示还是整数显示或者浮点数显示)   支持1到21位小数

与Boolean类型一样,同样不建议显式实例化Number类型,原因同Boolean类型一样,在使用valueOf()和instanceof()方法时会出现容易让人误解的结果,从而造成混乱。

3.常见问题

问题: 如何分割一个很长的字符串?

4.解决方案

通过字符串模式匹配的方法。

var s = "天上的云,地上的水,水清了,就可以低头看见天上的云!";

var b = s.split(',');

var c = s.split(',',2);

console.log(b);  //  会显示一个分割后的字符串数组

console.log(c);   //  根据显示的项数,只显示前几项

5.编码实战

参看上边简单的demo演示,暂无更多demo!

6.扩展思考

问题: 如何替换子字符串的内容?

这里使用了replace()的方法:

var h = "cat, bat, sat, fat";

console.log(h.replace("at", "ond"));  //  只会修改第一个与“at”相匹配的内容

console.log(h.replace(/at/g, "end"));  //  使用正则,由于追加使用全局g,会将全部与“at”匹配的内容都更换掉

7.参考文献

参考一:JavaScript高级程序设计

8.更多讨论

讨论点:大家对于基本包装类型还有哪些认识,分享一下?

PPT: https://ptteng.github.io/PPT/PPT/js-01-JS%20basic%20package%20type.html#/

视频链接:https://v.qq.com/x/page/d0517gyp303.html


JavaScript中的基本包装类型_腾讯视频

文本链接: http://www.jnshu.com/daily/26631?dailyType=others&total=152&page=1&uid=7446&sort=0&orderBy=3

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧~

你可以直接点击此链接:http://jnshu.com/login/1/84959420

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容