重温JS基础--引用类型(三)

今天把接下来引用类型中的一些内容全部记录完毕~

基本包装类型

为了便于操作基本类型值,JavaScript还提供了3种特殊的引用类型:Boolean, Number, String。这三种类型具有与各自的基本类型响应的特殊行为。

实际上每当读取一个基本类型值得时候,后台就会创建一个对应的基本包装类型的对象。从而可以调用一些方法来操作这些数据。

var s1 = 'some text'
var s2 = s1.substring(2)

如上,s1包含一个字符串,字符串应该是基本类型的,而下一行调用了s1的substring方法,并保存在了s2中。但是一般只有对象才具有方法,s1是一个基本类型的字符串是不应该具有这个特性的,那么是为什么呢?

这是因为访问s1的时候处于一种读取模式,也就是要从内存中读取这个字符串的值,然而在读取模式中访问这个字符串时后台都会进行如下操作:

1. 创建一个String类型的实例
2. 在实例上调用指定方法
3. 销毁这个实例

经过这样的处理,基本的字符串值就变得跟对象一样了。

既然基本包装类型和引用类型这么相似,那么他们之间的区别在哪里? 引用类型和包装类型的主要区别是在对象的生存期。
使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于代码执行的瞬间,然后立马被销毁,这就意味着我们不能在运行时为基本类型添加属性和方法。

因为有了基本包装类型对象,虽然我们可以显示的创建String,Number,Boolean创建包装类型的对象,但是我们不建议这样去做,因为这样很容易把自己弄混淆,不知道自己在处理基本类型还是引用类型的值,

Object构造函数会像工厂方法一样,根据传入的值得类型返回对应基本包装类型的实例。

var obj = new Object('text') //创建了一个string实例

console.log(obj instanceOf String) //true
  • Boolean
    Boolean算是比较简单的,不需要过得的介绍,但是有一点是值得我们去注意的。

因为首先我们要知道布尔表达式中所有的对象都会被转为true,看下面一个例子:

var f = new Boolean(false)
var res = f && true;
console.log(f) //false
console.log(res) //true

var f = false
var res = f && true
console.lo(res) //false

而且基本类型和引用类型的布尔值还有两个区别:

var f = false
var f1 = new Boolean(false)

typeof f //'boolean'
typeof f1 // 'object'

f instanceOf Boolean // false
f1 instanceOf Boolean //true
  • Number类型
    接下来再看下Number类型,Number类型也改写了原来的toString(),valueOf(),toLocaleString()方法。重写后的valueOf()返回对象表示的数值类型,另外两个方法则返回字符串形式的数值。我们还可以给toString()方法传递一个表示基数的参数,告诉它返回几进制数值的字符串形式。
var num = 10
console.log(num.toSting()) //10
console.log(num.toSting(2)) //1010

除了继承的方法外,Number还提供了一些用于将数值格式化为字符串的方法:

var num = 10
console.log(num.toFixed(2)) // '10.00'

另外可以格式化数值的方法是toExponential(),该方法返回以指数表示法,表示的数值的字符串形式,

var num = 10
console.log(num.toExponential(1)) //'1.0e + 1'
  • String类型

String类型是字符串的对象包装类型。String对象的方法可以在所有基本的字符串值中访问到,其中继承的valueOf,toString, toLocaleString都是返回基本的字符串。

String类型的每个实例都有一个length属性,表示字符串中包含多少个字符。

var str = 'abc'
console.log(str.length) //3

接下来介绍一些字符串的方法:

1. 字符方法 charAt、charCodeAt

两个用于访问字符串中特定字符的方法,这两个方法都接受一个基于0的参数,即表示字符基于0的位置。charAt以单字符传形式返回给定位置的那个字符串。

var str = 'hello'
console.log(str.charAt(1)) // 'e',如果传入负数或大于字符串长度的数字则返回undefined

如果你想获得到的不是该位置上的字符,而是该字符编码

var str = 'hello world'
console.log(str.charCodeAt(1)) //'101',如果不存在的话返回NAN
2. 字符串操作方法

(1). concat()
创建一个字符串副本,然后用该副本将一个或多个字符串拼接起来返回一个新的字符串:

var str = 'hello'
var res = str.concat(' world', '!')
console.log(res) //'hello world!'
console.log(str) //'hello' 
(2). substring, slice , substr

基于子字符串副本创建新字符串的方法,这个三个方法都接受两个参数,slice和substring的第二个参数都表示子字符串到哪里结束,而substr规定的是返回的字符串个数。如果没有传入第二个参数,则将字符串的末尾作为结束为止,和concat一样,这三个方法都不会修改字符串本身。

var str = 'hello world'
console.log(str.slice(3)) //'lo world'
console.log(str.substring(3))// 'lo world'
console.log(str.substr(3)) //'lo world'
console.log(str.slice(3, 7)) //'lo w'
console.log(str.substring(3, 7)) //'lo w'
console.log(str.substr(3, 7)) //'lo worl'

有一种特殊的情况,就是当我们传入带有负数的时候,就有所差异了:
传入到slice中的负数会从字符串后端开始数。
substr的第一个负数会从字符串尾部开始数,第二个如果是负数的话会转为0。
substring会把所有负数都转为0,若果第二个参数比第一个小的话会调换两个参数位置:

var str = 'hello world'
console.log(str.slice(-3)) //'rld'
console.log(str.substring(-3)) //'hello world'
console.log(str.substr(-3)) //'rld'
console.log(str.slice(3, -4)) //'lo w'
console.log(str.substring(3, -4)) //'hel'
console.log(str.substr(3, -4)) //''
(3). 字符串位置方法(indexOf, lastIndexOf)

有两个可以从字符串中查找子字符串的方法:indexOf()lastIndexOf().这两个方法都是从一个字符串中搜索给定的子字符串,然后返回子字符串的位置,如果没有找到子字符串,则返回-1。这两个方法的区别就是indexOf是从字符串的头部进行搜索,而lastIndexOf是从字符串末尾位置向前搜索。

var str = 'hello world'
console.log(str.indexOf('o')) //4
console.log(str.lastIndexOf('o')) //7

这两个方法都可以接受第二个参数,表示是从哪个位置进行查找。

var str = 'hello world'
console.log(str.indexOf('o', 6)) //7
console.log('o', 6) // 4
(4). trim()方法

该方法会创建一个字符串的副本,删除前置以及后缀的所有空格:

var str = ' hello world ' 
var trimStr = str.trim()
console.log(str) // ' hello world '
console.log(trimStr) //'hello world'
(5). 字符串大小转换方法

toLowerCase(), toUpperCase(), toLocaleLowerCase(), toLocaleUpperCase()
这些都是比较简单常见的就不一一介绍了~

你可能感兴趣的:(前端javascriptweb)