js 数组怎么定义

JS 数组定义：数组字面量、Array 构造函数、Array.of() 方法、Array.from() 方法

在JavaScript中，数组是一种用于存储多个值的有序集合。定义数组的方法多种多样，包括数组字面量、Array 构造函数、Array.of() 方法、Array.from() 方法。其中，数组字面量是最常用且最简洁的方法。我们下面详细探讨这些方法。

一、数组字面量

数组字面量是一种最常用且直观的方法，通过方括号 [] 来定义数组，并在方括号中使用逗号分隔各个数组元素。

let fruits = ['Apple', 'Banana', 'Mango'];

这种方法不仅简洁，还能在定义数组的同时初始化数组的元素。数组字面量的优势在于代码简洁、可读性强，这也是为什么大多数开发者首选这种方法。

优势展开

简洁性和可读性

使用数组字面量定义数组，不仅代码简洁，还能清晰地表达数组的内容。举个例子，如果你需要定义一个包含多个数字的数组：

let numbers = [1, 2, 3, 4, 5];

通过这种方式，任何阅读代码的人都能立即理解这个数组包含哪些元素。此外，数组字面量还支持嵌套数组，用于表示多维数组：

let matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

这种定义方式不仅简洁，还能直接看出数组的结构和内容。

二、Array 构造函数

使用Array构造函数来定义数组也是一种常见的方法。你可以通过传递一个长度参数或一组初始化元素来创建数组。

传递长度参数

let numbers = new Array(5); // 创建一个包含5个空元素的数组

传递初始化元素

let fruits = new Array('Apple', 'Banana', 'Mango');

Array构造函数的优点在于它的灵活性，既可以创建固定长度的空数组，也可以用初始化元素来创建数组。然而，这种方法在某些场景下可能不如数组字面量直观。

三、Array.of() 方法

Array.of() 方法用于创建包含所有传入参数的新数组，无论参数的数量或类型。这个方法主要用于解决Array构造函数在处理单个数值参数时的歧义。

let numbers = Array.of(7);  // 创建一个包含单个元素7的数组
let fruits = Array.of('Apple', 'Banana', 'Mango');

Array.of() 方法的优势在于解决了Array构造函数的歧义问题，确保创建的数组始终包含传入的参数。

四、Array.from() 方法

Array.from() 方法用于将类数组对象或可迭代对象转换为数组。类数组对象包括类似于arguments对象和NodeList等。

let args = (function() { return arguments; })(1, 2, 3);
let argsArray = Array.from(args); // 将类数组对象转换为数组

Array.from() 方法还可以接受一个映射函数，对每个元素进行处理后再生成数组。

let numbers = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

Array.from() 方法的优势在于它的多功能性，可以轻松地将类数组对象和可迭代对象转换为数组，同时还能对元素进行处理。

五、数组的常用操作

1、添加元素

push() 方法

push() 方法用于在数组末尾添加一个或多个元素，并返回数组的新长度。

let fruits = ['Apple', 'Banana'];
fruits.push('Mango'); // ['Apple', 'Banana', 'Mango']

unshift() 方法

unshift() 方法用于在数组开头添加一个或多个元素，并返回数组的新长度。

let fruits = ['Apple', 'Banana'];
fruits.unshift('Mango'); // ['Mango', 'Apple', 'Banana']

2、删除元素

pop() 方法

pop() 方法用于删除数组末尾的最后一个元素，并返回该元素。

let fruits = ['Apple', 'Banana', 'Mango'];
let lastFruit = fruits.pop(); // 'Mango', 剩余 ['Apple', 'Banana']

shift() 方法

shift() 方法用于删除数组开头的第一个元素，并返回该元素。

let fruits = ['Apple', 'Banana', 'Mango'];
let firstFruit = fruits.shift(); // 'Apple', 剩余 ['Banana', 'Mango']

3、查找元素

indexOf() 方法

indexOf() 方法用于查找指定元素在数组中的索引，如果找不到则返回 -1。

let fruits = ['Apple', 'Banana', 'Mango'];
let index = fruits.indexOf('Banana'); // 1

includes() 方法

includes() 方法用于判断数组是否包含指定元素，返回布尔值。

let fruits = ['Apple', 'Banana', 'Mango'];
let hasBanana = fruits.includes('Banana'); // true

4、迭代数组

forEach() 方法

forEach() 方法用于对数组的每个元素执行一次提供的函数。

let fruits = ['Apple', 'Banana', 'Mango'];
fruits.forEach(fruit => console.log(fruit));

map() 方法

map() 方法用于创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值。

