【八股系列】介绍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文档。
原文地址:https://blog.csdn.net/to_the_Future/article/details/138902648
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!