【自我总结】js中数组中会改变原有数组的方法汇总

算了_这是个垃圾前端
250 阅读7分钟

js改变原数组的方法：

ES5部分

1、pop()

删除数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值

var arr = [];
var newArr = arr.pop();//undefined

2、push()

　　push() 方法可把它的参数顺序添加到 array的尾部。它直接修改 array，而不是创建一个新的数组，array.push(newelement1,newelement2,….,newelementX) 。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");//可以依次添加一个或者多个值

3、reverse()

　　该方法会改变原来的数组----将原来的数组倒序，而不会创建新的数组。它不通过重新排列的元素创建新的数组，而是在原先的数组中重新排列它们

var a = [1,2,3]; a.reverse().join() // ⇒ "3,2,1",并且现在的a是[3,2,1]

4、shift()

　　删除数组的第一个元素，并返回第一个元素的值,如果数组是空的，那么 shift() 方法将不进行任何操作。

let  arr =  [1,2,3，4，5];
let item = arr.shift();  // 1
console.log(arr); // [2,3，4，5]

5、unshift()

　　unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。array.unshift(newelement1,newelement2,….,newelementX)返回array的新长度。

let a = [1, 2, 3, 4, 5]
let result = a.unshift(1)
console.log(result);
console.log(a);// [1, 1, 2, 3, 4, 5]

result = a.unshift('aaa', 'baa');// 可一次添加多个值
console.log(result);// 8
console.log(a);// ['aaa', 'baa', 1, 1, 2, 3, 4, 5]

6、sort()

　　对数组的引用。请注意，数组在原数组上进行排序，不生成副本。array.sort(sortby) (如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。  　　如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。  若 a 等于 b，则返回 0。 若 a 大于 b，则返回一个大于 0 的值。) 

摘自廖雪峰的官方网站

Array的sort()方法默认把所有元素先转换为String再排序，字符串是根据ASCII码进行排序，所以sort()方法排序结果画风可能是这样的

// 看上去正常的结果:
['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];

// apple排在了最后:
['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']

// 无法理解的结果:
[10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二个排序把apple排在了最后，是因为字符串根据ASCII码进行排序，而小写字母a的ASCII码在大写字母之后。

第三个排序是因为 ```sort()方法默认把所有元素先转换为String再排序，结果'10'排在了'2'的前面，而字符'1'比字符'2'`的ASCII码小。

幸运的是，sort()方法也是一个高阶函数，它还可以接收一个比较函数来实现自定义的排序。

要按数字大小排序，我们可以这么写：

复制代码

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); // [1, 2, 10, 20]

sort()方法会直接对Array进行修改，它返回的结果仍是当前Array

var a1 = ['B', 'A', 'C'];
var a2 = a1.sort();
a1; // ['A', 'B', 'C']
a2; // ['A', 'B', 'C']
a1 === a2; // true, a1和a2是同一对象

7、splice()

具有删除、插入。替换三个作用，该方法返回的是一个数组（包含从原数组中删除的项（若没有删除项则返回一个空数组））

语法：

splice(index,howmany,item1,…itemx); index——必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。 howmany——必须，要删除的数量，如果为0，则不删除项目。 item1,…itemx——可选，向数组添加的新项目。

7.1. 删除

可删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。 let arr=[1,2,3]; let arr1=arr.splice(1,2);//会删除数组的第2和3个元素（即2,3） alert(arr);//[1] alert(arr1);//[2,3]

7.2. 插入

可以向指定位置插入任意数量的项只需提供3个参数：起始位置、0（要删除的项数）、要插入的项。 let arr=[1,2,3]; let arr1=arr.splice(1,0,4,5);//会从数组的1位置开始插入4,5 alert(arr);//[1,4,5,2,3] alert(arr1);//[]

7.3. 替换

可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项（插入的数量不必与删除的数量相等） let arr = [1,2,3]; let arr1=arr.splice(1,1,"red","green");//会删除3，然后从2位置插入字符串"red"和"green" alert(arr);//[1,"red","green",3] alert(arr1);//[2]

ES6部分

8.copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组

三个参数都是数值，如果不是，会自动转为数值.三个参数都支持负值，如果是负值就从数组末尾逆序开始计算

特点：

  • 不会修改原数组的长度
  • 如果end - start的值大于length - target的值，则按顺序赋值，超出部分会丢弃
  • 会修改原数组，最终返回的是修改后的数组

参数： target（必需）：从该位置开始替换数据。如果为负值，表示倒数。 start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。 end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。

let arr = [1, 2, 3, 4];
// start默认值是0, end默认值是数组的length，拷贝数组的所有内容到数组的索引位置为2的地方，顺序修改数组的元素值
arr.copyWithin(2);
console.log(arr);// [1, 2, 1, 2]
  • target为负值
let arr = [1, 2, 3, 4];
arr.copyWithin(-1);//target为-1，则按数组逆序计算，即为数组索引位置为3的元素
console.log(arr);// 当前位置从-1开始[1, 2, 3, 1]
  • start和end是负值
let arr = [1, 2, 3, 4, 0, -3, -9];
arr.copyWithin(1, -3, -1);
console.log(arr);// [1, 0, -1, 4, 0, -3, -9]
// start是负值，逆序计算即为数组索引为4的位置
// end是负值，逆序计算即为数组索引为6的位置，但不包括此项
// 即待复制的数组内容为[0, -3]
// 把待复制的内容复制到从数组索引为1的位置
// 把索引为2，3的元素用[0, -3]替换
  • start的值为负值且绝对值大于数组长度
let arr = [1, 2, 3, 4, 0, -1, -2];
arr.copyWithin(1, -8);
console.log(arr);// [1, 1, 2, 3, 4, 0, -1]
// start为-8，则逆序后已经为数组索引为-1的元素了，则取值为0
// 即当start为负值时, start = Math.max(start, 0)
// target同理
let arr = [1, 2, 3, 4, 0, -1, -2];
arr.copyWithin(-8, -2);
console.log(arr);// [-1, -2, 3, 4, 0, -1, -2]
执行流程
 强制转换target为整型
 如果target值小于零，则取max(length + target, 0)；否则取min(target, length)
 强制转换start为整型
  如果start值小于零，则取max(length + start, 0)；否则取min(start, length)
  如果end是undefined，则取end为length值；否则强制转换为整型
  如果end值小于零，则取max(length + end, 0)；否则取min(end, length)
  取count为min(end - start, len - target)
  从start开始遍历数组且次数为count，顺序赋值给target的元素

9.fill()填充数组

//语法：array.fill(value, start, end)
//value	必需。填充的值。
//start	可选。开始填充位置。为负数情况下 则开始索引则是length+start
//end	可选。停止填充位置 (默认为 array.length),为负数情况下 则开始索引则是length+end
const arr = new Array(3).fill('haha');
console.log(arr); //['haha','haha','haha'];
const arr=[1,2,3,4];
//从索引2开始，到索引4结束 不包括终止索引 将值替换成0
console.log(arr.fill(0,2,4));//[1,2,0,0]
avatar
文章
阅读
粉丝