JS_常用数组方法（持续更新中）

Rainbow_Pearl

已于 2024-07-24 09:14:08 修改

阅读量445

点赞数 10

文章标签： vue.js 前端 javascript

于 2024-01-26 13:32:37 首次发布

本文链接：https://blog.csdn.net/Rainbow_bead/article/details/134327575

版权

本文详细阐述了JavaScript中的数组操作，如push、pop、unshift、shift等基本操作，以及sort、reverse、splice等高级功能，适合初学者理解数组处理的常见用法。

摘要由CSDN通过智能技术生成

12、indexOf（）从左检查数组中有没有这个数值

13、lastIndexOf（）从右检查数组中有没有这个数值

14、forEach（）

15、map（）

1、push（）末尾添加数据

语法: Array.push(数据)

功能：(在结尾)向数组添加一或多个元素

返回值：返回新数组长度

是否改变原数组：是

let arr = [10, 20, 30, 40]
let res = arr.push("A","B")
console.log(arr); //[10,20,30,40,"A","B"]
console.log(res); //6

2、pop（）末尾删除数据

语法: Array.pop()

功能：删除数组的最后一位

返回值：返回被删除的数据

是否改变原数组：是

let arr = [10, 20, 30, 40] 
let res = arr.pop()
console.log(arr); //[10,20,30]
console.log(res); //40

3、unshift（）头部添加数据

语法: Array.unshift(数据)

功能：（在开头)向数组添加一或多个元素

返回值：返回新数组长度

是否改变原数组：是

 let arr = [10, 20, 30, 40]
 let res = arr.unshift(99)
 console.log(arr); //[99,10,20,30,40]
 console.log(res); //5

4、shift（）头部删除数据

语法: Array.shift()

功能：移除数组的第一项

返回值：返回被删除的数据

是否改变原数组：是

let arr = ["a","b", "c"];
let res = arr.shift();
console.log(arr); // ['b', "c"]
console.log(res); // a

5、reverse（）翻转数组

语法: Array.reverse()

功能：反转数组中的元素

返回值：返回反转后数组

是否改变原数组：是

let arr = [1, 2, 3, "a", "b", "c"];
let res = arr.reverse();
console.log(arr); //["c", "b", "a", 3, 2, 1]
console.log(res); //["c", "b", "a", 3, 2, 1]

6、sort（）排序

语法: Array.sort()

功能：以字母顺序(字符串Unicode码)对数组进行排序

返回值：返回新数组

是否改变原数组：是

例1：默认按照Unicode码顺序进行排序

let arr = ['General','Tom','Bob','John','Army'];
let res = arr.sort();
console.log(res); //["Army", "Bob", "General", "John", "Tom"]

let arr = [10, 1, 5, 2, 3];
arr.sort();
console.log(arr); //[1, 10, 2, 3, 5]

例2：升序（从小到大）

let arr = [50,110,11,55,86,150,45];
arr.sort(function(a,b){
　　return a - b;
})
console.log(arr); //输出 [11, 45, 50, 55, 86, 110, 150]

例3：降序（从大到小）

var arr = [60,10,31,35,855,680,450];
arr.sort(function(a,b){
　　return b - a;
})
console.log(arr);//输出 [855, 680, 450, 60, 35, 31, 10]

例4：对象数组（多参数）

let arr = [{id:21,age:3},{id:15,age:4},{id:12,age:11},{id:9,age:60},{id:12,age:18},{id:10,age:19}];
//①按age从小到大排序
arr.sort((a, b) => a.age - b.age);
console.log(arr);
//输出新的排序
// {id: 21, age: 3}
// {id: 15, age: 4}
// {id: 12, age: 11}
// {id: 12, age: 18}
// {id: 10, age: 19}
// {id: 9, age: 60}

//②如果id相同，按照age从小到大排序
arr.sort(function(a,b){
　　if(a.id === b.id){
　　　　return a.age - b.age
　　}else{
　　　　return a.id - b.id
　　}
})
console.log(arr);
//输出新的排序
// {id: 9, age: 60}
// {id: 10, age: 19}
// {id: 12, age: 11}
// {id: 12, age: 18}
// {id: 15, age: 4}
// {id: 21, age: 3}

7、splice（）截取数组

语法: Array.splice(开始索引(必要)，要删除的项目数量(必要)，向数组添加的新项目(不必要，任意个数))

功能：在指定位置删除指定个数元素再增加任意个数元素（实现数组任意位置的增删改)

返回值：返回删除的数据所组成的数组

是否改变原数组：是

let arr = ["A", "B", "C", 1, 2, 3];
let res = arr.splice(2, 1, "add1", "add2");
console.log(arr); //["A", "B", "add1", "add2", 1, 2, 3]
console.log(res); //["C"]

8、concat（）合并数组

语法: Array.concat( 数据)

