浅谈ES6中基本数据类型的操作方法

longmon 发布于2019-08-23 18:24 / 1589人阅读

摘要：值得注意的是，中整数和浮点数采用的是同样的储存方法位双精度浮点数，所以和被视为同一个值。

在Javascript中，数据类型分为基本数据类型和引用数据类型两大类，其中，Array和Function在本质上仍然是一种特殊的对象:

基本类型: String / Number / Boolean / Null / Undefined
引用类型: Object / Array / Function

ES6中引入了一种新的基本数据类型Symbol，表示独一无二的值，这里暂不作讨论

对于js中数据类型的判断，可以用typeof方法:

typeof ""  // string
typeof 1  // number
typeof false  // boolean
typeof null  // object
typeof undefined  // undefined

typeof {a: 1}  // object
typeof []  // object
typeof function(){}  // function

其中，null作为基本类型之一，为什么类型返回为object，这里做了一些解答。

另外，也可以使用以下方法作为判断依据，这里不做赘述。

instanceof   // A instanceof B， 检测A是否为B的实例
toString   // 作为object的原型方法，通过Object.prototype.toString().call("")返回[object Xxx]，可得数据类型
constructor   // 当重写prototype后，原有的constructor引用会丢失，constructor会默认为object

接下来，对各种js基本数据类型对常用处理方法做一下简要对概述，并重点讲一下在ES6中带来的新的处理方法。

String

字符串是js中最常见的数据类型，同样，我们对其运用到的处理方法也是最多的，以下是ES5中，针对string的最常用处理方法：

concat( ) / indexOf( ) / replace( ) / slice( ) / split( ) / toUpperCase( )

在ES6中，又为字符串增添了一些新的方法和API，首先增加了includes( )等三个方法，作为对之前indexOf( )方法对补充：

includes( ): 返回布尔值，表示字符串中是否含有某个局部"串儿"

startsWith( ): 返回布尔值，表示参数字符串是否在原字符串的头部

endsWith( ): 返回布尔值，表示参数字符串是否在原字符串的尾部

let str = "need sleep early";
str.includes("d sleep e");   //true
str.startsWith("nee");   //true;
str.endsWith("earl");   //false;

repeat( ): 返回一个新的字符串，表示将原来对字符串重复n次

"hello".repeat(2) // "hellohello"
"world".repeat(0) // ""

padStart( ): 用参数从头部将原字符串补全至指定长度

padEnd( ): 用参数从尾部将原字符串补全至指定长度

let str = "E"
str.padStart(5, "abc")   //"abcaE"
str.padStart(5, "abcdefg")   //"abcdE"
str.padEnd(5, "abc")   //"Eabca"
str.padEnd(5, "abcdefg")   //"Eabcd"

for...of: 字符串的遍历器接口，控制获取单个字符

for (let singleChar of "Chunhui") {
  console.log(singleChar)
}
// "C"
// "h"
// "u"
// "n"
// "h"
// "u"
// "i"

遍历字符串接口可以代替传统的split( ) + forEach( )的方式，除此之外，ES6中的遍历器还可以识别大于0xFFFF的码点，这是传统的for循环做不到的。另外，ES6中还给字符串带来了一些其他的处理方法，详情可以去阮一峰的ECMAScript6入门中索引。

Number

众所周知，相比较于Java，javascript中number类型的使用要方便许多，没有int，long，float，double等类型，根据IEEE 754标准，js数字始终以64位双精度浮点数来存储，其中：

值(Fraction/Mantissa)	指数	符号
52 bits(0 - 51)	1 bit (63)	11 bits (52 - 62)

正是因为64位浮点数的精度不足的问题，导致number类型经常会出现一些匪夷所思的计算问题，如

console.log(0.2 + 0.1)   // 输出0.30000000000000004
console.log(0.4 + 0.1)   // 输出0.5
console.log(0.7 + 0.1)   // 输出0.7999999999999999

关于number类型的精度问题，下次会专门写一篇文章进行分析，这次先讲一下在ES5中，number类型的一些常用的处理方法：

toString( ) / toFixed( ) / toPrecision( ) / parseInt( ) / parseFloat( )

在ES6中，对number类型的处理方法做了扩展，提供了一些新的方法：

