JS数组操作指南：push/pop/shift/unshift/slice/splice用法与排序陷阱

前言

近期在开发过程中发现，部分前端数组函数的使用细节容易混淆，特此整理总结，供各位开发者参考交流。

1. join() 函数

join() 方法用于将数组中的所有元素连接成一个字符串。该方法接收一个可选参数作为分隔符，若未提供参数，则默认使用逗号（,）进行连接。

2. push() 函数

push() 方法用于在数组的末尾添加一个或多个元素。该方法会修改原数组，并返回新数组的长度。它可以接收任意数量的参数作为要添加的元素。

3. pop() 函数

pop() 方法用于删除并返回数组的最后一个元素。该方法会直接修改原数组，返回值为被移除的那个元素。

4. shift() 函数

shift() 方法用于删除并返回数组的第一个元素。该方法会直接修改原数组，返回值为被移除的那个元素。

5. unshift() 函数

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

6. sort() 函数

sort() 方法用于对数组元素进行排序，默认情况下会修改原数组。

注意：

sort() 方法用于数组排序，其基本语法为 array.sort()。

调用 sort() 后会直接改变原数组的顺序，而不会生成一个新数组（原数组保持不变的情况不成立）。

示例一：对字符数组进行排序

    var myarr1=["h","e","l","l","o"];
    myarr1.sort();
    console.log(myarr1);//(5) ['e', 'h', 'l', 'l', 'o']

当 sort() 不接收参数时，数组元素会按照其对应的 ASCII 码值进行比较和排序。

示例二：对数字数组进行排序

    var myarr2=[9,5,1,4,6];
    myarr2.sort();
    console.log(myarr2);//(5) [1, 4, 5, 6, 9]

直接使用 sort() 方法无法对包含两位数及以上数字的数组进行正确的数值排序。

示例

    var myarr2=[10,25,3,8];
    myarr2.sort();
    console.log(myarr2);//10 25 3 8

出现原因和解决方法

这是因为 sort() 方法在比较前，会先调用每个数组项的 toString() 方法，将其转换为字符串。

在字符串比较中，"25" 小于 "3"（因为字符 '2' 的 ASCII 码小于 '3'）。

解决方法是使用 sort() 的参数，该参数被称为比较函数（compare function）。

2. sort() 的参数——比较函数

示例：使用比较函数对数字数组进行正确排序。

 	var myarr2=[10,25,3,8];
    var mycompare=function (x,y){
      if(x<y) return -1;
      else if(x>y) return 1
      else return 0;
    };
    myarr2.sort(mycompare);
    console.log(myarr2);//(4) [3, 8, 10, 25]

比较函数的参数

比较函数接收两个参数，并对这两个参数进行比较。

若第一个参数应排在第二个参数之前，则返回一个负数。
若第一个参数等于第二个参数，则返回 0。
若第一个参数应排在第二个参数之后，则返回一个正数。

通过上述逻辑编写的比较函数，可使数组最终变为升序排列。

若要实现降序排列，只需将返回负数的情况改为返回正数，将正数改为负数即可（即反转返回值符号）。

比较函数不能用于对混合类型（字符加数字）的数组进行有效排序。

  var myarr3=["h",10];
    myarr3.sort(mycompare);
    console.log(myarr3);//(2) ['h', 10]
    myarr3.sort();
    console.log(myarr3);//(2) [10, 'h']

不能将比较函数用于比较无法转换为数字的字符串与数组的排序，

这是因为比较函数会尝试先将字符串转换为数字再进行比较。当字符串无法转换为数字时，比较将失效（此时若不使用比较函数，即 sort 不加参数，则比较的是 ASCII 值，这种情况下可以正常排序）。

正确用法：

    // 对于不能转换成数字的字符串(字母型字符串),不使用比较参数,直接比较ASCII值
    var myarr3=["h",10];
    myarr3.sort();
    console.log(myarr3);//(2) ['h', 10]
    // 对于可以转换成数字的字符串(数字型字符串),使用比较函数转换成数字再比较
    var myarr4=["23",37,"1",14];
    myarr4.sort(mycompare);
    console.log(myarr4);//(4) ['1', 14, '23', 37]

总结：

1. 当数组中同时包含字符串和数字时，首先需判断字符串是字母型还是数字型字符串。

2. 若是字母型字符串，sort() 无需带参数，直接比较 ASCII 值即可。

若是数字型字符串，sort() 需带参数，利用比较函数将字符串转换为数字后再进行比较。

3. 对于由对象构成的数组，如何排序？

需求

数组项为对象，现需根据对象的某个特定属性对数组进行排序。

	//要求根据对象属性age对数组进行排序
    var arr=[
      {age:10,name:'Tom'},
      {age:8,name:'Jack'},
      {age:20,name:'Michel'},
      {age:12,name:'Daniel'},
    ];

解决方法：使用比较函数。

    var compare = function (obj1, obj2) {
        if (obj1.age < obj2.age) return -1;
        else if (obj1.age > obj2.age) return 1;
        else return 0;
    } 
    console.log(arr.sort(compare));

效果：

{age: 8, name: 'Jack'}
{age: 10, name: 'Tom'}
{age: 12, name: 'Daniel'}
{age: 20, name: 'Michel'}

7. reverse() 函数

reverse() 方法用于反转数组中元素的顺序。

8. concat() 函数

concat() 方法在不影响原数组的情况下，复制一个数组，并将参数添加到副本的尾部。因此，若未传递参数，其效果等同于复制原数组。

9. slice() 函数

slice() 方法不影响原数组，返回从原数组指定开始位置到结束位置的新数组。位置索引从 0 开始计算。若只提供一个参数，则默认第二个参数为数组末尾。

从示例中可以看出，返回的新数组不包含结束位置的那个元素。

如果不传递第二个参数，默认返回到数组末尾，同样不包含最后一个元素。若参数为负数，则计算方向相反，此时包含结束位置的元素，但不包含开始位置的元素。

10. splice() 函数

splice() 可用于删除任意数量的元素，需要两个参数：起始删除位置和要删除的元素数量。

从示例中可以看出，splice() 返回被删除元素组成的数组，且原数组会被修改。

splice() 也可用于插入任意数量的元素，需要三个参数：起始位置、要删除的数量（设为 0 表示不删除）以及要插入的元素。

事实证明，元素是在指定位置之前插入的。

替换操作，实际上是指在指定位置删除任意数量的元素，然后再插入任意数量的元素。

11. indexOf() & lastIndexOf() 函数

这两个函数用于查找参数元素在数组中的位置，若找不到则返回 -1。必传参数为目标元素，还有一个可选参数指定开始查找的起点位置。indexOf() 从头向尾查找，lastIndexOf() 从尾向头查找。

总结

到此这篇关于 js 常用函数 push()、pop()、shift()、unshift()、slice() 和 splice() 等详解的文章就介绍到这了，更多相关 js 常用函数内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！

JavaScript数组常用方法详解：push、pop、shift、unshift、slice与splice

前言