JavaScript数据类型(基本数据类型、数组及数组方法、获取变量数据类型、数据类型转换)

1. 基本数据类型

1.1 Number

数值可以是整数、浮点数

var num = 0;
console.log(num);       // 0

八进制和十六进制

var num_oct = 012;
// 自动转换为10进制输出
console.log(num_oct)        // 10

var num_hex = 0xf;
console.log(num_hex);       // 15

最大值和最小值

console.log(Number.MAX_VALUE);      // 1.7976931348623157e+308
console.log(Number.MIN_VALUE);      // 5e-324

无穷大和无穷小

console.log(Number.MAX_VALUE * 2);      // Infinity
console.log(Number.MAX_VALUE * -2);      // -Infinity

算术算符。优先级相同时从左向右执行，优先级不同如下所示：

• 乘、除、取余优先级相同
• 加、减优先级相同
• 乘、除、取余优先级大于加、减
• 使用()可以提升优先级

    console.log(1 + 1)  // 2
    console.log(1 - 1)  // 0
    console.log(1 * 1)  // 1
    console.log(1 / 1)  // 1
    console.log(1 % 1)  // 0

NaN和判断一个值是否为NaN。NaN不等于NaN

console.log('love' * 2)             // NaN

console.log(isNaN('love'))      // true

console.log(NaN === NaN)  // false

• 其它方法:
  • num.toFixed(number): 数值保留几位小数(四舍五入)，默认不保留小数。如果是整数使用toFixed也会保留小数
  • 转换成字符串方法: String(num)或num.toString()

1.2 Boolean

• 除了0，所有的数字都为true
• 除了"", 所有的字符串都为true

console.log(true + 1)   // 2
console.log(false + 1)  // 1

1.3 String及其方法

var str = '我是一个"字符串"'
console.log(str)    // 我是一个"字符串"

// 字符串长度计算
console.log(str.length)     // 9

// 字符串拼接
console.log(str + true)     // 我是一个"字符串"true

let num = 6
// 模板字符串。模板字符串中可以换行
console.log(`num的值是${num}`)  // num的值是6

• 字符串转义符：\t、\、'、"、\t、\b(空格)
• 字符串有方法，是因为Javascript底层使用构造函数new String('str')将字符串封装成了对象
• 其它方法:
  • str.trim(): 去除字符串前后空格
  • str.split('分隔符'): 使用分隔符将字符串，拆分成数组
  • str.substring(startIndex, endIndex): 截取字符串的一部分，index参数左闭右开，endIndex省略则表示截取到字符串末尾
  • str1.startsWith('str2', startIndex): 字符串从startIndex开始，是否以指定字符串开头，startIndex默认为0
  • str1.endsWith('str2'): 字符串是否以指定字符串结束
  • str1.includes('str2', startIndex): 字符串从startIndex开始，是否包含指定字符串，startIndex默认为0
  • str.toUpperCase(): 将字符串转换成大写
  • str.toLowerCase(): 将字符串转换成小写
  • str1.indexOf('str2'): 指定字符串在字符串中的开始索引号，找不到则返回-1
  • str1.match('str2'): 从字符串查找指定字符串，返回一个数组(例如: ['a', index: 0, input: 'abcde', groups: undefined])。支持正则表达式

1.4 Undefined和Null

• 注意Undefined和Null，与其它值进行相加后的结果区别
• 一个声明后没有被赋值的变量会有一个默认值undefined
• null表示赋值了，但是内容为空
• undefined == null为true，undefined === null为false

var var1;
console.log(var1)                // undefined
console.log('你好' + var1)        // 你好undefined
console.log(true + var1)         // NaN

var var2 = null
console.log('你好' + var2)        // 你好null
console.log(true + var2)         // 1

2. 数组

可以存储不同数据类型的元素

2.1 基本操作

• 数组的声明。注意: 以数组字面量[]开头，且上一行有代码的，需要添加;表明是新的一行

    let arr1 = ['a', 1]
    let arr2 = new Array('a', 1)
    console.log(arr1)    // ['a', 1]

• 数组元素的访问。访问不存在的索引的元素，值为undefined，不会发生数组越界

    console.log(arr[0])    // a

• 查看数组长度

    console.log(arr.length)    // 2

• 数组元素的修改

    arr[0] = 'b'

• 添加元素
  • push向后添加，返回数组最新长度
  • unshift向前添加，返回数组最新长度

    arr.push(2, 3)
    arr.unshift('c', 'b')
    console.log(arr)  // ['c', 'b', 'a', 1, 2, 3]

