JS 中数组常用方法介绍和示例

122 阅读4分钟

数组是一个存储数据的容器,数组的方法主要用于对数组元素进行增删改查到排序、转换和循环操作。需要注意的是,有些方法会有返回值,有些方法会改变原数组。


增添方法:

  • push() :在数组末尾添加一个或多个元素,并返回数组的新长度。
  • unshift() :在数组开头添加一个或多个元素,并返回新数组的长度。
  • splice() :在指定位置插入或删除元素。传入三个参数:开始位置、删除的元素数量、插入的元素。返回被删除的元素组成的数组。
  • concat() :连接两个或多个数组或元素,返回一个新数组,不会影响原数组。
javascript
复制代码
// push
let colors = []; 
let count = colors.push("red", "green"); 
console.log(count); // 2

// unshift
let count2 = colors.unshift("blue"); 
console.log(count2); // 3

// splice
let removed = colors.splice(1, 0, "yellow", "orange");
console.log(colors); // ["red", "yellow", "orange", "green"]
console.log(removed); // []

// concat
let colors2 = colors.concat("pink", ["black", "brown"]);
console.log(colors2); // ["red", "yellow", "orange", "green", "pink", "black", "brown"]

删除方法

  • pop() :移除数组末尾的一个元素,返回被移除的元素。
  • shift() :移除数组开头的一个元素,返回被移除的元素。
  • splice() :删除指定位置的元素。传入两个参数:开始位置和删除元素的数量,返回删除元素的数组。
  • slice() :截取数组元素,通过传入起始和结束索引来截取数组元素,返回截取出来的元素,不改变原数组。
// pop
let colors = ["red", "green"];
let item = colors.pop();
console.log(item); // "green"
console.log(colors); // ["red"]

// shift
item = colors.shift();
console.log(item); // "red"
console.log(colors); // []

// splice
colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1);
console.log(colors); // ["red", "blue"]
console.log(removed); // ["green"]

// slice
colors = ["red", "green", "blue", "yellow"];
let colors2 = colors.slice(1, 3);
console.log(colors2); // ["green", "blue"]

修改方法

  • splice() :可以在数组中插入或删除元素。传入三个参数:开始位置、删除的元素数量、插入的元素。返回被删除的元素组成的数组。
javascript
复制代码
let colors = ["red", "green", "blue"];
let removed = colors.splice(1, 1, "yellow", "purple");
console.log(colors); // ["red", "yellow", "purple", "blue"]
console.log(removed); // ["green"]

查找方法

  • indexOf() :查找数组中第一个符合条件的元素,并返回它的索引号,如果没有找到则返回 -1
  • includes() :判断数组是否包含指定的元素,返回 truefalse
  • find() :查找数组中第一个符合条件的元素,并返回该元素,如果没有找到则返回 undefined
  • findIndex() :返回第一个满足条件的元素的索引,如果没有找到则返回 -1
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.indexOf(4) // 3
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true
const people = [
    {
        name: "Matt",
        age: 27
    },
    {
        name: "Nicholas",
        age: 29
    }
];
people.find((element, index, array) => element.age < 28) // // {name: "Matt", age: 27}

排序方法

  • reverse() :反转数组中元素的顺序,会修改原数组。
  • sort() :对数组元素进行排序。可以传入一个比较函数,根据前一个元素是否大于后一个元素判断是否交换位置,进行升序和降序的排列。
// 升序
const numbers = [10, 5, 40, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出:[5, 10, 25, 40]
// 降序  把 ab 的位置调换
numbers.sort((a, b) => b - a);


转换方法

  • join() :将数组根据分隔符拼接成字符串,返回包含所有项的字符串。
let colors = ["red", "green", "blue"];
alert(colors.join(",")); // red,green,blue

循环方法

  • some() :循环数组,在数组中只要有一个元素符合条件,这个方法就返回 true,否则返回 false;
  • every() :循环数组,在数组中所有元素都符合条件,这个方法就返回 true,否则返回 false;
  • forEach() :对数组中的每个元素执行给定的函数,无返回值。
  • filter() :过滤出数组中符合条件的元素,组成一个新数组返回。
  • map() :循环数组,组成一个新的数组返回。
  • reduce() :它的主要作用是遍历数组中的每一个元素,每遍历一次把返回结果作为下一次遍历初始值重新累计,最终返回一个累计完后的值; -reduce传参和接收参数: 它需要传入两个参数:1.累积器,保存每次累积后的结果;2.传入一个初始值(可选); 接收参数:上一次值和当前值; arr.reduce((上一次值,当前值)=>{},初始值}
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let someResult = numbers.some((item, index, array) => item > 2);
console.log(someResult) // true
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let everyResult = numbers.every((item, index, array) => item > 2);
console.log(everyResult) // false
const array = [5, 12, 8, 130, 44];
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3
let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let mapResult = numbers.map((item, index, array) => item * 2);
console.log(mapResult) // 2,4,6,8,10,8,6,4,2
// reduce 数组求和
var  arr = [1, 2, 5, 4];
var sum = arr.reduce((prev,current)=>x+y)
console.log( sum ); //求和,12
// reduce 遍历规律
// 上一次值 当前值  返回值(第一次循环)
//    1      2       3
// 上一次值 当前值  返回值(第二次循环)
//    3      5       8

//reduce 数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]


总结

  • 改变原数组的方法push() , pop() , shift() , unshift() , splice() , sort() , reverse()
  • 不会改变原数组的方法concat() , slice() , map() , filter() , reduce() , find() , findIndex() , includes() , indexOf() , every() , some() , join() , forEach()