JS篇四：数据类型知识扩展_js 部分拓展知识-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_63022858/article/details/142882681

一、数据类型知识扩展

1、两大数据类型

简述：主要划分为值数据类型与引用数据类型。

基本数据类型的值是不可变的，引用数据类型的值是可修改的。

（基本数据类型的值直接在栈内存中存储，而引用数据类型（如对象）是保存在堆内存中的，变量保存的是对象的内存地址（即对象的引用）。‌）

值数据类型

Number（数值，包含NaN）
String（字符串）
Boolean（布尔值）
Undefined（未定义/未初始化）
Null（空对象）
Symbol（独一无二的值，ES6新增）
BigInt（大整数，ES 2020新增）

引用数据类型

Object（对象，其中Array数组和Function函数也属于对象的一种）

2、Object类型

简述：这里暂时不说数组和函数，只单纯的说说它的构建方式。

构建方式

①、对象字面量方式‌

使用大括号{}直接定义对象，可以同时定义属性和方法。

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  sayHello: function() {
    console.log("Hello!");
  }
};

②、使用`new Object()`语法‌

先创建一个空对象，然后给对象添加属性和方法。

var person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;
person.sayHello = function() {
  console.log("Hello!");
};

这里需要注意一下下面这个格式：

var person = new Object();

// 添加属性
person['firstName'] = 'John';
person['lastName'] = 'Doe';
person['age'] = 30;

// 访问属性
console.log(person['firstName']); // 输出: John

这两个的区别要注意一下：

‌语法差异‌：
- 使用.时，属性名必须是一个有效的标识符，且不能以数字开头。
- 使用[]时，属性名可以是任何字符串，包括那些不是有效标识符的名称，比如包含空格或特殊字符的名称，或者以数字开头的名称。
‌变量访问‌：
- 使用.时，你不能直接使用变量来动态访问属性。
- 使用[]时，你可以将变量作为属性名来动态访问属性。
‌可读性‌：
- 使用.时，代码通常更简洁、更易读，特别是当你访问的是简单的、已知的属性名时。
- 使用[]时，代码可能看起来更冗长，但在某些情况下（比如属性名存储在变量中），它提供了更大的灵活性。

范例展示：

var obj = {
  'firstName': 'John',
  'lastName': 'Doe',
  'age': 30,
  '123': 'number'
};

// 使用.访问属性
console.log(obj.firstName); // 输出: John
// console.log(obj.123); // 语法错误，因为123不是有效的标识符

// 使用[]访问属性
console.log(obj['firstName']); // 输出: John
console.log(obj['lastName']); // 输出: Doe
console.log(obj['age']); // 输出: 30
console.log(obj['123']); // 输出: number

// 使用变量动态访问属性
var propertyName = 'firstName';
console.log(obj[propertyName]); // 输出: John

③、使用`Object.create()`方法‌

可以指定一个原型对象，并创建一个新的对象，这个新对象会继承原型对象的属性和方法。

var personPrototype = {
  sayHello: function() {
    console.log("Hello!");
  }
};

var person = Object.create(personPrototype);
person.firstName = "John";
person.lastName = "Doe";
person.age = 30;

④、使用构造函数‌

可以定义一个构造函数，然后使用new关键字来创建对象实例。

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello!");
  };
}

var person = new Person("John", "Doe", 30);

⑤、使用ES6的类语法‌

ES6引入了类的概念，使得对象的创建更加接近传统面向对象编程语言的风格。

class Person {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  sayHello() {
    console.log("Hello!");
  }
}

var person = new Person("John", "Doe", 30);

3、数据类型检测

instanceof ：是JS中的一个操作符，用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。（简单来说，它用于判断一个对象是否是某个构造函数的实例。）

基本上都是用于判断某某某——是否等于——某某某

范例：

function Car(make, model) {
  this.make = make;
  this.model = model;
}

const auto = new Car('Honda', 'Accord');

console.log(auto instanceof Car);    // 输出: true
console.log(auto instanceof Object); // 输出: true

在这里还要增加一个判断属性——typeof

两者进行对比：

‌判断方式‌：
- instanceof 操作符用于判断一个变量是否是某个构造函数的实例，它检查的是原型链。
- typeof 操作符用于判断一个变量的基本类型，它返回的是一个表示该变量类型的字符串。
‌返回值‌：
- instanceof 返回的是一个布尔值（true 或 false），表示变量是否是某个构造函数的实例。
- typeof 返回的是一个表示变量类型的字符串，如 'number'、'string'、'boolean'、'object'、'function'、'undefined' 和 'symbol'（ES6新增）。
‌使用场景‌：
- instanceof 通常用于判断一个对象是否是特定类型的实例，特别是当对象是通过构造函数或类创建的，并且想要确定它是否属于某个特定的类或其子类。
- typeof 通常用于判断变量的基本数据类型，它可以帮助我们区分数字、字符串、布尔值等基本类型，以及函数、对象和未定义等更复杂的类型。
‌局限性‌：
- instanceof 不能正确地检测跨 iframe 的对象数组，因为它依赖于原型链，而原型链在不同的 iframe 之间是不共享的。
- typeof 对于所有对象类型（包括数组和 null）都会返回 'object'，这使得它在判断具体对象类型时不够准确。例如，typeof [1, 2, 3] 和 typeof null 都会返回 'object'，尽管它们实际上是完全不同的类型。