【八股系列】介绍JavaScript全部数据类型，基本数据类型和引用数据类型的区别、使用场景？

在 JavaScript 中，共有 7 种数据类型，可以分为两大类：原始（基本）类型和引用类型。

1. 原始（基本）类型

原始类型的值是按值传递的，也就是说，当将一个原始类型的值赋值给另一个变量时，会在内存中创建一份新的副本。原始类型包括 Boolean、Null、Undefined、Number、String 和 Symbol (ECMAScript 6 新增)。

• Boolean：表示一个逻辑实体，可以有两个值：true 或 false。
• Null：表示故意缺少任何对象的值。它是一种对象类型，但只有一个值：null。
• Undefined：表示尚未赋值的变量。它是一种变量，可以声明但未被赋值。
• Number：表示数值，包括整数、浮点数和特殊值，如 NaN（非数字）和 Infinity。
• String：表示一串字符。
• Symbol：表示唯一且不可变的原始值。

2. 引用类型

引用类型的值是按引用传递的，也就是说，当将一个引用类型的值赋值给另一个变量时，会在内存中创建一个指向同一对象的引用。引用类型包括 Object 类型，JavaScript 内置了许多对象类型，如 Array、Date、RegExp 、Function 等。

• Object：表示一组键-值对的集合。除了 null 之外，所有值都可以被视为对象。

3. 基本类型和引用类型的区别

• 值是否可变：基本类型的值是不可变的，而引用类型的值是可变的。
• 值比较：基本类型的值在比较时使用严格相等（===）操作符，而引用类型的值在比较时使用恒等（==）操作符。
• 销毁：基本类型的值可以被直接销毁，而引用类型的值在没有任何引用指向它时，才会被垃圾回收器回收。

4. 使用场景

在 JavaScript 编程中，理解基本类型和引用类型的区别非常重要，因为这会影响到函数参数的传递、变量的赋值、值比较和内存的管理。

• 基本类型：在需要简单、快速的值传递时，可以使用基本类型。例如，在函数参数中传递一个原始类型的值时，会创建一个值的副本，对函数内部的修改不会影响到函数外部的原始值。
• 引用类型：在需要处理复杂、大型的数据结构时，可以使用引用类型。例如，在函数参数中传递一个引用类型的值时，会创建一个指向同一对象的引用，对函数内部的修改会直接影响到函数外部的原始值。

4.1. Boolean

4.1.1. 条件判断

Boolean 类型的值可以作为条件判断的依据。在条件判断中，除了 false 和 undefined、 null、 0、 NaN、 '' (空字符串) 这几个值会被自动转换为 false 之外，其他的值都将被自动转换为 true。

if (true) {
  console.log('This condition is true');
}

4.1.2. 循环

Boolean 类型的值可以作为循环的条件。

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

4.1.3. 函数返回值

Boolean 类型的值可以作为函数的返回值。在函数中，可以根据需要返回 true 或 false 来表示函数的执行结果。

function isEven(num) {
  return num % 2 === 0;
}

console.log(isEven(4)); // true
console.log(isEven(3)); // false

4.2. Null

4.2.1. 条件判断

Null 类型的值可以作为条件判断的依据。

if (null) {
  console.log('This condition is true');
} else {
  console.log('This condition is false'); // This condition is false
}

4.2.2. 函数返回值

Null 类型的值可以作为函数的返回值。在函数中，可以根据需要返回 null 来表示函数没有返回任何值。

function getNull() {
  return null;
}

console.log(getNull()); // null

4.2.3. 清空变量

Null 类型的值可以用来清空变量。在需要将一个变量的值重置为空时，可以将该变量的值设置为 null。

let myVar = 'Hello';
myVar = null;
console.log(myVar); // null

4.2.4. 检查变量是否为空

Null 类型的值可以用来检查变量是否为空。在需要判断一个变量是否为空时，可以将该变量的值与 null 进行严格相等（===）的比较。

let myVar = null;
if (myVar === null) {
  console.log('myVar is null');
}