let numbers = [1, 2, 3];
let doubled = numbers.map(x => x * 2); // [2, 4, 6]

5、过滤数组

filter() 方法

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(x => x % 2 === 0); // [2, 4]

6、合并数组

concat() 方法

concat() 方法用于合并两个或多个数组，不改变现有数组，而是返回一个新数组。

let fruits = ['Apple', 'Banana'];
let moreFruits = ['Mango', 'Orange'];
let allFruits = fruits.concat(moreFruits); // ['Apple', 'Banana', 'Mango', 'Orange']

7、数组的排序

sort() 方法

sort() 方法用于对数组的元素进行排序，并返回排序后的数组。

let fruits = ['Mango', 'Banana', 'Apple'];
fruits.sort(); // ['Apple', 'Banana', 'Mango']

reverse() 方法

reverse() 方法用于反转数组中元素的顺序，并返回该数组。

let fruits = ['Apple', 'Banana', 'Mango'];
fruits.reverse(); // ['Mango', 'Banana', 'Apple']

8、数组的转换

join() 方法

join() 方法将数组的所有元素连接成一个字符串，并返回这个字符串。

let fruits = ['Apple', 'Banana', 'Mango'];
let fruitString = fruits.join(', '); // 'Apple, Banana, Mango'

toString() 方法

toString() 方法返回一个字符串，表示指定的数组及其元素。

let fruits = ['Apple', 'Banana', 'Mango'];
let fruitString = fruits.toString(); // 'Apple,Banana,Mango'

9、数组的复制

slice() 方法

slice() 方法返回一个新的数组对象，这一对象是一个从原始数组中选定的浅拷贝（从start到end，不包括end）。

let fruits = ['Apple', 'Banana', 'Mango'];
let slicedFruits = fruits.slice(1, 2); // ['Banana']

spread 操作符

使用 spread 操作符（…）可以快速复制一个数组。

let fruits = ['Apple', 'Banana', 'Mango'];
let copiedFruits = [...fruits]; // ['Apple', 'Banana', 'Mango']

六、数组的高级操作

1、reduce() 方法

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((total, currentValue) => total + currentValue, 0); // 15

2、some() 方法

some() 方法测试数组中的某些元素是否通过了由提供的函数实现的测试，返回布尔值。

let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(x => x % 2 === 0); // true

3、every() 方法

every() 方法测试数组中的所有元素是否都通过了由提供的函数实现的测试，返回布尔值。

let numbers = [1, 2, 3, 4, 5];
let allEvenNumbers = numbers.every(x => x % 2 === 0); // false

4、find() 方法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

let numbers = [1, 2, 3, 4, 5];
let firstEvenNumber = numbers.find(x => x % 2 === 0); // 2

5、findIndex() 方法

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。

let numbers = [1, 2, 3, 4, 5];
let firstEvenIndex = numbers.findIndex(x => x % 2 === 0); // 1

6、flat() 方法

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

let nestedArray = [1, [2, [3, [4]], 5]];
let flatArray = nestedArray.flat(2); // [1, 2, 3, [4], 5]

7、flatMap() 方法

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

let numbers = [1, 2, 3];
let doubledFlat = numbers.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

七、数组的内存管理与性能优化

在处理大数据量的数组时，性能和内存管理是重要的考虑因素。以下是一些优化技巧：

1、使用 Typed Arrays

Typed Arrays 是一种处理二进制数据的数组类型，性能比普通数组更高，适合处理大量数值数据。

let typedArray = new Uint8Array([1, 2, 3]);

2、避免频繁的数组操作

频繁的数组操作，如 push()、pop()、shift()、unshift() 等，会导致性能瓶颈。尽量减少不必要的操作，或使用更高效的数据结构，如链表。

3、使用数组方法的替代方案

在某些情况下，使用数组方法的替代方案可以提高性能。例如，使用 for 循环代替 forEach()，因为 for 循环的性能通常更高。

let numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}

4、预分配数组大小

如果你知道数组的最终大小，预分配数组大小可以提高性能，避免多次内存分配。

let numbers = new Array(1000);
for (let i = 0; i < 1000; i++) {
    numbers[i] = i;
}

5、使用高效的项目管理工具

在大型项目中管理复杂的数据和任务时，使用高效的项目管理工具可以提高团队的协作效率，推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile。这些工具不仅支持任务管理，还支持代码库管理、版本控制和实时协作，是开发团队的理想选择。

综上所述，JavaScript提供了多种定义和操作数组的方法，每种方法都有其独特的优势和适用场景。理解和熟练掌握这些方法，将极大地提高你的开发效率和代码质量。