第三章 JavaScript 值类型使用

1.typeof判断数据类型

JavaScript中可以使用typeof来判断数据类型，但是typeof也有一些自己的缺点，比如不能会将数组类型判断为object，遇到这种问题时可以使用原型链进行判断。

  let arr = []
  let obj = {}
  console.log(typeof arr,typeof obj)//object object
  console.log(arr instanceof Array,obj instanceof Array)//true false

2.字符串连接

字符串连接可以使用最简单的 “+” 进行连接；也可使用写在 “ ` ` ” （键盘上方数字1前面的点）中进行连接，推荐使用这种方式连接字符串。${}中可以填写变量，函数或者表达式。

  let year = "xxxx年"
  let name = "weizhuren"
  console.log(name + "出生于" + year)//weizhuren出生于xxxx年
  console.log(`${name}出生于${year}`)//weizhuren出生于xxxx年

3.tag标签模板

可以使用tag标签来定义模板。

  let year = "xxxx年"
  let name = "weizhuren"
  tag`${name}出生于${year}。`
  function tag(strings,...vars) {
    console.log(vars)//["weizhuren", "xxxx年"]
    console.log(strings)//"", "出生于", "。"
  }

4.字符串基本函数

一些字符串基本函数的使用。

  let name = "weiZHUren"
  console.log(name.length)//9 获取字符串长度
  console.log(name.toUpperCase())//WEIZHUREN 将字符串全部大写
  console.log(name.toLowerCase())//weizhuren 将字符串全部小写
  let msg = "  erbihouke   "
  console.log(msg.length)//14
  console.log(msg.trim().length)//9 去除字符串空格后输出字符串长度

5.字符串的截取操作

字符串中slice、substr和substring的细微区别。

  let msg = "erbihoukeweizhuren"
  //slice substr substring
  console.log(msg.slice(1,3))//第一个参数：从第几位开始截取,第二个参数：截取到第几位   rb
  console.log(msg.substring(1,3))//第一个参数：从第几位开始截取,第二个参数：截取到第几位 rb
  console.log(msg.substr(1,3))//第一个参数：从第几位开始截取,第二个参数：截取几位 rbi
  //第一个参数使用负数的情况
  console.log(msg.slice(-3,-1))//第一个参数：从第几位开始截取,第二个参数：截取到第几位 re
  console.log(msg.substring(-3,1))//第一个参数：从第几位开始截取,第二个参数：截取到第几位 e
  console.log(msg.substr(-3,1))//第一个参数：从第几位开始截取,第二个参数：截取几位 r

6.检索字符串的技巧

对于字符串的检索，可以使用的方法有很多，比如includes、indexOf、startsWith

  let msg = "erbihoukeweizhuren"
//string.include第一个参数：需要查找的字符；第二个参数：从第几位开始查找。返回一个boolean值  
  console.log(msg.includes("e",3))// true
//string.indexOf第一个参数：需要查找的字符；第二个参数：从第几位开始查找。返回查询到第一个字符所在的位置，没有找到返回-1
  console.log(msg.indexOf("e",2))// 8
//string.lastIndexOf第一个参数：需要查找的字符；第二个参数：从第几位开始查找。返回查询到第一个字符所在的位置，没有找到返回-1;他和indexOf的区别就是他是从右向左查询
  console.log(msg.lastIndexOf("e",2))// 8
//string.startsWith,判断字符串的第一/N个字符是不是给定参数值，区分大小写
  console.log(msg.startsWith("b"，2))// true

7.字符串替换关键词

string.replace方法可以替换字符串关键字。

  const msg = "weizhuren"
  console.log(msg.replace("wei","zhu"))//zhuzhuren

8.字符串重复函数

String.repeat可以重复多次字符串。

 console.log("*".repeat(3))//重复n次字符串 ***
 function phone(mobile,len=4) {
   return String(mobile).slice(0,len*-1)+"*".repeat(len)
 }
 console.log(phone(15927030000))//1592703****

9.类型转换使用技巧

字符串和数字之间可以相互转化类型。

字符串转数字。

const msg = "99"
console.log(typeof msg)
console.log(msg + 1)//991
console.log(msg*1 + 1)//参与加法之外的数学运算 100
console.log(Number(msg) + 1)//使用Number函数转化为数字类型 100

数字转字符串。

const msg2 = 66
console.log(typeof msg2)//number
console.log(typeof (msg2 + ""))//数字类型连接字符串转化为字符串类型 String
console.log(typeof String(msg2))//使用String方法转化为字符串 String

使用其他函数将字符串转换为数字。

console.log(parseInt("789weizhuren"))//如果字符串以数字开头，那么数字使用parseInt方法就可以将非数字之前的数字以整数的形式返回 789
console.log(parseFloat("78.9weizhuren"))//如果字符串以数字开头，那么数字使用parseFloat方法就可以将非数字之前的数字以浮点数的形式返回 78.9

字符串的切分。

const msg  = "erbihou"
console.log(msg.split("bi"))//split将数组以括号内的标志进行划分成几组，并且不会保留划分标志 er，hou

将数组连接成为字符串。

const array = ["erbihou","weizhuren"]
console.log(array.join(" | "))//erbihou | weizhuren

将上面两个方法一起使用。

const msg = "weizhuren"
console.log(msg.split("").join("|"))//w|e|i|z|h|u|r|e|n

