夯实基础，JS篇：数组的初始化、类型转换和格式转换

2023-10-31 01:54:21

在前端开发中，JavaScript 作为一门必备的语言，贯穿于各种业务线。为了精进技术，本文将深入探讨 JS 中数组的初始化、类型转换和格式转换，为夯实技术基础奠定坚实根基。

一、数组的初始化

数组是一种有序的数据结构，用于存储一组相同类型的数据元素。在 JS 中，可以采用以下两种方式初始化数组：

字面量语法 ：使用方括号([])包裹数据元素，例如：

const arr1 = [1, 2, 3, 4, 5];

Array 构造函数 ：使用 Array 构造函数并传入数据元素，例如：

const arr2 = new Array(1, 2, 3, 4, 5);

二、类型转换

数组元素可以存储不同类型的数据，包括基本类型(如数字、字符串、布尔值)和复杂类型(如对象、函数)。JS 中提供两种类型转换的方法：

隐式转换 ：JS 引擎自动将数据元素转换为与数组中其他元素类型一致的类型。例如：

const arr3 = [1, "hello", true];

此时，"hello" 和 true 会被隐式转换为数字类型，分别为 0 和 1。

显式转换 ：使用 parseInt()、parseFloat()、Number() 等方法手动将数据元素转换为指定类型。例如：

const num = parseInt("123"); // 将字符串 "123" 转换为数字 123

三、格式转换

数组的数据格式可以通过多种方式进行转换，以满足不同场景的需求。常见格式转换方法包括：

toString() ：将数组转换为字符串，默认以逗号分隔各个元素。例如：

const str = arr1.toString(); // "1,2,3,4,5"

join() ：与 toString() 类似，但允许自定义分隔符。例如：

const str = arr1.join("-"); // "1-2-3-4-5"

slice() ：复制数组的一部分，从指定起始位置到指定结束位置(不包括结束位置)。例如：

const newArr = arr1.slice(1, 4); // [2, 3, 4]

concat() ：将多个数组合并为一个新数组。例如：

const newArr = arr1.concat(arr2); // [1, 2, 3, 4, 5, 1, 2, 3, 4, 5]

sort() ：对数组元素进行排序，默认为升序。例如：

const sortedArr = arr1.sort(); // [1, 2, 3, 4, 5]

四、实例

为了加深理解，我们以一个具体实例来展示数组的初始化、类型转换和格式转换：

const arr = [1, "2", true, { name: "John" }, function() { console.log("Hello"); }];

// 1. 类型转换
const num = parseInt(arr[1]); // 2
const bool = Boolean(arr[2]); // true

// 2. 格式转换
const str = arr.toString(); // "1,2,true,[object Object],function () { console.log("Hello"); }"
const joinedStr = arr.join("-"); // "1-2-true-[object Object]-function () { console.log("Hello"); }"
const slicedArr = arr.slice(2); // [true, { name: "John" }, function() { console.log("Hello"); }]

// 3. 输出结果
console.log(num); // 2
console.log(bool); // true
console.log(str); // "1,2,true,[object Object],function () { console.log("Hello"); }"
console.log(joinedStr); // "1-2-true-[object Object]-function () { console.log("Hello"); }"
console.log(slicedArr); // [true, { name: "John" }, function() { console.log("Hello"); }]