JavaScript数组中会修改原数组的方法有哪些？

gurenchang

于 2024-03-20 23:13:54 发布

阅读量575

点赞数 7

文章标签： javascript 前端

本文链接：https://blog.csdn.net/gurenchang/article/details/136890003

版权

前言：

最近跟小伙伴们一起讨论的时候遇见了一个问题：JavaScript中对原数组有影响的数组原生方法有哪些呢？对原数组没有影响的数组原生方法又有哪些呢？我翻阅了很多篇博客，我发现并没有总结特别全面的，我就利用了半个小时把数组的所有方法都测试了一遍，总结如下：

对原数组有影响的数组原生方法有：

push() pop() unshift() shift() splice() reverse() sort() fill()

扩展：数组中不会影响原数组的方法有哪些？

concat() join() slice() forEach() map() filter() reduce() reduceRight() every() some() find() findIndex() keys() entries() values() from() includes() isArray() lastIndexOf() toString() valueOf()

代码测试如下：

1.会修改原数组的方法：

1.1push()向数组的末尾添加一个或更多元素，并返回新的长度。

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let push = arr.push(4);
console.log(push);//7
console.log(arr);//[ 0, 1, 4, 2, 5, 3, 4]

1.2pop()删除数组的最后一个元素并返回删除的元素。

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let pop = arr.pop();
// console.log(pop);//3
console.log(arr);//[ 0, 1, 4, 2, 5 ]

1.3unshift()向数组的开头添加一个或更多元素，并返回新的长度。

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let unshift = arr.unshift(0);
console.log(unshift);//7
console.log(arr);//[ 0, 0, 1, 4, 2, 5, 3 ]

1.4shift()删除并返回数组的第一个元素。

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

1.5splice()从数组中添加或删除元素。

array.splice(index, howmany, item1, ....., itemX)

index	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, ..., itemX	可选。要添加到数组中的新项目。

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
let splice = arr.splice(2, 0, 7, 9);
console.log(splice);//[]
console.log(arr);//[1, 4, 7, 9, 2, 5, 3 ]

1.6reserve()反转数组的元素顺序。

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let reverse = arr.reverse();
console.log(reverse);//[ 3, 5, 2, 4, 1 ]
console.log(arr);//[ 3, 5, 2, 4, 1 ]

1.7sort()对数组的元素进行排序

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let sort = arr.sort((a, b) => {
  return a - b;
})
console.log(sort);//[ 1, 2, 3, 4, 5 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]

1.8fill()使用一个固定值来填充数组

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let newArr = arr.fill(0);
console.log(newArr);//[ 0, 0, 0, 0, 0, 0 ]
console.log(arr);//[ 0, 0, 0, 0, 0, 0 ]

2.不会修改原数组的方法：

2.1concat()连接两个或更多的数组，并返回结果

let arr = [0, 1, 4, 2, 5, 3];
let ay = [6, 7, 8, 9, 10];
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
console.log(ay);//[ 6, 7, 8, 9, 10 ]
console.log(arr.concat(ay));//[ 0, 1, 4, 2, 5, 3, 6, 7, 8, 9, 10]
console.log(arr);//[ 0, 1, 4, 2, 5, 3 ]
console.log(ay);//[ 6, 7, 8, 9, 10 ]

2.2join()连接两个或更多的数组，并返回结果

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[0, 1, 4, 2, 5, 3]
let join = arr.join("");
console.log(typeof join);// string
console.log(typeof arr, arr);//object [ 0, 1, 4, 2, 5, 3 ]

2.3slice()选取数组的一部分，并返回一个新数组

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[0, 1, 4, 2, 5, 3]
let slice = arr.slice(1, 3);
console.log(slice);//[1, 4]
console.log(arr);//[0, 1, 4, 2, 5, 3]

2.4forEach()数组每个元素都执行一次回调函数

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
arr.forEach(element => {
  console.log(element);  
});
//1
//4
//2
//5
//3
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.5map()通过指定函数处理数组的每个元素，并返回处理后的数组

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let map = arr.map(item => {
  return Math.sqrt(item);
})
console.log(map); //[ 0, 1, 2, 1.4142135623730951, 2.23606797749979, 1.7320508075688772 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.6filter()检测数值元素，并返回符合条件所有元素的数组

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let filterArr = arr.filter(item => {
  return item > 3;
})
console.log(filterArr);//[ 4, 5 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.7reduce()将数组元素计算为一个值（从左到右）

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let reduce = arr.reduce((total, item) => {
  return total - item;
})
console.log(reduce);//-15
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.8reduceRight()将数组元素计算为一个值（从右到左）

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let reduceRight = arr.reduceRight((total, item) => {
  return total - item;
})
console.log(reduceRight);//-9
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.9every()检测数值元素的每个元素是否都符合条件

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let everyFlag = arr.every(item => {
  return item > 3;
})
console.log(everyFlag);//false
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.10some()检测数组元素中是否有元素符合指定条件

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let someFlag = arr.some(item => {
  return item > 7;
})
console.log(someFlag);//true
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.11find()返回符合传入测试（函数）条件的数组元素

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let findElement = arr.find((item) => {
  return item > 3
})
console.log(findElement);//4
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.12findIndex()返回符合传入测试（函数）条件的数组元素索引

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let findIndex = arr.findIndex(item => {
  return item > 3;
})
console.log(findIndex);//2
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.13keys()返回数组的可迭代对象，包含原始数组的键(key)

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
for (let item of ay.keys()) {
  console.log(item);
}
//0
//1
//2
//3
//4
//5
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.14entries()返回数组的可迭代对象

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
for (let item of arr.entries()) {
  console.log(item);
}
//[ 0, 0 ]
//[ 1, 1 ]
//[ 2, 4 ]
//[ 3, 2 ]
//[ 4, 5 ]
//[ 5, 3 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.15values()返回数组对象的原始值

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
for (let item of ay.values()) {
  console.log(item);
}
//0
//1
//4
//2
//5
//3
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.16from()通过给定的对象中创建一个数组

let str = "ABCDEFG"
var myArr = Array.from(str);
console.log(myArr);['A', 'B', 'C','D', 'E', 'F','G']
console.log(str);//ABCDEFG

2.17includes()判断一个数组是否包含一个指定的值

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let isIncludes = arr.includes(3);
console.log(isIncludes);//true
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.18isArray()判断对象是否为数组

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let isArray = Array.isArray(arr);
console.log(isArray);//true
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.19lastIndexOf()搜索数组中的元素，并返回它最后出现的位置

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let indexOf = arr.indexOf(4);
console.log(indexOf);//2
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.20toString()把数组转换为字符串，并返回结果

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let toString = arr.toString();
console.log(toString);//1,4,2,5,3
console.log(arr);//[ 1, 4, 2, 5, 3 ]

2.21valueOf()返回数组对象的原始值

let arr = [0, 1, 4, 2, 5, 3];
console.log(arr);//[ 1, 4, 2, 5, 3 ]
let valueOf = arr.valueOf();
console.log(valueOf);//[ 1, 4, 2, 5, 3 ]
console.log(arr);//[ 1, 4, 2, 5, 3 ]