功能：通过合并（连接）现有数组来创建一个新数组

返回值：返回合并之后的数组

是否改变原数组：否

let arr1 = [1, 2, 3];
let arr2 = ["a", "b", "c"];
let arr3 = ["A", "B", "C"];
let res = arr1.concat(arr2, arr3);
console.log(arr1); //[1, 2, 3]
console.log(res); //[1, 2, 3,"a", "b", "c","A", "B", "C"]

9、join（）数组转字符串

语法: Array.join(' 连接符')

功能：用特定的字符,将数组拼接形成字符串 (默认",")

返回值：返回拼接后的新数组

是否改变原数组：否

let list = ["a", "b", "c", "d"];
let result = list.join("-"); //"a-b-c-d"
let result = list.join("/"); //"a/b/c/d"
let result = list.join(""); //"abcd"
let result = list.join(); //"a,b,c,d"
console.log(result);

10、slice（）截取数组的一部分数据

语法: Array.slice( 开始索引(起始下标默认值 0),结束索引(终止下标默认值 length,可以接收负数,(倒着数)))

功能：裁切指定位置的数组<索引包含左，不包含右>

返回值：被裁切的元素形成的新数组

是否改变原数组：否

let list = ["a1", "b1", "c1", "d1"];
let result = list.slice(1, 3);
console.log(result); //["b1", "c1"]

11、toString（）数组转字符串

语法: Array.toString()

功能：将数组转换为字符串

返回值：新数组

是否改变原数组：否

let list = ["a", "b", "c", "d"];
let rel = list.toString();
console.log(rel); //"a,b,c,d"

12、indexOf（）从左检查数组中有没有这个数值

语法: Array.indexOf( 要查询的数据)

功能：查询某个元素在数组中第一次出现的位置

返回值：存在该元素，返回下标；不存在，返回 -1

是否改变原数组：否

let list = [1, 2, 3, 4];
let index = list.indexOf(4); //3
let index = list.indexOf("4"); //-1
console.log(index);

13、lastIndexOf（）从右检查数组中有没有这个数值

语法: Array.indexOf( 要查询的数据)

功能：反向查询数组某个元素在数组中第一次出现的位置

返回值：存在该元素，返回下标；不存在，返回 -1

是否改变原数组：否

let list = [1, 2, 3, 4];
let index = list.lastIndexOf(4); //3
let index = list.lastIndexOf("4"); //-1
console.log(index);

14、forEach（）

语法: Array.forEach((item,index,array)=>{})

功能：遍历数组，每次循环中执行传入的回调函数 (eg: forEach() 对于空数组是不会执行回调函数的)。

参数：item：每次循环的当前元素；index：当前项的索引；array：原始数组；

返回值：无/undefined

是否改变原数组：否

// 求数组中数据的和
var listData = [180, 103, 179, 103, 98, 89]
var sumData = 0
listData.forEach((item)=>{
    sumData += item
})
console.log(sumData) // 752

15、map（）

语法: Array.map((item,index,array)=>{})

功能：遍历数组，每次循环时执行传入的回调函数，根据回调函数的返回值，生成一个新的数组，同forEach() 方法，但是map()方法有返回值，可以return出来。

参数：item：每次循环的当前元素，index：当前项的索引，array：原始数组；

是否改变原数组：否

// 加5求和计算
var listData = [88, 91, 47, 13, 61, 80];
var res = listData.map((item, index, array)=> {
  return item + 5;
});
console.log("原数组", listData); // [88, 91, 47, 13, 61, 80]
console.log("新数组", res); // [93, 96, 52, 18, 66, 85]

// 替换数组中key值字段（方法一）
let one = [
  { code: 1, address: '合肥', partNum:'128909' },
  { code: 2, address: '石家庄', partNum:'328909' },
  { code: 3, address: '上海', partNum:'912109' }
];
let transformedArray = one.map(item => {
  let { code: name, address: value, ...rest } = item;
  return { name, value, ...rest };
});
console.log(transformedArray); // [{name: 1, value: '合肥', partNum: '128909'}...]
1、使用 map 方法遍历数组 one 中的每一个对象 item。
2、对象解构赋值 { code: name, address: value, ...rest } = item 将原对象的 code 字段赋值给 name 变量，address 字段赋值给 value 变量，其余字段则放在 rest 对象中。
3、构造新的对象 { name, value, ...rest }，其中 name 和 value 是新的字段名，...rest 将原对象的其余字段保留在新对象中。
4、最终得到的 transformedArray 数组即为符合要求的结果，每个对象的字段名都已经替换为指定的新名称。

// (方法二)
let lists = [{id: 1,name: "李四"},{id: 2,name: "张三"}]
let newList = lists.map(item => { return { id: item.id, itemName: item.name} })
console.log(newList); // [{id: 1,itemName: "李四"},{id: 2,itemName: "张三"}]