4.3. Undefained

4.3.1. 条件判断

Undefined 类型的值可以作为条件判断的依据。

if (undefined) {
  console.log('This condition is true');
} else {
  console.log('This condition is false'); // This condition is false
}

4.3.2. 函数返回值

Undefined 类型的值可以作为函数的返回值。在函数中，如果没有显式地返回任何值，或者在函数的最后一行没有返回任何值，那么函数的返回值将默认为 undefined。

function getUndefined() {
  
}

console.log(getUndefined()); // undefined

4.3.3. 检查变量是否未被赋值

Undefined 类型的值可以用来检查变量是否未被赋值。在需要判断一个变量是否未被赋值时，可以将该变量的值与 undefined 进行严格相等（===）的比较。

let myVar;
if (myVar === undefined) {
  console.log('myVar is undefined');
}

4.4.4.清空变量

Undefined 类型的值可以用来清空变量。在需要将一个变量的值重置为空时，可以将该变量的值设置为 undefined。

let myVar = 'Hello';
myVar = undefined;
console.log(myVar); // undefined

4.5. Number

4.5.1. 数学运算

Number 类型的值可以用于进行数学运算，如加法、减法、乘法、除法等。

let num1 = 5;
let num2 = 3;
let sum = num1 + num2;
console.log(sum); // 8

4.5.2. 条件判断

Number 类型的值可以作为条件判断的依据。

let num = 10;
if (num > 5) {
  console.log('The number is greater than 5');
}

4.5.3. 函数返回值

Number 类型的值可以作为函数的返回值。在函数中，可以根据需要返回数值来表示函数的执行结果。

function calculateSum(num1, num2) {
  return num1 + num2;
}

let sum = calculateSum(5, 3);
console.log(sum); // 8

4.5.4. 数组元素

Number 类型的值可以作为数组的元素。在需要存储一组数值时，可以将 Number 类型的值存储在数组中。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[2]); // 3

4.5.5.数值转换

Number 类型的值可以用于将其他类型的值转换为数值。在需要将非数值的值转换为数值时，可以将该值传递给 Number() 函数。

let str = '10';
let num = Number(str);
console.log(num + 5); // 15

4.5.6. 数值比较

Number 类型的值可以用于进行数值比较，如 >、 <、 >=、 <= 等。

let num1 = 5;
let num2 = 3;
if (num1 > num2) {
  console.log('The number 5 is greater than 3');
}

4.5.7. 数值操作

Number 类型的值可以用于进行数值操作，如取整、取余等。

let num = 10.5;
console.log(Math.floor(num)); // 10
console.log(num % 3); // 0.5

4.6. String

4.6.1. 文本操作

String 类型的值可以用于进行文本操作，如拼接、截取、搜索等。

let firstName = 'John';
let lastName = 'Doe';
let fullName = firstName + ' + lastName;
console.log(fullName); // John Doe

4.6.2. 条件判断

String 类型的值可以作为条件判断的依据。

let greeting = 'Hello';
if (greeting) {
  console.log('The greeting is not empty');
}

4.6.3. 函数返回值

String 类型的值可以作为函数的返回值。在函数中，可以根据需要返回字符串来表示函数的执行结果。

function getGreeting() {
  return 'Hello, World!';
}

console.log(getGreeting()); // Hello, World!

4.6.4. 数组元素

String 类型的值可以作为数组的元素。在需要存储一组字符串时，可以将 String 类型的值存储在数组中。

let names = ['John', 'Doe', 'Smith'];
console.log(names[1]); // Doe

4.6.5. 数值转换

String 类型的值可以用于将其他类型的值转换为字符串。在需要将非字符串的值转换为字符串时，可以将该值传递给 String() 函数。

let num = 10;
let str = String(num);
console.log(str + 's a number'); // 10 is a number

4.6.6. HTML 元素

String 类型的值可以用于创建 HTML 元素。在需要将文本内容添加到 HTML 元素中时，可以将字符串值作为 HTML 元素的属性值。

