如何用js定义数组并添加数据

在JavaScript编程中，数组用于存储多个有序的数据项，灵活定义数组并添加数据是日常开发的基础操作。不同的场景适合不同的定义和添加方式，开发者可以根据实际需求选择。

js定义数组的常见方式

1. 字面量方式定义

字面量方式是定义数组最常用的方式，语法简洁直观，适合在已知初始数据或者不需要初始数据时使用。

// 定义空数组
let emptyArr = [];
// 定义包含初始数据的数组
let numArr = [1, 2, 3, 4];
let strArr = ['apple', 'banana', 'orange'];

2. 构造函数方式定义

使用Array构造函数也可以定义数组，这种方式适合需要动态指定数组长度或者初始元素的场景。

// 定义空数组，等价于字面量空数组
let arr1 = new Array();
// 定义长度为5的空数组，每个元素都是undefined
let arr2 = new Array(5);
// 定义包含初始元素的数组
let arr3 = new Array('a', 'b', 'c');

3. Array.of方法定义

Array.of是ES6新增的数组定义方法，它可以解决构造函数方式在传入单个数字时的歧义问题。

// 构造函数传入单个数字会被当作长度
let arrA = new Array(3); // 结果是长度为3的空数组
// Array.of传入单个数字会当作数组元素
let arrB = Array.of(3); // 结果是[3]
let arrC = Array.of(1, 2, 3); // 结果是[1,2,3]

js向数组添加数据的方法

1. 向数组末尾添加数据

最常用的是push方法，它可以向数组末尾添加一个或多个元素，返回添加后数组的新长度，原数组会被修改。

let fruits = ['apple', 'banana'];
// 添加一个元素
let newLength1 = fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']
console.log(newLength1); // 3
// 添加多个元素
let newLength2 = fruits.push('grape', 'pear');
console.log(fruits); // ['apple', 'banana', 'orange', 'grape', 'pear']
console.log(newLength2); // 5

如果不想修改原数组，也可以使用扩展运算符创建新数组：

let oldArr = [1, 2, 3];
let newArr = [...oldArr, 4, 5];
console.log(oldArr); // [1,2,3] 原数组不变
console.log(newArr); // [1,2,3,4,5]

2. 向数组开头添加数据

unshift方法可以向数组开头添加一个或多个元素，返回添加后数组的新长度，原数组会被修改。

let nums = [3, 4, 5];
// 添加一个元素
let len1 = nums.unshift(2);
console.log(nums); // [2,3,4,5]
console.log(len1); // 4
// 添加多个元素
let len2 = nums.unshift(0, 1);
console.log(nums); // [0,1,2,3,4,5]
console.log(len2); // 6

同样可以使用扩展运算符实现不修改原数组的开头添加：

let originArr = ['b', 'c'];
let resultArr = ['a', ...originArr];
console.log(originArr); // ['b','c']
console.log(resultArr); // ['a','b','c']

3. 向数组指定位置插入数据

splice方法可以在指定索引位置插入元素，第一个参数是起始索引，第二个参数是要删除的元素个数，第三个及之后的参数是要插入的元素。

let colors = ['red', 'blue', 'green'];
// 在索引1的位置插入'yellow'，不删除元素
colors.splice(1, 0, 'yellow');
console.log(colors); // ['red', 'yellow', 'blue', 'green']
// 在索引2的位置插入多个元素
colors.splice(2, 0, 'purple', 'pink');
console.log(colors); // ['red', 'yellow', 'purple', 'pink', 'blue', 'green']

4. 通过索引直接添加数据

如果指定的索引超过了数组当前的最大索引，数组会自动扩容，中间空缺的位置会被填充为undefined。

let arr = [1, 2, 3];
// 在索引3的位置添加元素，刚好是末尾下一个位置
arr[3] = 4;
console.log(arr); // [1,2,3,4]
// 在索引5的位置添加元素，索引4会空缺
arr[5] = 6;
console.log(arr); // [1,2,3,4, undefined, 6]

不同添加方式的适用场景

在实际开发中，需要根据是否需要保留原数组、添加的位置、添加的元素数量等因素，选择合适的数组定义和添加数据的方式，避免不必要的副作用。

JavaScript数组定义数组添加数据push方法修改时间：2026-07-09 12:57:31