js有什么数据类型？这些数据类型都有什么操作方法和特性？怎样检测一个变量属于那种数据类型？

本文链接：https://blog.csdn.net/guoao20000915/article/details/125731540

程序员鱼乐，全网同名，目前全网粉丝2000+，我也会坚持写博客拍视频，分享编程知识与生活日常。还是个小菜狗，如有错误还请大佬们指出，欢迎大佬评论区补充知识。

数据类型

基本数据类型：
1. String 字符串型
2. Number 数值型
3. Boolean 布尔型
4. Null 空对象，使用typeof null 打印出来时object
5. Undefined 未定义型
6. BigInt 可以表示任意大的整数，后面要加n，例如4564565356656n
7. Symbol 符号型，使用new Symbol()会生成全局独一无二的值
```
const a = Symbol()
const b = Symbol()
console.log(a == b) // false
```
引用数据类型
1. Array 数组
2. Object 对象
3. Function 函数
4. Date 日期
5. RegExp 正则

常用数据类型的操作方法和特性

String

反斜杠是一个转义字符。转义字符将特殊字符转换为字符串字符

添加转义字符来使用引号：
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

字符串操作方法

<script>
    var str = "qwertyuiopasdfghjklzxcvbnm"

    // 1.charAt()   返回指定索引的字符
    console.log("qwertyuiopasdfghjklzxcvbnm".charAt(0));  // "q"

    // 2.concat()   连接两个字符串
    console.log("qwertyuiopasdfghjklzxcvbnm".concat("guoao")); // "qwertyuiopasdfghjklzxcvbnmguoao"

    // 3.indexOf()  返回指定字符第一次出现的索引
    console.log("qwertyuiopasdfghjklzxcvbnm".indexOf("q"));  // 0

    // 4.lastIndexOf()  返回指定字符最后一次出现的索引
    console.log("qwqwqw".lastIndexOf("q"));  // 4

    // 5.replace()  替换指定字符
    console.log("aabbaa".replace("b", "a"));  // "aaabaa"

    // 6.slice()  截取字符串，返回被截取的字符串
    console.log("asdfg".slice(0,2));  // "as"

    // 7.split()    将字符串转化为数组
    console.log("asbs".split(''));  //  ['a', 's', 'b', 's']

    // 8.substr()   截取起始字符和传入要截取的字符个数的字符串，返回被截取之后的字符串
    console.log("asda".substr(2));  // "da"

    // 9.substring()   类似于slice
    console.log("asdfg".substring(0,2));  // "as"

    // 10.toString()    转化为字符串
    console.log([1,2,3].toString());  // "1,2,3"

    // 11.trim()    去掉字符串两边的空格
    console.log(" aas s ".trim());  // "aas s"

    // 12.toUpperCase    将小写字母转化为大写字母
    console.log("abcc".toUpperCase());  // "ABCC"

    // 13.toLowerCase   将大写字母转化为小写字母
    console.log("AAA".toLowerCase());  // "aaa"

</script>

Number

转化为数值型的方法
1. Number()
2. parseInt()
3. parseFloat()

NaN：not a number(不是一个数字)

// NaN有两个特性。第一，任何与NaN计算的结果都是NaN，注意：执行运算时，非带"+"号的运算，只要有NaN参与,执行结果都是NaN。如果带加号，有字符串运算时就是进行字符串的拼接;第二，NaN与任何值都不相等，包括NaN本身。
console.log(NaN + 10)  // NaN
console.log(NaN * 'blue')  // NaN
console.log(NaN + 'blue')  // NaNblue，NaNblue是一个字符串
console.log(NaN == NaN)  // false

isNaN() 接收一个参数，判断该参数是否 “不是数值”

// 任何不能被转化为数字的值，使用isNaN方法都会返回true
console.log(isNaN({}));  // true
console.log(isNaN(NaN));  // true
console.log(isNaN(true));  // false，true转化为数字是1
console.log(isNaN(false));  // false，false转化为数字是0
console.log(isNaN('blue'));  // true
console.log(isNaN(''))  // false，空字符串转化为数字是0

Array