let divElement = document.createElement('div');
divElement.textContent = 'Hello, World!';
document.body.appendChild(divElement);

4.6.7. 正则表达式

String 类型的值可以用于创建正则表达式。在需要使用正则表达式来匹配、搜索或替换文本时，可以将字符串值作为正则表达式的模式。

let text = 'Hello, World!';
let regex = /World/;
let match = text.match(regex);
console.log(match[0]); // World

4.7. Symbol

4.7.1. 唯一标识符

Symbol 值可以用作对象的唯一标识符。这在需要保证对象的属性键是唯一的且不可更改时很有用。

const uniqueId = Symbol('uniqueId');
const obj = {};
obj[uniqueId] = 'Hello, World!';
console.log(obj); // { Symbol(uniqueId): "Hello, World!" }

4.7.2. 私有属性

Symbol 值可以用作对象的私有属性键。通过将属性键定义为 Symbol 值，可以将其标记为私有，并防止在代码中意外地修改或访问它们。

const privateProperty = Symbol('privateProperty');
class MyClass {
  constructor() {
    this[privateProperty] = 'Private value';
  }

  getPrivateValue() {
    return this[privateProperty];
  }
}

const instance = new MyClass();
console.log(instance.privateProperty); // undefined
console.log(instance.getPrivateValue()); // Private value

4.7.3. 防止属性键冲突

Symbol 值可以用作对象的属性键，以避免与其他代码中的属性键冲突。

const symbolKey = Symbol('symbolKey');
const obj1 = {};
const obj2 = {};

obj1[symbolKey] = 'Value for obj1';
obj2[symbolKey] = 'Value for obj2';

console.log(obj1[symbolKey]); // Value for obj1
console.log(obj2[symbolKey]); // Value for obj2

4.7.4. 元编程

Symbol 值可以用作元编程的基础，例如在创建框架或库时定义自定义行为。

const customBehavior = Symbol('customBehavior');

class MyClass {
  constructor() {
    this[customBehavior] = () => {
      console.log('Custom behavior executed');
    };
  }

  executeCustomBehavior() {
    this[customBehavior]();
  }
}

const instance = new MyClass();
instance.executeCustomBehavior(); // Custom behavior executed

4.8. Object

4.8.1 存储和访问数据

Object 类型可以用来存储和访问一组相关的数据。例如，可以创建一个 Object 来表示一个人，并将其属性设置为 name、 age、 gender 等。

let person = {
  name: 'John',
  age: 30,
  gender: 'Male'
};

console.log(person.name); // John
console.log(person.age); // 30
console.log(person.gender); // Male

4.8.2. 函数参数和返回值

Object 类型的值可以作为函数的参数和返回值。在需要将一组相关的数据传递给函数时，可以将其作为 Object 类型的值。

function greetPerson(person) {
  console.log(`Hello, ${person.name}!`);
}

let person = {
  name: 'John'
};

greetPerson(person); // Hello, John!

4.8.3. 模块和命名空间

Object 类型可以用来创建模块和命名空间。在需要将一组相关的代码和数据封装在一起时，可以将其作为 Object 类型的值。

let myModule = {
  utils: {
    add: function(a, b) {
      return a + b;
    },
    subtract: function(a, b) {
      return a - b;
    }
  },
  data: {
    users: [
      { name: 'John', age: 30 },
      { name: 'Jane', age: 25 }
    ]
  }
};

console.log(myModule.utils.add(5, 3)); // 8
console.log(myModule.data.users[0].name); // John

4.8.4. 数据结构

Object 类型可以用来实现各种数据结构，如栈、队列、链表、字典等。在需要使用这些数据结构时，可以将其作为 Object 类型的值。

let stack = {
  items: [],
  push: function(item) {
    this.items.push(item);
  },
  pop: function() {
    return this.items.pop();
  }
};

stack.push('John');
stack.push('Jane');
console.log(stack.pop()); // Jane
console.log(stack.pop()); // John

其它如Array、Function、Date、RegExp等请自行查看MDN文档。