JavaScript 类型指南
历史背景
JavaScript作为一种动态类型语言，支持多种数据类型。其原始数据类型包括数字、字符串、布尔值、空、未定义以及符号（ES6引入），而引用数据类型则包括对象、数组、函数、日期以及正则表达式。随着ECMAScript标准的不断更新，JavaScript在功能和性能上得到了显著改进，并且逐渐成为一门广泛应用的通用编程语言，已经不仅仅局限于前端开发，在后端开发（Node.js）以及移动应用开发等领域也有着广泛的应用。
类型转换
JavaScript中的类型转换指的是将一个数据类型转换为另一个数据类型的过程。这种转换可以是隐式的（由JavaScript自动完成），也可以是显式的（通过使用内置函数或操作符来执行）。理解类型转换的概念对于编写具有一致性和可靠性的代码至关重要，因为它直接影响着值的比较、运算和数据处理的结果。类型转换的正确应用有助于确保数据的合理性，并促进代码的可维护性和可读性。
显式（强制）类型转换
显式类型转换，又称为强制类型转换，指的是开发人员明确地将一个数据类型转换为另一个数据类型的过程。在 JavaScript 中，可以使用内置函数或操作符来执行显式类型转换，以满足特定需求。这种转换通常用于确保数据的一致性和正确性，避免意外错误，并提供更精准的控制。通过显式类型转换，开发人员可以根据需要将值从一种类型转换为另一种类型，例如将字符串转换为数字、将数字转换为字符串等。
转成字符串
- String() 函数
let num = 123;
let strNum = String(num); // 将数字转换为字符串，结果为 "123"
let bool = true;
let strBool = String(bool); // 将布尔值转换为字符串，结果为 "true"
let date = new Date();
let strDate = String(date); // 将日期转换为字符串，结果为 根据当前日期时间生成的字符串
let arr = [1, 2, 3];
let strArr = String(arr); // 将数组转换为字符串，结果为 "1,2,3"
let obj = { key: "value" };
let strObj = String(obj); // 对象默认调用 toString() 返回 "[object Object]"，如果希望得到对象属性的字符串，需要自定义 toString 方法
- toString() 方法
对于数字、布尔值、对象等数据类型，都可以使用 toString() 方法进行字符串转换。
let num = 123;
let strNum = num.toString(); // 将数字转换为字符串，结果为 "123"
let bool = true;
let strBool = bool.toString(); // 将布尔值转换为字符串，结果为 "true"
let date = new Date();
let strDate = date.toString(); // 将日期转换为字符串，结果为 根据当前日期时间生成的字符串
let arr = [1, 2, 3];
let strArr = arr.toString(); // 将数组转换为字符串，结果为 "1,2,3"
let obj = { key: "value" };
let strObj = obj.toString(); // 对象默认调用 toString() 返回 "[object Object]"，如果希望得到对象属性的字符串，需要自定义 toString 方法
-
使用模板字符串（Template Strings）
使用反引号 (`) 创建模板字符串可以将其他数据类型转换为字符串。
let num = 42;
let strNum = `${num}`; // 将数字转换为字符串，结果为 "42"
let bool = true;
let strBool = `${bool}`; // 将布尔值转换为字符串，结果为 "true"
let date = new Date();
let strDate = `${date}`; // 将日期转换为字符串，结果为 日期的字符串表示形式
let arr = [1, 2, 3];
let strArr = `${arr}`; // 将数组转换为字符串，结果为 "1,2,3"
let obj = { key: "value" };
let strObj = `${obj}`; // 将对象转换为字符串（'[object Object]'）
-
JSON.stringify() 方法
对于对象及其包含的值，可以使用 JSON.stringify() 方法将其转换为字符串。
let obj = { key: "value" };
let strObj = JSON.stringify(obj); // 将对象转换为字符串，结果为 '{"key":"value"}'
let arr = [1, 2, 3];
let strArr = JSON.stringify(arr); // 将数组转换为字符串，结果为 '[1,2,3]'
let num = 42;
let strNum = JSON.stringify(num); // 将数字转换为字符串，结果为 '42'
let bool = true;
let strBool = JSON.stringify(bool); // 将布尔值转换为字符串，结果为 'true'
let date = new Date();
let strDate = JSON.stringify(date); // 将日期转换为字符串，结果为 日期的字符串表示形式
转成数字
let str = "42";
let numStr = parseInt(str); // 使用parseInt()方法将字符串转换为整数，结果为 42，附带截取数字的功能
let floatStr = parseFloat(str); // 使用parseFloat()方法将字符串转换为浮点数，结果为 42.0，附带截取数字的功能
let numFromStringConstructor = Number(str); // 使用Number()构造函数将字符串转换为数字，结果为 42
let date = new Date();
let timestamp = date.getTime(); // 获取时间戳，即1970年1月1日至今的毫秒数
let numObj = Number(obj); // 将对象转换为数字，结果取决于对象的valueOf()方法返回值，如果没有合适的值，则根据toString()方法返回值转换
转成布尔
let value = 42;
let boolValue = !!value; // 使用逻辑非操作符将数字转换为布尔值，结果为 true
let num = 0;
let boolNum = Boolean(num); // 使用Boolean()构造函数将数字转换为布尔值，结果为 false
let str = "Hello";
let boolStr = str || false; // 使用 || 将字符串转换为布尔值，结果为 true
let boolStrTernary = str ? true : false; // 使用三元运算符将字符串转换为布尔值，结果为 true
let obj = { key: "value" };
let boolObj = !!obj; // 使用!!运算符将对象转换为布尔值，结果为 true
undefined和null
针对 undefined 和 null 这两种数据类型，它们本身就是表示特定状态的值，因此无需转换。
隐式类型转换
-
字符串连接运算符（+）
let number = 10; let stringConcatenation = "The number is: " + number; // 将数字隐式转换为字符串进行连接 -
数学运算符
let numericString = "10"; let addition = 10 + numericString; // 将字符串隐式转换为数字进行加法运算 -
逻辑运算符
let truthyValue = "Hello"; if (truthyValue) { // 字符串被隐式转换为布尔值进行条件判断 } -
比较运算符
let num = 42; let strNum = "42"; if (num == strNum) { // 字符串被隐式转换为数字进行比较 } -
三元运算符
let result = "42" ? "true" : "false"; // 将字符串隐式转换为布尔值进行条件判断
数组方法
在 JavaScript 编程语言中，数组是一种用于保存多个值的有序集合。每个值在数组中都有一个对应的数字索引，从0开始递增。这意味着数组提供了一种有效的方式来组织和访问大量相关的数据。JavaScript 数组具有动态性，允许随时添加或删除元素，并且可以容纳不同类型的数据，包括数字、字符串、对象甚至其他数组。
JavaScript 数组还提供了一系列丰富的方法和属性，这些方法使得数组成为一种灵活的数据结构，适用于各种编程场景，从简单的数据存储到复杂的算法和业务逻辑的实现。
总而言之，JavaScript 数组在语言中占据着重要地位，是一种功能强大、灵活多样的数据类型，为开发人员提供了处理和操作数据的有效工具。
添加/删除元素
- push()
- pop()
- unshift()
- shift()
// push(): 在数组末尾添加一个或多个元素，并返回新的长度。
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
// pop(): 移除并返回数组的最后一个元素。
let poppedElement = arr.pop();
console.log(poppedElement); // 4
console.log(arr); // [1, 2, 3]
// unshift(): 在数组开头添加一个或多个元素，并返回新的长度。
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
// shift(): 移除并返回数组的第一个元素。
let shiftedElement = arr.shift();
console.log(shiftedElement); // 0
console.log(arr); // [1, 2, 3]
合并/拆分数组
- concat()
- slice()
// concat(): 连接两个或多个数组，并返回新的数组。
let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]
// slice(): 返回数组的一部分，不会修改原数组。
let originalArr = [1, 2, 3, 4, 5];
let slicedArr = originalArr.slice(1, 4); // 从索引1开始，到索引4之前结束
console.log(slicedArr); // [2, 3, 4]
console.log(originalArr); // [1, 2, 3, 4, 5] - 原数组未被修改
遍历数组
- forEach()
- map()
- filter()
- forEach()
- callback: 用来执行在数组每个元素上的函数，接受三个参数：
- currentValue: 当前正在处理的元素。
- index (可选): 当前正在处理的元素的索引。
- array (可选): 数组对象本身。
- callback: 用来执行在数组每个元素上的函数，接受三个参数：
array.forEach(function(currentValue, index, array) {
// 在这里编写你的代码
});
- map()
- callback: 生成新数组元素的函数，接受三个参数：
- currentValue: 当前正在处理的元素。
- index (可选): 当前正在处理的元素的索引。
- array (可选): 调用 map 方法的数组本身。
- callback: 生成新数组元素的函数，接受三个参数：
var new_array = arr.map(function callback(currentValue, index, array) {
// 返回一个新数组元素
}, thisArg);
- filter()
- callback: 用于测试每个元素的函数，接受三个参数：
- element: 数组中当前正在处理的元素。
- index (可选): 数组中当前正在处理的元素的索引。
- array (可选): 调用 filter 方法的数组本身。
- callback: 用于测试每个元素的函数，接受三个参数：
var newArray = arr.filter(function callback(element, index, array) {
// 返回 true 表示保留该元素，否则移除
}, thisArg);
查找/操作元素
- indexOf()
- lastIndexOf()
- findIndex()
- find()
- includes()
let arr = [2, 5, 9, 2];
// indexOf(): 返回指定元素的第一个匹配项的索引。
console.log(arr.indexOf(2)); // 0
// lastIndexOf(): 返回指定元素的最后一个匹配项的索引。
console.log(arr.lastIndexOf(2)); // 3
// findIndex(): 返回数组中满足提供的测试函数的第一个元素的索引。
console.log(arr.findIndex(item => item > 2)); // 1
// find(): 返回数组中满足提供的测试函数的第一个元素的值。
console.log(arr.find(item => item > 2)); // 5
// includes(): 判断数组是否包含某个元素。
console.log(arr.includes(2)); // true
console.log(arr.includes(7)); // false
排序/逆序
- sort()
- reverse()
let arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]
// 这里，(a, b) => a - b 是一个比较函数，当返回值为负数时，a会排在b之前；为正数时，a会排在b之后；为0时，a和b位置不变。
// reverse(): 颠倒数组中元素的顺序。
arr.reverse();
console.log(arr); // [9, 6, 5, 5, 5, 4, 3, 3, 2, 1, 1]
其他常用方法
- join()
- fill()
- reduce()
- reduceRight()
- every()
- some()
// join(): 将数组的所有元素连接成一个字符串。
let arr = ["Apple", "Banana", "Orange"];
let joinedString = arr.join(", ");
console.log(joinedString); // "Apple, Banana, Orange"
// fill(): 用静态值填充数组。
let arrayToBeFilled = [1, 2, 3, 4, 5];
arrayToBeFilled.fill(0, 2, 4);
console.log(arrayToBeFilled); // [1, 2, 0, 0, 5]
// reduce(): 对数组中的每个元素执行一个提供的函数，将其结果汇总为单个返回值。
let sum = [1, 2, 3, 4].reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 10
// reduceRight(): 从数组的最后一项开始，向前遍历数组元素，并累计。
let reversedSum = [1, 2, 3, 4].reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(reversedSum); // 10
// every(): 测试数组的所有元素是否都通过了指定函数的测试。
let allGreaterThanZero = [1, 2, 3, 4].every(item => item > 0);
console.log(allGreaterThanZero); // true
// some(): 测试数组的某些元素是否通过了指定函数的测试。
let anyGreaterThanThree = [1, 2, 3, 4].some(item => item > 3);
console.log(anyGreaterThanThree); // true
转换
- toString()
- toLocaleString()
let arr = [1, 2, 3, 4];
// toString(): 将数组转换为一个字符串。
let arrAsString = arr.toString();
console.log(arrAsString); // "1,2,3,4"
// toLocaleString(): 返回一个表示数组元素的本地化字符串版本。
let dates = [new Date(), new Date(2022, 0, 1)];
let dateStrings = dates.toLocaleString();
console.log(dateStrings); // "12/15/2021, 1/1/2022"
toString() 方法：将数组转换为一个字符串，数组中的每个元素都会被转换为字符串，并用逗号分隔。这在需要将数组内容以字符串形式呈现时很有用。
toLocaleString() 方法：返回一个表示数组元素的本地化字符串版本。对于日期对象等复杂类型，它会调用各自的 toLocaleString() 方法，而不是简单地将元素转换为字符串。这样可以根据用户的所在地区显示合适的日期格式，提供了更好的本地化支持。
迭代
- entries()
- keys()
- values()
let arr = ["a", "b", "c"];
// entries(): 返回一个数组迭代器对象，包含数组中每个索引的键值对。
let entries = arr.entries();
for (let entry of entries) {
console.log(entry);
}
// 输出：
// [0, "a"]
// [1, "b"]
// [2, "c"]
// keys(): 返回一个数组迭代器对象，包含数组中每个索引的键。
let keys = arr.keys();
for (let key of keys) {
console.log(key);
}
// 输出：
// 0
// 1
// 2
// values(): 返回一个数组迭代器对象，包含数组中每个索引的值。
let values = arr.values();
for (let value of values) {
console.log(value);
}
// 输出：
// "a"
// "b"
// "c"
扩展/填充
- copyWithin()
- from()
- of()
// copyWithin(): 从数组的指定位置拷贝元素到同一数组中的另一个位置。
let arr1 = [1, 2, 3, 4, 5];
arr1.copyWithin(0, 3); // 将从索引3开始的元素复制到索引0开始的位置
console.log(arr1); // [4, 5, 3, 4, 5]
// from(): 从类数组对象或可迭代对象中创建一个新的数组实例。
let arr2 = Array.from('hello');
console.log(arr2); // ["h", "e", "l", "l", "o"]
// of(): 根据传入的参数创建一个新数组。
let arr3 = Array.of(1, 2, 3, 4, 5);
console.log(arr3); // [1, 2, 3, 4, 5]
copyWithin()方法：通过将数组的一部分拷贝到同一数组中的指定位置来修改数组本身from()方法：从类数组对象或可迭代对象中创建一个新的数组实例。在示例中我们使用字符串作为可迭代对象of()方法：根据传入的参数创建一个新数组的示例。
数组长度
- length
let arr = [1, 2, 3, 4, 5];
// 获取数组的长度
console.log(arr.length); // 输出: 5
// 设置数组的长度
arr.length = 3; // 截断数组，只保留前三个元素
console.log(arr); // 输出: [1, 2, 3]
arr.length = 5; // 增加数组的长度，剩余位置用 undefined 填充
console.log(arr); // 输出: [1, 2, 3, undefined, undefined]
arr.length = 7; // 增加数组的长度，剩余位置用 undefined 填充
console.log(arr); // 输出: [1, 2, 3, undefined, undefined, undefined, undefined]
类型转换
数组转字符串：
使用 join() 方法将数组转换为字符串并使用指定的分隔符连接数组元素：
let arr = ["apple", "banana", "orange"];
let str = arr.join(', ');
console.log(str); // 输出: "apple, banana, orange"
使用 toString() 方法将数组转换为字符串：
let arr = [1, 2, 3];
let str = arr.toString();
console.log(str); // 输出: "1,2,3"
字符串转数组：
使用 split() 方法将字符串分割为数组：
let str = "apple, banana, orange";
let arr = str.split(', ');
console.log(arr); // 输出: ["apple", "banana", "orange"]
使用扩展运算符(...)将字符串转换为字符数组：
let str = "hello";
let arr = [...str];
console.log(arr); // 输出: ["h", "e", "l", "l", "o"]
集合/迭代器转数组：
使用 Array.from() 从类数组对象或可迭代对象中创建新的数组实例：
let set = new Set([1, 2, 3]);
let arr = Array.from(set);
console.log(arr); // 输出: [1, 2, 3]
其他数据类型转数组：
使用 Array.of() 根据传入的参数创建一个新数组：
let arr = Array.of(1, 2, 3);
console.log(arr); // 输出: [1, 2, 3]
使用扩展运算符(...)将类数组对象或集合转换为数组：
let nodeList = document.querySelectorAll('div');
let divArray = [...nodeList];
console.log(divArray); // 输出: 数组形式的节点列表