<script>
    // 1.join() 将数组转化为字符串
    console.log([1,2,3].join(','));  // "1,2,3"

    // 2.push() 从数组尾部添加一个元素，pop() 从数组尾部删除一个元素，两个方法的返回值都是添加或删除的元素

    // 3.shift() 从数组首部删除一个元素 和 unshift() 从数组首部添加一个元素，两个方法的返回值都是添加或删除的元素
    console.log([1,2,1,2].shift());  // 1

    // 4.sort() 排序
    console.log([1,4,2,1].sort());  // [1, 1, 2, 4]
    // sort也可以接收一个函数，可以对数组或者对象进行排序
    console.log([12,54,1,54].sort((a,b)=>{return a-b}));  // [ 1, 12, 54, 54 ]
    console.log([12,54,1,54].sort((a,b)=>{return b-a}));  // [ 54, 54, 12, 1 ]
    console.log([{name: '小a', age: 20}, {name: '小b', age: 50}, {name:'小c', age: 30}].sort((a,b)=>{return a.age-b.age}))  // [{ name: '小a', age: 20 },{ name: '小c', age: 30 },{ name: '小b', age: 50 }]

    // 5.reverse() 将数组翻转
    console.log([1,2,3].reverse());  // [ 3, 2, 1 ]

    // 6.concat() 拼接两个数组
    console.log([1,2,3].concat([4,5,6]));  // [ 1, 2, 3, 4, 5, 6 ]

    // 7.slice() 根据索引截取数组(前闭后开)，返回被截取的数组
    console.log([1,2,3,4].slice(0,2));  // [1, 2]

    // 8.splice()   很强大的数组方法，它有很多种用法，可以实现删除、插入和替换，它会改变原数组。
    // 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。
    let arr1 = [1,2,3,4]
    console.log(arr1.splice(0,2))  // [ 1, 2 ]，返回删除的数组
    console.log(arr1)  // [3, 4]

    // 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。
    let arr2 = [1,2,3,4]
    console.log(arr2.splice(0,0,8,3))  // []，返回一个空数组
    console.log(arr2)  // [ 8, 3, 1, 2, 3, 4 ]

    // 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,4,6)会删除当前数组位置 2 的项，然后再从位置 2 开始插入4和6。
    let arr3 = [1,2,3,4]
    console.log(arr3.splice(1,1,8,3))  // [ 2 ]，返回删除的数组
    console.log(arr3)  // [ 1, 8, 3, 3, 4 ]

    // 9.indexOf()和 lastIndexOf() （ES5新增）
    // 返回指定元素的索引，没有找到返回-1

    // 10.forEach() （ES5新增）

    // 11.map() （ES5新增）
 	// 一般可以用map构造一个新数组，例如：
    var arr = ['A','B','C']
    let arr1 = arr.map((item, index)=>{
        return {
            id: index,
            value: item
        }
    })
    console.log(arr1)  // [ { id: 0, value: 'A' }, { id: 1, value: 'B' }, { id: 2, value: 'C' } ]

    // 12.filter() （ES5新增）“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
    // var arr1 = [1,2,3,4,5,6,7,8]
    // var arr2 = arr1.filter((item)=>{
    //     return item%2==0
    // })
    // console.log(arr2);

    // 13.every() （ES5新增）判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
    // var arr1 = [1,2,3,4,5,6,7,8]
    // var arr2 = arr1.every((item)=>{
    //     return item%2==0
    // })
    console.log(arr2);
    // false

    // 14.some() （ES5新增）判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
    // var arr1 = [1,2,3,4,5,6,7,8]
    // var arr2 = arr1.some((item)=>{
    //     return item%2==0
    // })
    // console.log(arr2);
    // true

    // 15.reduce()和 reduceRight() （ES5新增）
    // 这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
    // 这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
    // 传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。
    // var arr1 = [1,2,3,4,5,6,7,8]
    // var arr2 = arr1.reduce((ago,now,index,array)=>{
    //     return ago+now
    // }, 0)
    // console.log(arr2);
    // 36
</script>

判断数据类型的方法

typeof
```
typeof '5' // string
typeof 5 // number
typeof null // object
typeof undefined // undefined
typeof true // boolean
typeof Symbol('5') // symbol
typeof 5n // bigint
typeof new Object(); // object
typeof new Array() // object
typeof new Function(); // function
```
分析：typeof可以判断基本数据类型(除null)，但是不能区分数组，对象。为什么tpyeof(null)会是object? 因为对象都会被转化为二进制，而null转化为二进制全为零，在js中，如果前三位为零，js就会把他当作对象，这是js的一个BUG。

instanceof

instanceof实际上是判断两个引用数据类型是否属于同一原型链，因此不适用于判断基本数据类型。

function Person() {};
const person = new Person();
person instanceof Person;  // true

注意：空对象的判断

let obj1 = {}
console.log(obj1 instanceof Object) // true

let obj2 = Object.create(null)
console.log(obj2 instanceof Object) // false

let obj3 = Object.create({})
console.log(obj3 instanceof Object) // true

constructor

原理：每一个实例对象都可以通过constructor访问它的构造函数，由于undefined和null是无效的对象，因此是没有constructor属性的,这两个值不能用这种方法判断。

let a = 'A'
console.log(a.__proto__.constructor === String);  // true
let b = ['B']
console.log(b.__proto__.constructor === Array) // true
let c = null
console.log(c.__proto__.constructor)  // Cannot read property '__proto__' of null
let d = undefined
console.log(d.__proto__.constructor);  // Cannot read property '__proto__' of undefined

toString

console.log(Object.prototype.toString.call('A')) // [object String]
console.log(Object.prototype.toString.call([]))  // [object Array]
console.log(Object.prototype.toString.call({}))  // [object Object]
console.log(Object.prototype.toString.call(null))  // [object Null]

Object.ptototype.toString会返回对象的类型字符串，可以判断所有的数据类型，因为实例对象可能有自定义toString方法，因此最好需要加上call。

总结

面试官可能会问你数组、字符串有什么操作方法？如何判断某个变量属于什么数据类型？有时候会给你出题，比如console.log(null == 0)打印出来是什么？为什么console.log(null == 0)打印出来是false，console.log(null >= 0) 或 console.log(null <= 0) 打印出来是true。因为如果是>= 或 <=会将两边的数据类型转化为Number，Number(null) = 0，同理console.log([] >= 0)也是true。

如果有时间，最好把这些都试试

console.log(Number(null))  // 0
console.log(Number({}))  // NaN
console.log(Number([]))  // 0
console.log(Number(''))  // 0
console.log(Number('A'))  // NaN
console.log(Number(undefined))  // NaN