JS数据类型的探究

JS数据类型的探究

分思考三部曲?

1. 是什么?
2. 为什么?
3. 怎么做?

一:什么是数据类型?

在程序设计的类型系统中，数据类型（英语：Data type），又称资料型态、资料型别，是用来约束数据的解释。在编程语言中，常见的数据类型包括原始类型（如：整数、浮点数或字符）、多元组、记录单元、代数数据类型、抽象数据类型、参考类型、类以及函数类型。数据类型描述了数值的表示法、解释和结构，并以算法操作，或是对象在存储器中的存储区，或者其它存储设备。(摘自维基百科)

js的数据类型有哪些?

• 按大类分，2种（基本类型： String、Number、BigInt、Boolean、Symbol、Undefined、Null七种，引用类型： Object一种）

• 按具体类分，7种(忽略BigInt) | 8种

  1. Number：数字数据类型

  2. BigInt：数值（率属数字类型的数据）

  3. String：字符串

  4. Boolean：布尔值

  5. Symbol：值都是唯一的。

  6. Undefined：原始值为**undefined**

  7. Null：原始值为**null**

  8. Object：对象（存储各种键值集合和更复杂的实体）

• 其中对象类型中有以下几种：

  1. Object

  2. Date

  3. Array

  4. Function

二:为什么要定义数据类型?

基本类型直接代表了最底层的语言实现，用来约束数据。

三:怎么创建数据类型或者怎么使用数据类型?

创建数据(使用)：

const num = 1 (常用，最简洁)
const num1 = new Number(1) (不推荐，实际编码用的很少)
const num2 = Number('233') (强制转换类型时候用到)

const theBiggestInt = 9007199254740991n; (整数字面量后面加上n的方式定义一个BigInt)
const alsoHuge = BigInt(9007199254740991);

const str = '123'
const str1 = new String('123') (不推荐，实际编码用的很少)
const str2 = String(233) (强制转换类型时候用到)

// 布尔值只有两个值 true 和 false
const flag = true (常用)
// 以下是布尔值注意点:
const x = new Boolean(false);
if (x) {
  // 这里的代码会被执行
}
const x1 = false;
if (x1) {
  // 这里的代码不会执行
}

// symble
const symbol = Symbol('foo');
console.log(Symbol('foo') === Symbol('foo')); // false

// undefined  以下两个语句是一样的
var a 
var a = undefined
console.log(a === undefined) // true

// null
var b = null
console.log(b === null) // ture
// undefined 和 null 的原始值是唯一的，可以比较判断

// 创建对象 可以通过构造函数形式 或者 字面量的形式
// object
const obj = {name: 'zhangsan', age: 18}
const obj1 = new Object({name: 'zhangsan', age: 18})

// date
const date = new Date()

// array
const arr = [1, 2, 3, 4]
const arr1 = new Array(1, 2, 3, 4)

// 匿名函数
(function () {}) 
const btn = document.getElementById("btn")
btn.onclick = function () {
    alert("我是按钮的点击事件")
}

// 函数表达式
const fun = function () {
    console.log('我是一个函数的表达式')
}
fun() //调用

// 对象属性形式
const person = {
    name: '张三',
    age: 18,
    hobby: function() {
        console.log('爱好敲代码!')
    }
}
person.hobby()

//回调函数
const nums = [1, 3, 5, 7, 9]
const newNums = nums.map(function(item) {
    return item + 1
})
console.log(newNums) // [2, 4, 6, 8, 10]

// 函数返回值 将函数作为一个返回值 可再调用
function sum(a) {
    return function (b) {
        return a + b
    }
}
const total = sum(1)(2)
console.log(total)

延伸

如何判断数据类型?

• typeof：typeof 运算符返回一个字符串，表示操作数的类型。

  typeof 1                           // "number"
  typeof 'zhangsan'                  // "string"
  typeof true                        // "boolean"
  typeof abcd                        // "undefined"
  typeof Symbol('lisi')              // "symbol"
  typeof function(){}                // "function"
  typeof null                        // "object"
  typeof {}                          // "object"
  typeof []                          // "object"
  

• instanceof：instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，返回布尔值，只用来检测对象数据类型。

  语法: object instanceof constructor
  参数: object为某个实例对象  constructor为某个构造函数
  以下为window内置对象,类似Array,Object,Function都是内置构造函数(别称: 内置对象 || 函数对象)
  
  [] instanceof Array                // true
  [] instanceof Object               // true
  {} instanceof Object               // true
  function(){} instanceof Function   // true
  function(){} instanceof Object     // true
  null instanceof Object             // true
  
  // new 构造函数的举例:
  function Person(name, age) {
  	this.name = name
  	this.age = age
  }
  const zhangsan = new Person('张三', 18) // Person {name: '张三', age: 18}
  zhangsan instanceof Person // true
  

• constructor：所有对象（使用 Object.create(null) 创建的对象除外）都将具有 constructor 属性

  语法：object instanceof constructor
  参数：object为某个实例对象  constructor为某个构造函数
  
  const n = 1
  const m = '123'
  const flag = true
  const sym = Symbol('bian')
  const obj = {}
  const array = []
  const fun = function () {}
  
  n.constructor === Number       // true
  m.constructor === String       // true
  flag.constructor === Boolean   // true
  sym.constructor === Symbol     // true
  obj.constructor === Object     // true
  array.constructor === Array    // true
  fun.constructor === Function   // true
  array.constructor === Object   // false
  fun.constructor === Object     // false
  

• Object.prototype.toString()：toString() 方法返回一个表示该对象的字符串。

  // Object.prototype.toString() 返回 "[object Type]"
  
  Object.prototype.toString.call(null)          // "[object Null]"
  Object.prototype.toString.call(undefined)     // "[object Undefined]"
  Object.prototype.toString.call(1)             // "[object Number]"
  Object.prototype.toString.call('str')         // "[object String]"
  Object.prototype.toString.call({})            // "[object Object]"
  Object.prototype.toString.call([])            // "[object Array]"
  Object.prototype.toString.call(Symbol(666))   // "[object Symbol]"
  Object.prototype.toString.call(function(){})  // "[object Function]"
  

补充

字面量:

在计算机科学中，字面量（literal）是用于表达源代码中一个固定值的表示法（notation）。几乎所有计算机编程语言都具有对基本值的字面量表示，诸如：整数、浮点数以及字符串；而有很多也对布尔类型和字符类型的值也支持字面量表示；还有一些甚至对枚举类型的元素以及像数组、记录和对象等复合类型的值也支持字面量表示法。（摘自百度百科）

​ 简单理解就是赋值等号的右边，例如：

var a = 'hello world'   字面量就是'hello world'
var obj = {name: 'xiaoming', sex: 'male'}   字面量就是{name: 'xiaoming', sex: 'male'} 

内置对象(JavaScript 标准内置对象):

这里的术语"全局对象"（或标准内置对象）不应与global 对象混淆。这里的"全局对象"指的是处在全局作用域里的多个对象。

global 对象可以在全局作用域里通过使用this访问到（但只有在 ECMAScript 5 的非严格模式下才可以，在严格模式下得到的是 undefined）。其实全局作用域包含全局对象中的属性，包括它可能继承来的属性。

全局作用域中的其他对象则可由用户的脚本创建，或由宿主程序提供。浏览器环境中所提供的宿主对象的说明可以在这里找到：API 参考。

Object/Function/Boolean/Symbol/Number/Array/Promise等都是内置对象(别称:构造函数/函数对象/基类)，js全局作用域的this常指的是window