常用数组方法总结

141 阅读4分钟
  • [-] 内的参数代表可选参数

添加或删除元素

1.splice

  • 可以用于添加,删除 或插入元素。 返回值是被删除的数组元素组成的数组
  • 语法:arr.splice(start [,deleteCount, el1, ..., elN ])
  • 返回值:被删除的数组元素所组成的数组
  • 会破坏原数组
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(2);//只输入开始索引 会从该索引开始删除后面全部元素(包括当前索引)
console.log(arr); //['I', 'study']

----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(2, 2);//从索引2开始删除两个元素
console.log(arr); // ['I', 'study', 'now']

----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(0, 3, "三只羊", "四只羊"); //从索引0开始删除3个元素并加入"三只羊","四只羊"
console.log(arr); // ['三只羊', '四只羊', 'right', 'now']

----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(1, 0, "三只羊", "四只羊"); //要删除的元素个数设置为0 就可以完成插入效果
console.log(arr); // ['I', '三只羊', '四只羊', 'study', 'JavaScript', 'right', 'now']

----------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(-2); //索引为负是被允许的,他们从数组末尾开始计算 从倒数第二个元素开始删除直到最后一个元素
console.log(arr); //['I', 'study', 'JavaScript']

2.slice

  • 将所有从start到end(不包括end)的数组元素复制到一个新数组
  • 语法:arr.slice([start],[end])
  • 返回值:返回一个新数组
let arr = ["I", "study", "JavaScript", "right", "now"];
console.log(arr.slice(1, 3));//['study', 'JavaScript']

--------------------------------------------------------------------
let arr = ["I", "study", "JavaScript", "right", "now"];
console.log(arr.slice(-3, -1)); //['study', 'JavaScript'] 索引可以为负从末尾开始数
--------------------------------------------------------------------
arr.slice()//不加参数的时候可以用于赋值一个新的数组 与原数组内容相同地址不同
--------------------------------------------------------------------
arr

3.concat

  • 用于将数组与其他值进行拼接
  • 语法:arr.concat(arg1, arg2...)
  • 返回值:返回拼接后的新数组
let arr = [1, 2, 3, 4];
console.log(arr.concat([3, 2, 1], "三只羊"));//[1, 2, 3, 4, 3, 2, 1, '三只羊']

遍历:forEach

  • 允许对数组每个元素都运行一次函数
  • 语法:arr.forEach((item, index, array) => {do smoething with item})
  • 返回值:该函数的返回值(如果有返回)会被抛弃和忽略
let arr = [1, 2, 3, 4];
arr.forEach((item) => {
  console.log(item + 1);//控制台依次输出 2 3 4 5
});
console.log(arr);//[1, 2, 3, 4] 原数组不会被破坏

搜索

1. indexOf / lastIndexOf 和 includes

  • 语法:
    • arr.indexOf( item, from) 从索引from 开始搜索item 如果找到则返回索引,未找到返回-1
    • arr.lastIndexOf与与arr.indexOf类似 但是从右向左查找
    • arr.includes(item, from) 从索引from开始搜索item,如果找到则返回true,未找到返回false
let arr = [1, 2, 3, 4, "三只羊"];
console.log(arr.indexOf("三只羊")); // 4
console.log(arr.indexOf("四只羊")); // -1

console.log(arr.includes(1)); //true
console.log(arr.includes(5)); //false
-----------------------------------------------------------------------
  let arr = [1, 2, 3, 4, 1];
console.log(arr.indexOf(1)); // 0  从左向右查找
console.log(arr.lastIndexOf(1)); // 4 从右向左查找

2.find 和 findeIndex / findLastIndex

  • 用于在对象数组中查找具有特定条件的对象
  • 语法:let result = arr.find(function(item, index, array)) {//如果返回true则返回item并停止迭代 对于假值的情况则返回undefined})
  • findIndex与find类似,但是不反回元素本身,返回索引 如果没找到则返回-1
  • findLastIndex与findIndex类似 但从右向左搜索
let users = [
  { id: 1, name: "John" },
  { id: 2, name: "Pete" },
  { id: 3, name: "Mary" },
];

let user = users.find((item) => item.id == 1);
console.log(user);//{id: 1, name: 'John'}

3. filter

  • 与find类似,但是可以返回一个或多个符合条件的元素
  • 语法let results = arr.filter((item, index, array) => {//如果返回true则返回item并停止迭代 对于假值的情况则返回undefined})
let users = [
  { id: 1, name: "John" },
  { id: 2, name: "Pete" },
  { id: 3, name: "Mary" },
];

let user = users.filter((item) => item.id > 1);
console.log(user); // {id: 2, name: 'Pete'} {id:3, name:"Mary"}

转换数组

1.map

  • 对数组每个元素都调用函数并返回结果数组
let users = ["ABC", "BC", "C"];

let lengths = users.map((item) => item.length);
console.log(lengths); //[3, 2, 1]

2.sort

  • 对数组元素顺序进行更改
  • 语法:arr.sort((a,b)=> a-b)
  • 会破坏原数组
let arr = [1, 3, 2, 0, 5];
arr.sort((a, b) => a - b);// a-b 升序排序, b-a降序排序
console.log(arr);//[0, 1, 2, 3, 5]

3.reverse

  • 翻转数组
  • 语法:arr.reverse()
  • 会破坏原数组
let arr = [1, 3, 2, 0, 5];
arr.reverse();
console.log(arr); //[5, 0, 2, 3, 1]

4.split

  • 将一个字符串分割成数组
  • 语法:str.split(delim) delim是给定的分隔符
  • 返回值:一个数组
let str = "haha-lala-huhu";
console.log(str.split("-"));// ['haha', 'lala', 'huhu']

5.join

  • 将数组拼接成字符串
  • 语法:str.join('delim') 没有分隔符的时候默认用','拼接
  • 返回值:返回一个字符串
let arr = [1, 2, 3, 4, 5];
console.log(arr.join("-")); //1-2-3-4-5

6.reduce

  • 当我们需要遍历数组的时可以用formach for 或for..of 当我们需要遍历并返回每个元素的数据时可以用map

arr.reduce与上述方法差不多,但稍微复杂一点。它用于根据数组计算单个值

  • 语法:let value = arr.reduce(() => {accumulator, item, index, array}){},[innitial])
    • accumulator 上一个函数调用的结果,第一次等于innitial(如果提供了innitial的话)
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, item) => sum + item, 5);//累加数组 innitial为5 
console.log(result);//20