10.boolean的隐式转换原理

使用创建对象的方法定义一个boolean值变量。

const boolean = new Boolean(true)
console.log(boolean)//Boolean {true}
console.log(typeof boolean)//object
console.log(boolean.valueOf())//true
if(boolean.valueOf()){
  console.log("weizhuren")//weizhuren
}

直接定义一个boolean值变量。

let msg = true
console.log(typeof msg)//boolean
if(msg){
  console.log("weizhuren")//weizhuren
}

解析器会在进行布尔运算的时候，将一些非布尔值隐式转化为布尔值。无论是字符串还是数字都一样。

let msg = 99
if(msg){//这里将数字转化为波尔类型true
  console.log(msg)//99
}
console.log(msg == true)//这里将布尔类型转化成了数字类型，99！=1 false

11.显式转化为Boolean类型

我们可以将所有非boolean类型转化为boolean。

let number = 0
console.log(typeof number)
console.log(typeof !!number,!!number)//在做boolean判断时，可以将数字类型转化成boolean类型 boolean false
console.log(Boolean(number))//使用boolean方法直接将数字类型转化成boolean类型 false

//和数字相同，字符串也可以使用以上两种方式转化为boolean类型
let msg = "weizhuren"
console.log(typeof !!msg,!!msg)//boolean true
console.log(Boolean(msg))//true

//和数字相同，数组也可以使用以上两种方式转化为boolean类型
let array = []
console.log(typeof !!array,!!array)//boolean true
console.log(Boolean(array))//true
//其他所有类型都可以进行这样的转化

12.boolean类型实例操作

设计了一个判断输入年份是否正确的demo。

whileYear:while(true){//给循环加上标签，方便退出循环
  let thisYear = new Date()//获取当前时间
  const year = prompt("今年是哪一年？").trim()//将输入内容的空格去除
  if(!year)continue//如果没有输入继续循环
  if(year == thisYear.getFullYear()){//判断输入的年份是否符合要求
    console.log("回答正确!")
    break whileYear//退出循环
  }else{
    console.log("回答错误!")
  }
}

13.Number声明方式与基本函数

声明Number类型可以直接声明也可以使用创建对象的方式声明。

let number = new Number(99)//使用创建对象的方式声明 引用类型
let number2 = 88//直接声明 值类型
console.log(typeof number,typeof number2)//object number
console.log(number + 1,number2 + 2)//100 90
console.log(number.valueOf() + 1,number2.valueOf() + 2)//100 90

JavaScript还为Number类型提供了一些方法，除了以下列举的之外还有很多。

let number = 99.931
console.log(Number.isInteger(number))//判断是否是整数 false
console.log(number.toFixed(2))//四舍五入数字，可以指定四舍五入的小数点后的位数 100

14.NaN

NaN（Not a Number），代表该变量不是一个数字类型。

console.log(Number("weizhuren"))//将字符串转化为数字，如果非数字则返回NaN，如果是数字则返回数字
console.log(2 / "weizhuren")//NaN
console.log(NaN == NaN)//NaN不能进行比较，所以不能直接对比 false
console.log(Number.isNaN(2 / "weizhuren"))//使用NUmber.isNaN直接验证是否为数字 true
console.log(Object.is(2 / "weizhuren",NaN))//使用Object.is方法（同值验证）验证是否是NaN true

let array = [1, 2, 3]
console.log(Number(array))//转化数组返回NaN NaN
let obj = {}
console.log(Number(obj))//转化普通对象返回NaN，转化方法且方法返回数字时，可以返回对应数字 NaN

15.Math数学计算

数学计算方法有很多，这里介绍几个常用的方法。

console.log(Math.max(1,2,3,4,5))//返回一个最大数字 5
console.log(Math.min(1,2,3,4,5))//返回一个最小数字 1
//以上两种方法不支持数组
console.log(Math.floor(5.96))//向下取整 5
console.log(Math.ceil(5.66))//向上取整 6
console.log((5.66).toFixed(1))//四舍五入,可以限制位数 5.7
console.log(Math.round(5.46))//四舍五入，不可以限制位数 5

16.Math.random随机数

Math.random生成一个0~1的随机数。

console.log(Math.random())//一个0~1的随机数

17.日期时间戳

时间和时间戳都是开发过程中经常使用到的。

const date = new Date()
console.log(date)//Wed Jan 08 2020 16:51:46 GMT+0800 (中国标准时间)
console.log(typeof date)//object
console.log(date * 1)//可以返回一个时间戳 1578473506761

const date2 = Date()
console.log(date2)//Wed Jan 08 2020 16:51:46 GMT+0800 (中国标准时间)
console.log(typeof date2)//string
console.log(date2 * 1)//NaN

const date3 = Date.now()//直接获得时间戳 
console.log(date3)//1578473506761

const date4 = new Date("1995-11-29 12:25:03")
console.log(date4.getFullYear())//1995

const date5 = new Date(1995,11,29,12,25,03)
console.log(date5.getFullYear())//1995

日期转化为时间戳的方法。

const date = new Date("1995-11-29 12:25:03")
console.log(date * 1)
console.log(Number(date))
console.log(date.valueOf())
console.log(date.getTime())

时间戳转化为时间的方法。

const date = new Date("1995-11-29 12:25:03")
const timestamp = date.valueOf()
console.log(new Date(timestamp))