JavaScript数组Array核心操作与常用方法详解
本文详细介绍JavaScript中Array对象的创建方式与类型判断技巧，重点解析push、pop、join、concat及map等常用数组方法的语法、返回值特性及注意事项，并通过合并数组、动态生成URL等实际案例展示其应用场景。
JavaScript数组基础与类型判断
一、关于Array
在JavaScript中，数组的创建方式十分灵活。开发者既可以使用Array构造函数来实例化，也可以直接采用字面量语法进行定义。
var arr = new Array(); //[]
var brr = Array(); //[] 两者等效
var arr = Array(3); //[]
arr.length; //3 长度为3的空数组
var arr = Array(22,33,'qq',{}); //[22, 33, "qq", Object]
var brr = [22,33,'qq',{}]; //同上需要明确的是，Array本质上是JavaScript的内置对象。尽管它表现为数组结构，但从类型系统的角度来看，它依然属于对象范畴。
如果使用typeof运算符进行检测，返回的结果将是Object。为了更精准地判断一个变量是否为数组，应当使用Array.isArray方法。
var a = [];
typeof a; //object
Array.isArray(a); //true数组常用操作方法详解
二、常用方法
push()方法
push方法允许向数组末尾添加一个或多个元素，并返回修改后数组的新长度。
需要特别注意：该方法返回的是数字类型的数组长度，而非数组本身。
此外，此方法会直接修改原始数组的内容，这是其副作用之一。
var arr = Array(22,33,'qq',{});
arr.push('weibo'); //5
arr //[22, 33, "qq", {}, "weibo"]当需要将两个数组合并时，可以采用如下技巧：
var a = [22,33];
var b = [44,55];
Array.prototype.push.apply(a, b)
// 或者
a.push.apply(a, b)
// 或者
a.push(44,55); //此时的数组a = [22,33,44,55];请避免写成以下这种错误形式：
a.push(b);
a; //[22,33,[44,55]]
a.length; // 3 !!
console.log(a); //[22, 33, Array[2]]如果直接写成a.push(b)，会将数组b整体视为单个元素添加到数组a中，这无法达到合并两个数组元素的预期效果。
如果当前场景涉及两个对象数组的合并，正确的处理方式如下：
var a = [
{name: 'Stark', value: 'Ironman'},
{name: 'Cap' , value: 'Oldman'}
];
var b = [
{name: 'Jerry', email: 'Jerry@qq.com'},
{name: 'Lory' , email: 'Lory@163.com'},
{name: 'susan', email: 'susan@gmail.com'}
];
//错误写法
a.push(b); //3
console.log(a); //[Object, Object, Array[3]]
//正确写法
a.push.apply(a.b); //5
console.log(a); //[Object, Object, Object, Object, Object]pop()方法
与push操作相反，pop()用于移除数组的最后一个元素，并返回被移除的那个元素值。
var a = ['qq', 'weibo', 'weixin'];
a.pop(); // 'weixin'
a; // ['qq', 'weibo']join()方法
该方法将数组元素按照指定的分隔符拼接成字符串并返回。若未提供分隔符参数，则默认使用逗号进行分隔。此操作不会改变原数组。
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
var b = a.join() // "1,2,3,4"
console.log(a); // [1, 2, 3, 4]
console.log(b); // "1,2,3,4"concat()方法
concat()可以将多个数组合并，生成并返回一个新的数组，而原始数组保持不变。
var a = [22,33];
var b = [44,55];
var c = a.concat(b);
console.log(a); //[22, 33]
console.log(b); //[44, 55]
console.log(c); //[22, 33, 44, 55]
var a = [{name: 'tom', email: 'tom@example.com'},
{name: 'peter', email: 'peter@163.com'}];
var b = [{name: 'Jerry', email: 'Jerry@qq.com'},
{name: 'Lory', email: 'Lory@dfl.com'},
{name: 'susan', value: 'susan@gmail.com'}];
var c = a.concat(b);
c; // [{name: 'tom', email: 'tom@example.com'},
// {name: 'peter', email: 'peter@163.com'},
// {name: 'Jerry', email: 'Jerry@qq.com'},
// {name: 'Lory', email: 'Lory@dfl.com'},
// {name: 'susan', value: 'susan@gmail.com'}]map()方法
map方法会对数组中的每个成员依次执行指定的回调函数，并返回一个由处理结果组成的新数组，原数组不受影响。
var numbers = [1, 2, 3];
var num = numbers.map(function (n) { // [2, 4, 6]
return n * 2;
});
numbers; //[1,2,3]当map方法调用的回调函数仅有一个参数时，该参数代表数组的当前成员；若包含三个参数，则依次对应：
当前成员elem、索引index以及原数组本身arr。
var brr = [1, 2, 3].map( function(elem, index, arr) {
return elem * index;
});
brr; // [0, 2, 6]map方法还支持接收第二个参数，用于指定回调函数执行时的this指向对象。
var arr = ['a', 'b', 'c'];
var brr = [0, 2].map(function(e){
return this[e];
}, arr)
brr; // ['a', 'c']在实际开发中，有时需要利用Ajax技术动态地将参数数组转换为URL请求字符串，此时map方法非常实用，例如：
var b = [
{name: 'Jerry', email: 'Jerry@qq.com'},
{name: 'Lory', email: 'Lory@dfl.com'},
{name: 'susan', value: 'susan@gmail.com'}];
var url = b.
map(function(n){
return n.name + "=" + n.email
})
.join("&");
console.log(url);
//Jerry=Jerry@qq.com&Lory=Lory@dfl.com&susan=susan@gmail.com随后在URL前拼接IP地址、action及具体方法名，即可完成Ajax所需动态URL的构建，例如：
var endURL = "localhost:8080/XXXX/" + eventAction + "!" + operation + "?"
+ url;总结
以上就是本文的全部内容，希望这些内容能对大家的编程学习或日常工作有所帮助。如有任何疑问，欢迎留言交流。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28