• 删除元素
  • pop从后删除一个元素，并返回删除的元素
  • shift从前删除一个元素，并返回删除的元素
  • splice从指定索引删除指定个数元素。如果不指定删除个数，则删除指定索引开始所有元素

    arr.pop()
    arr.shift()
    arr.splice(1, 2)

2.2 遍历数组

• 遍历数组方式一: for循环

    for(let index in arr) {
        console.log(arr[index])
    }

• 遍历数组方式二: forEach

    arr.forEach(function (item, index) {  // index可选，从0开始
      console.log(item)
    })

• 遍历数组方式三: map循环

    const newArr = arr.map(function (item, index) {   // index可选，从0开始
      return item
    })

2.3 过滤数组

• filter: 没有符合条件的元素则返回长度为0的数组

    const arr = [1, 2, 3]
    const newArr = arr.filter(function (item, index) {  // index可选，从0开始
      return item > 1
    })
    console.log(newArr)   // [2, 3]

2.4 数组排序和join转换

• 数组排序

    let arr = [3, 2, 1, 4]
    // 升序排列
    arr.sort(function (a, b) {
        return a - b
    })
    console.log(arr)  // [1, 2, 3, 4]

• join转换: 把数组中的所有元素，使用指定的分隔符，拼接成一个字符串

    const arr = ['a', 'b', 'c']
    console.log(arr.join('|'))    // a|b|c

2.5 其它内置方法

• reduce
  • 返回数组元素累计处理的结果，经常用于求和等
  • 参数含义分别为: 上一次处理的结果；当前元素的值；当前元素的索引号，源数组
  • 如果没有定义初始值，则第一个元素为初始值，第一次遍历的时候current就是第二个元素，index就是1
  • 如果定义了初始值，第一次遍历的时候current就是第一个元素，index就是0

    const arr = [2, 3, 4]
    const sum = arr.reduce((prev, current, index, arr) => prev + current, 1)
    console.log(sum)    // 10

• find: 遍历数组，返回符合条件的第一个数组元素，如果没有则返回undefined
• every: 遍历数组，如果数组所有元素都符合条件，则返回true，否则返回false
• some: 遍历数组，如果数组有一个元素符合条件，则返回true，否则返回false
• findIndex: 遍历数组，返回符合条件的第一个数组元素的索引值，如果没有则返回-1
• arr1.concat(arr2 | obj): 合并两个数组，返回新数组。注意: concat数组是对数组的浅拷贝，数组中的元素如果是对象则拷贝的是地址
• arr.reverse(): 返回反转后的原数组
• Array.from(arr): 将伪数组转换成一个新的真数组

2.6 解构赋值

解构赋值: 将数组的值，依次赋值给对应的变量

• 变量的数量大于数组元素数量时，多余的变量将被赋值为undefined。所以可以给变量赋默认值
• 变量的数量小于数组元素数量时，多余的数组元素将不会被赋值给变量，但可以利用在最末位声明剩余参数...arr进行接收多个剩余的数组元素
• 可以不声明变量，忽略某个数组元素的值
• 支持嵌套数组的解构赋值
• 数组解构赋值可以和对象解构赋值一起使用
• 函数的形参也可以使用数组的解构赋值

	const [a = 0, , [b, c], ...arr] = [1, 2, [3, 4], 5, 6]
	console.log(a)    // 1
    console.log(b)    // 3
    console.log(c)    // 4
    console.log(arr)  // [5, 6]

    // 交换2个变量的值
    let a = 1
    let b = 2;  // 这里必须要有分号
    [b, a] = [a, b]

3. 获取变量的数据类型，和数据类型转换

3.1 获取变量的数据类型

控制台中数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

var var1
console.log(typeof var1)     // undefined
console.log(typeof(null))     // object
console.log(typeof(NaN))     // number

3.2 数据类型转换

3.2.1 转换为String

var num = 10
console.log(num.toString())     // 10
// 强制转换
console.log(String(num))        // 10
// 隐式转换
console.log("" + num)           // 10

3.2.2 转换为number

var strPrice = "3.68"
console.log(parseInt(strPrice))             // 3
console.log(parseInt("120xxx"))          // 120
console.log(parseFloat(strPrice))           // 3.68
console.log(parseFloat("120xxx"))     // 120
// 强制转换
console.log(Number(strPrice))               // 3.68
// 利用算术运算(-、*、/)隐式转换为数值型
console.log(strPrice - 0)                   // 3.68
// 利用正号
console.log(+'22')                // 22

3.2.3 转换为Boolean

• 语法: Boolean(xxx)。如果值为false、null、undefined、NaN，则返回false，其余返回true
• !逻辑非运算符，有隐式转换为Boolean的功能
• ''、null和数值进行计算，会被隐式转换为0。如'' + 1进行运算，''会被隐式转换成0