【JavaScript】 数组 重要方法详解篇（一）

💻 【JavaScript】数组的方法详解篇(一)🏠专栏：JavaScript
👀个人主页：繁星学编程🍁
🧑个人简介：一个不断提高自我的平凡人🚀
🔊分享方向：目前主攻前端，其他知识也会阶段性分享🍀
👊格言：☀️没有走不通的路，只有不敢走的人！☀️
👉让我们一起进步，一起成为更好的自己！！！🎁

【JavaScript】 数组（Array）方法

数组中有许多的重要的方法，而本篇文章主要叙述会改变原数组的七种常用方法。

一. 栈方法

push()、pop() 后进先出

(1) push()

用来向数组的末尾添加一个或多个元素，并返回数组新的长度。

• 特点：会修改原数组
• 作用：在原数组的最后面添加该元素
• 返回值：追加元素后新数组的长度

语法：数组.push(元素1,元素2,元素N)

var arr = [12,true,'zs',78,'万物'];
// 返回值：追加元素后新数组的长度
console.log(arr.push('ls',23));// 7(数组的长度)
// 特点：会修改原数组
console.log(arr);// [12, true, 'zs', 78, '万物', 'ls', 23]

案例：生成一个数组，里面是2开始的偶数，总共30项

var arr = [];
for (var i = 1; i <= 30; i++) {
    if (i % 2 == 0) {
        arr.push(i);
    }
}
console.log(arr); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]

// 在上方输出结果的arr,每5个求平均值,输入新数组中
var newArr = [],
    sum = 0,
    average = 0;
for (var j = 0; j < arr.length; j++) {
    sum += arr[j];
    if ((j + 1) % 5 == 0) {
        average = sum / 5;
        newArr.push(average);
        sum = 0;
    }
}
console.log(newArr);// [6,16,26] 

(2) pop()

用来删除数组的最后一个元素，并返回被删除的元素。

• 特点：会修改原数组
• 作用：将原数组最后一位元素数删除
• 返回值：被删除的元素

var arr = [12,true,'zs',78,'万物'];
// 返回值：被删除的元素
console.log(arr.pop()); // 万物
// 特点：会修改原数组
console.log(arr); // [12,true,'zs',78]

案例：清空任意数据项

var arr = [12,true,'zs',78,'万物'];
// newLen = arr.length : 提前存储数组的长度，报证arr.length不会发生改变
for (var i = 0,newLen = arr.length; i < newLen; i++) {
    arr.pop();
}
console.log(arr);// []

上述案例注意问题：

数组塌陷：每次pop改变原数组之后，数组的length属性发生改变，下一次使用arr.length出现问题。

二. 队列方法

unshift()、shift() 先进先出

(1) unshift()

向数组的前边添加一个或多个元素，并返回数组的新的长度。

• 特点：会修改原数组
• 作用：在原数组最前面添加一个数
• 返回值：修改后新数组的长度

var arr = [12,true,'zs',78,'万物'];
// 返回值：修改后新数组的长度
console.log(arr.unshift('ls',23));// 7(数组的长度)
console.log(arr);// ['ls', 23, 12, true, 'zs', 78, '万物']

(2) shift()

删除数组的前边的一个元素，并返回被删除的元素。

• 特点：会修改原数组
• 作用：删除原数组中第一个元素
• 返回值：被删除的元素

var arr = [12,true,'zs',78,'万物'];
// 返回值：被删除的元素
console.log(arr.shift());// 12
console.log(arr);// [true,'zs',78,'万物']

三. 重排序方法

(1) reverse()

可以用来反转一个数组，它会对原数组产生影响

var arr = [12, true, 'zs', 78, '万物'];
console.log(arr.reverse()); // ['万物', 78, 'zs', true, 12]
console.log(arr); // ['万物', 78, 'zs', true, 12]

(2) sort()

可以对一个数组中的内容进行排序，默认是按照Unicode编码进行排序调用以后，会直接修改原数组。可以自己指定排序的规则，需要一个回调函数作为参数

常见的Unicode编码：

0-9：48-57
A-Z：65-90
a-z：97-122

语法格式：

1. 数组.sort()

2. 数组.sort( function(a, b) { return a-b } )

   按照数字大小进行升序排序

3. 数组.sort( function(a,b) { return b-a } )

   按照数字大小进行降序排序

var arr = ['a', 'd', 'g', 'c', 'z'];
console.log(arr.sort());// ['a', 'c', 'd', 'g', 'z']// 默认升序
console.log(arr);// ['a', 'c', 'd', 'g', 'z']

对数字进行升序或降序排列

var arr = [100, 12, 3, 58, 2];
function compare(a, b) {
    //升序排列
    //return a-b;
    //降序排列
    return b - a;
}
console.log(arr.sort(compare));// [100, 58, 12, 3, 2]

简洁写法

var arr = [100, 12, 3, 58, 2];
console.log(
    arr.sort(function (a, b) {
        return a - b;
    })
);// [2, 3, 12, 58, 100]

四. 操作方法

(1) splice()

可以用来删除数组中指定元素，并使用新的元素替换（该方法会将删除的元素封装到新数组中返回）

注：splice()此方法在效果实现上可以取代许多方法

语法：

1. 数组.splice(开始索引, 删除的个数)
2. 数组.splice(开始索引, 删除的个数, 插入的数据1, 插入的数据2…)

作用：截取从开始索引的位置开始，向后截取指定个数的内容

返回值：新数组里面包含截取出来的部分

参数：

1. 删除开始位置的索引
2. 删除的个数
3. 三个以后，都是替换的元素，这些元素将会插入到开始位置索引的前边

案例：

1. 需求：删除数组最后一个元素

   var arr = [20, 30, 50, 10, 80, 55];
   var res = arr.splice(arr.length - 1, 1);
   console.log(res); // [55]
   console.log(arr); // [20, 30, 50, 10, 80]
   

2. 需求：删除数组的第一个元素

   var arr = [20, 30, 50, 10, 80, 55]; 
   var res = arr.splice(0, 1);
   console.log(res); // [20] 
   console.log(arr); // [30, 50, 10, 80, 55]
   

3. 需求：在数组最前面插入

   var arr = [20, 30, 50, 10, 80, 55];
   var res = arr.splice(0, 0, "插入的元素");
   console.log(res); // []
   console.log(arr); // ["插入的元素" , 20, 30, 50, 10, 80, 55]
   

4. 需求：在数组最后面插入

   var arr = [20, 30, 50, 10, 80, 55];
   var res = arr.splice(arr.length, 0, "插入的元素");
   console.log(res); // []
   console.log(arr);[20, 30, 50, 10, 80, 55, "插入的元素"]
   

结束语

希望对您有一点点帮助，如有错误欢迎小伙伴指正。
👍点赞：您的赞赏是我前进的动力！
⭐收藏：您的支持我是创作的源泉！
✍评论：您的建议是我改进的良药！
一起加油！！！💪💪💪