本文系统梳理了 JavaScript 中 Array 对象的创建方式与核心操作方法。重点对比了字面量与构造函数的差异，推荐字面量写法。详细解析了 push、pop、shift、unshift 等增删元素方法，slice 与 splice 的截取与替换区别，以及 sort、reverse、join 等排序与转换技巧，并补充了栈与队列的实现思路。
JavaScript 数组的创建方式
在 JavaScript 中，数组的创建主要有两种常见方式：
第一种是字面量表示法。
当数组中仅包含一个数值时，该数值即代表数组的唯一元素。
var arr = [6]; 第二种是通过构造函数 Array 创建。
若构造函数中仅传入一个数值，该数值将被解释为数组的长度而非元素值；若未传入参数，则生成一个长度为 0 的空数组，其内部元素表现为 undefined。
var arr = new Array(6);建议：由于 Array 构造函数在行为上存在不一致性（如单数值参数时的歧义），官方通常不推荐使用它来生成新数组，直接使用数组字面量是更稳妥且推荐的做法。
数组常用操作方法详解
接下来介绍数组的常见操作方法：
1. push() 方法。
该方法用于在数组末尾添加一个或多个元素，并返回添加新元素后的数组长度。
注意：此操作会直接修改原数组。
var arr = [1,2,3];
console.log(arr.push("hello")); //4
console.log(arr); //[1,2,3,"hello"]---原数组改变
console.log(arr.push("a","b")); //6
console.log(arr); //[1,2,3,"hello","a","b"]---原数组改变2. pop() 方法。
该方法用于移除数组的最后一个元素，并返回被移除的元素。如果对该方法应用于空数组，不会抛出错误，而是返回 undefined。
注意：此操作会直接修改原数组。
var arr = [1,2,3];
console.log(arr.pop()); //3
console.log(arr); //[1,2] →原数组改变3. concat() 方法。
该方法用于合并两个或多个数组。
注意：此操作不会修改原数组，而是返回一个包含合并后元素的新数组。
var arr1 = [1,2,3]
var arr2 = arr1.concat();
console.log(arr1); //[1,2,3]→→原数组
console.log(arr1 === arr2); //false
console.log(arr2); //[1,2,3]→→原数组的副本
console.log(arr1.concat("hello","world"));
//[1,2,3,"hello","world"]
console.log(arr1.concat(["a","b"],[[3,4],{"name":"admin"}]));
//[1,2,3,"a","b",[3,4],{"name":"admin"}]
console.log(arr1); //[1,2,3]→→原数组未改变4. shift() 方法。
该方法用于移除数组的第一个元素，并返回被移除的元素。
注意：此操作会直接修改原数组。
var arr = [1,2,3]
console.log(arr.shift()); //1
console.log(arr); //[2,3]→→原数组改变5. unshift() 方法。
该方法用于在数组的起始位置添加一个或多个元素，并返回添加新元素后的数组长度。
注意：此操作会直接修改原数组。
var arr = [1,2,3];
console.log(arr.unshift("hello")); //4
console.log(arr); //["hello",1,2,3]→→原数组改变
console.log(arr.unshift("a","b")); //6
console.log(arr); //["a","b","hello",1,2,3]→→原数组改变6. slice() 方法。
该方法用于从原数组中截取指定部分，并返回一个包含截取元素的新数组。
注意：此操作不会修改原数组。
如果 slice 方法的参数为负数，则表示从数组末尾开始倒数计算位置；若第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回一个空数组。
var arr = ["a","b","c","d","e"];
console.log(arr.slice(1,3)); //["b","c"]
console.log(arr.slice(1)); //["b","c","d","e"]
console.log(arr.slice(-4,-1)); //["b","c","d"]
console.log(arr.slice(-2)); //["d","e"]
console.log(arr.slice(1,-2)); //["b","c"]
console.log(arr); //["Tom","Jack","Lucy","Lily","May"]→→原数组未改变7. splice() 方法。
该方法用于删除原数组的一部分成员，并可以在删除的位置插入新的数组成员，返回值是被删除的元素组成的数组。
注意：此操作会直接修改原数组。起始位置如果是负数，则表示从倒数位置开始删除。
① 不传参时：无操作；
var arr = ["a","b","c","d","e"];
console.log(arr.splice()); //[]
console.log(arr); //["a","b","c","d","e"]→→无操作② 只传入 start 参数：表示从索引为 start 的数据开始删除，直到数组结束；
var arr = ["a","b","c","d","e"];
console.log(arr.splice(2)); //["c", "d", "e"]
console.log(arr); //["a", "b"]→→原数组改变③ 传入 start 和 num 参数：表示从索引为 start 的数据开始删除，共删除 num 个元素；
var arr = ["a","b","c","d","e"];
console.log(arr.splice(2,2)); //["c", "d"]
console.log(arr); //["a", "b", "e"]→→原数组改变④ 传入更多参数：表示从索引为 start 的数据开始删除，删除 num 个元素后，将第三个参数及后面所有参数插入到 start 的位置。
var arr = ["a","b","c","d","e"];
console.log(arr.splice(2,2,"f","g")); //["c", "d"]
console.log(arr); //["a", "c", "f", "g", "e"]---原数组改变
8. reverse() 方法。
该方法用于颠倒数组中元素的排列顺序，返回改变后的数组（实际上修改的是原数组）。
注意：此操作会直接修改原数组。
var arr = [a,b,c];
console.log(arr.reverse()); //[c,b,a]
console.log(arr); //[c,b,a]→→原数组改变9. sort() 方法。
该方法用于对数组成员进行排序，默认情况下按照字典顺序（字符串比较）进行排序。排序后，原数组将被改变。
注意：sort 方法并非按照数值大小排序，而是按照字典顺序。这意味着数值会被先转换为字符串，再按照字典顺序进行比较，例如：121 会排在 13 的前面；如果想让 sort 方法按照自定义方式（如数值大小）排序，可以传入一个比较函数作为参数。
[10111,1101,111].sort(function(a,b){
return a - b; // 升序
// return b - a; // 降序
}) // [111,1101,10111]10. join() 方法。
该方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认使用逗号作为分隔符。
注意：此操作不会修改原数组；如果数组成员是 undefined 或 null 或空位，会被转换为空字符串。
var arr = [a,b,c];
console.log(arr.join()); // a,b,c
console.log(arr.join("*")); // a*b*c
console.log(arr); //[1,2,3]→→原数组未改变数组遍历与数据结构应用
11. for-in 循环。
这是一种遍历语句，类似于普通循环，但 for-in 可以遍历没有索引的集合，也被称为枚举。
- for(var i in arr) 中 i 代表下标；
- for(var i in obj) 中 i 代表属性名。
补充说明：push 和 pop 结合使用，可以构成“后进先出”的栈结构（stack）；push 和 shift 结合使用，可以构成“先进先出”的队列结构（queue）。
实例演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
*
* Array.isArray(对象)---->判断这个对象是不是数组
* instanceof关键字
* .concat(数组,数组,数组,...) 组合一个新的数组
* .every(函数)--返回值是布尔类型,函数作为参数使用,函数中有三个参数,第一个参数是元素的值，第二个参数是索引值,第三个参数是原来的数组(没用)
* 如果这个数组中的每个元素的值都符合条件,最后才返回的是true
*
* .filter(函数);返回的是数组中每一个元素都复合条件的元素,组成了一个新的数组
*
* .push(值);--->把值追加到数组中,加到最后了---返回值也是追加数据之后的数组长度
* .pop();--->删除数组中最后一个元素,返回值就是删除的这个值
* .shift();--->删除数组中第一个元素,返回值就是删除的这个值
* .unshift();--->向数组的第一个元素前面插入一个新的元素,----返回值是插入后的程度
* .forEach(函数)方法---遍历数组用---相当于for循环
* .indexOf(元素值);返回的是索引,没有则是-1
* .join("字符串");----返回的是一个字符串
* .map(函数);--->数组中的每个元素都要执行这个函数,把执行后的结果重新的全部的放在一个新的数组中
* .reverse();----->反转数组
* .sort();---排序的,可能不稳定,如果不稳定,请写MDN中的那个固定的代码
* .arr.slice(开始的索引,结束的索引);把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
* .splice(开始的位置,要删除的个数,替换的元素的值);一般是用于删除数组中的元素,或者是替换元素,或者是插入元素
*
*
* */
//构造函数
// var arr1=new Array();
// //字面量的方式
// var arr2=[];
//对象是不是数组类型:两种
//1 instanceof
// var obj=[];
// console.log(obj instanceof Array);//false
//
// //2 使用数组的
// console.log(Array.isArray(obj));//
// var arr=["a","b","c"];
// var newArr=Array.from(arr);
// console.log(newArr);
// var arr1=[10,20,30];
// var arr2=[40,50,60];
// console.log(arr1.concat(arr2));
// var arr=[1000,2000,3000];
// //a----: 元素的值
// //b----: 索引的值
// //c----:谁调用了这个方法,那么c就是谁---->arr
// var flag= arr.every(function (a,b) {
// //console.log(a+"==="+b+"===="+c);
// return a>2000;//数组中的每个元素的值都要大于2000的情况,最后才返回true
// });
// var arr=["小明明lkko","小曹操674","小白白bd","笑眯眯a"];
// var flag=arr.every(function (ele,index) {
// //数组中的每个元素的长度是不是大于4
// return ele.length>4;
// });
//console.log(flag);
// var arr=[10,20,30,40,50,60,70,80];
// var newArr=arr.filter(function (ele) {//ele---每个元素
// return ele>40;
// });
// console.log(newArr);
// var arr=[10,0,20,0,40,0,60,100];
// var newArr=arr.filter(function (ele) {
// return ele!=0;
// });
// console.log(newArr);
// var arr=[10,20,30,40,50];
// var result=arr.unshift(100);
// console.log(result);
// console.log(arr);
//
// var arr = [10, 20, 30, 40];
// arr.forEach(function (ele,index) {
// console.log(ele+'======'+index);
// });
// var arr=[10,20,30,40];
// var index=arr.indexOf(300);
// console.log(index);
// var arr=["小白","小黑","小红","小芳","小绿","小苏"];
// var str=arr.join("|");
// console.log(str);
// var numbers = [1, 4, 9];
// var roots = numbers.map(Math.sqrt);
// console.log(roots);
// var arr=[10,20,30,40,50];
// arr.reverse();//反转
// console.log(arr);
// var arr=[1,40,20,10,100];
// //a---arr[j]
// //b---arr[j+1]
// arr.sort(function (a,b) {
// if(a>b){
// return 1;
// }else if(a==b){
// return 0;
// }else{
// return -1;
// }
// });
// console.log(arr);
//
// var arr=[10,20,30,40,50,60,70,80,90,100];
// var newArr= arr.slice(3,7);
// console.log(newArr);
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
// myFish.splice(2, 0, 'drum'); // 在索引为2的位置插入'drum'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]
myFish.splice(2, 1); // 从索引为2的位置删除一项（也就是'drum'这一项）
console.log(myFish);
// myFish 变为 ["angel", "clown", "mandarin", "sturgeon"]
</script>
</head>
<body>
</body>
</html>到此这篇关于 JavaScript 内置对象之 Array 的使用小结的文章就介绍到这了，更多相关 JavaScript 内置对象 Array 内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！