美文网首页IT修真院-前端
JS有哪些数据类型和常用方法

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

作者: 月如春秋 | 来源:发表于2017-06-24 11:12 被阅读0次

大家好,我是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

相关文章

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

    大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员 今天给大家分享一下,margin...

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

    1.背景介绍 在编程语言中,能够表示并操作的值的类型称做数据类型。 JavaScript 语言的每一个值,都属于某...

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

    大家好,我是IT修真院深圳分院第04期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 js任务...

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

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

  • JS基础知识

    1、JS中常用的数据类型有哪些?基本数据类型:number(NaN)、string、null、undefined、...

  • Recent Problems

    document.createElement创建的元素有哪些属性和方法。其他常用JS原生DOM方法。 Vue.js...

  • Javascript常见问题(一)

    1.typeof 和 instanceof检测数据类型有哪些异同 首先我们先要了解js有哪些数据类型?原始类型(基...

  • js基础面试题

    面试题:延迟加载JS有哪些方式? 面试题:JS数据类型有哪些? 面试题:JS数据类型考题 考题一: 考题二: 面试...

  • JS 数据类型、运算符、流程控制语句

    Q: JS的数据类型有几种?哪些是原始类型?哪些是复杂类型?原始类型和复杂类型的区别是什么? A: JS的数据类型...

  • JS题集

    1.JS有哪些数据类型? JS有七大数据类型: String, Symbel, Number, Boolean, ...

网友评论

    本文标题:JS有哪些数据类型和常用方法

    本文链接:https://www.haomeiwen.com/subject/bqfkcxtx.html