Number.isFinite( ): 检测数字是否为有限的(非Infinity)

Number.isNaN( ): 用来检查一个值是否为NaN

Number.isFinite(10); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isNaN(15) // false
Number.isNaN("15") // false
Number.isNaN(NaN) // true

它们与传统的全局方法isFinite()和isNaN()的区别在于，传统方法先调用Number()将非数值的值转为数值，再进行判断，而这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。ES6将上面的ES5中的这几个全局方法，移植到Number对象上面，是为了逐步减少全局性方法，使得语言逐步模块化。

ES6中提供了Number.isInteger()用来判断一个数值是否为整数。值得注意的是，JavaScript 中整数和浮点数采用的是同样的储存方法(64位双精度浮点数)，所以15和15.0被视为同一个值。

Number.isInteger(15)   // true
Number.isInteger(15.0)   // true
Number.isInteger(15.1)   // false
Number.isInteger("15")   // false

除此之外，ES6还对与number关系密切的Math( )作了很大的扩展，添加了17个新的方法，这里不赘述。

Boolean

布尔值作为一种比较简单的基本数据类型，在ES5中就仅有几种简单的方法，通过引用构造函数，很清楚的就能知道一些常见值的布尔值：

Boolean(1)   // true
Boolean(0)   // false
Boolean(false)   // false
Boolean("false")   // true
Boolean(null)   // false
Boolean(undefined)   // false
Boolean(NaN)   // false

此外，还有一些简单的常用方法：

toString( ) / toSource( ) / valueOf( )

Null / Undefined

把null和undefined放在一起讲是因为这两种数据类型在js都是很特殊的，并且它们表达的意义很相近，初学者经常会混淆这二者。null的意思是"nothing"，它被看做不存在的事物，理论上讲，null应该是一种多带带的数据类型，但是我们在前面讲过,typeof null的结果是object，这不得不说是一件令人困惑的事情。

对于undefined，它表示的意思是"未定义的"，它与null虽然类型不同(type undefined 为undefined)，但是二者的值却是相同的。

typeof null   // object
typeof undefined    // undefined
null == undefined   //true
null === undefined   // false

暂时就写到这里，下次有时间来聊聊ES6中object新增的处理方法。

GPU云服务器云服务器 js中基本数据类型 c语言中基本数据类型详解关于JAVA中顺序IO的基本操作 js的基本数据类型

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105160.html

2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

stormgens 2019-08-22 15:34 评论0 收藏0
2018 浅谈前端面试那些事

摘要：声明的变量不得改变值，这意味着，一旦声明变量，就必须立即初始化，不能留到以后赋值。虽然今年没有换工作的打算但为了跟上时代的脚步还是忍不住整理了一份最新前端知识点知识点汇总 1.HTML HTML5新特性，语义化浏览器的标准模式和怪异模式xhtml和html的区别使用data-的好处meta标签canvasHTML废弃的标签IE6 bug，和一些定位写法css js放置位置和原因...

Hujiawei 2019-08-01 18:43 评论0 收藏0
浅谈javascript中的基本类型和引用类型

摘要：在中，变量可以存在两种类型的值，即原始值和引用值。中总共定义了六种数据类型，分别是对象，其中前五种叫做基本数据类型，最后一种叫做引用数据类型。在ECMAScript 中，变量可以存在两种类型的值，即原始值和引用值。ES5中总共定义了六种数据类型，分别是undefined、null、Boolean、String、Number、对象（Object），其中前五种叫做基本数据类型，最后一种叫...

RobinTang 2019-08-26 13:21 评论0 收藏0
浅谈JavaScript的浅拷贝与深拷贝

摘要：引用数据类型是存放在堆内存中的，变量实际上是一个存放在栈内存的指针，这个指针指向堆内存中的地址。栈和堆的区别其实浅拷贝和深拷贝的主要区别就是数据在内存中的存储类型不同。这里，对存在子对象的对象进行拷贝的时候，就是深拷贝了。数据类型在开始拷贝之前，我们从JavaScript的数据类型和内存存放地址讲起。数据类型分为基本数据类型和引用数据类型基本数据类型主要包括undefin...

娣辩孩 2019-08-23 13:44 评论0 收藏0