js中数组方法总结

DuanHB
70 阅读6分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”

在日常开发过程中，会经常面对数据处理的需求其中数组与对象的处理占据很大的比重，js提供了很对处理数组与对象的方法，在本章中将会根据函数的功能，传参的方式以及返回值与等效操作几方面对js中的这些数据处理函数进行总结 数组方法总结 方法的职能，方法的传参方式，方法的返回值，原来的数组是否会发生改变，方法的优化 增 删 改 查 遍历

对原有数组进行改变

  • push：向数组某尾增加元素,返回值为新增后数组的长度，等同于arr[...arr,100]
  • unsift：向数组开始位置增加元素,返回值为新增后数组的长度 等同于arr[100,...arr]
  • shift:删除数组的第一项，返回值为被删除的值
  • pop：删除数组的最后一项，返回值为被删除的值，原生js arr.length--;会直接将最后一项进
  • reverse：将数组进行逆序排列，不需要参数，返回排列后的新数组
  • splice：职能： 对数组进行操作（实现增，删，改）

参数：

  • 删除：n，m都是数字   从索引n开始，删除m个元素（m不写，默认删除到末尾）

  • 增加：n，0，x   从索引n开始，删除0个元素，后面增加元素x

  • 修改：n，m，x   从索引n开始，删除m个元素,删掉的取用用新元素x占用

返回值：把删除掉的元素用新数组存储起来进行返回

  • sort 职能： 将数组进行顺序排列 参数：
//不传参时只能对10以下的元素进行排列
  //传递函数时
  arr.sort((a,b)=>{
      return a-b;
  })
  //a/b代表相邻的两项，a-b时数组按照从小到大的顺序进行排列

返回值： 返回排列后的新数组

原有数组不会发生改变（查询、拼接）

  • slice： 实现数组的查询 参数：
    // n,m都是数字  从n项开始，找到索引为m的地方  [n,m)不包含m这项
    // n 从n项开始找到末尾
    // splice(0)实现数组的克隆

返回值： 把找到的内容以新数组的形式返回

  • concat：实现数组拼接，返回拼接后的新数组
  • toString：将数组转化为字符串，返回转化后的字符串
  • join：将数组转化为字符串（可以指定分隔符），指定的分隔符（格式为字符串的格式）join('/') 默认是使用 , 进行分割，返回转化后的字符串
function joinArr(){
	var a = [1,2,3,4,5,6]
	a.join('-')//使用分隔符来分隔数组中的元素
	alert(a.join('-'))//1-2-3-4-5-6
}
  • indexOf/lastIndexOf，监测当前项在数组中第一次或最后最后一次出现的位置的索引值，参数为要检索的这一项的内容indexOf（x,y)y控制查找的起始位置，这一项出现位置的索引值，如果没有这个值返回-1
  • includes：监测数组中是否包含指定内容，参数为要检索的这一项的内容，返回true / false

遍历操作

  • for 语句
  • for-in 语句
  • for-of 语句
  • forEach 语句：不能提前跳出循环，没有返回值
  • map 方法 ：map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组,并不会对原有数组造成改变。
var arr = [1,2,3]
var firearr = arr.map(current => current * 5)
console.log(arr) // [ 1, 2, 3 ]
console.log(firearr) // [ 5, 10, 15 ]
  • filter方法：创建一个新数组，新数组中的元素都是符合指定条件过滤后的元素。
var arr = [2,3,4,5,6]
var morearr = arr.filter(function (number) {
    return number > 3
})
  • every方法：用来检测数组中每个元素（检测所有元素）是否都符合指定条件。
// 若有一个不满足条件，则返回false，后面的元素都不会再执行。
// 不会对空数组进行检测，不会改变原始数组
var arr = [-1,2,3,4,5]
var result = arr.every(function (item, index) {
    return item > 0
})
  • some方法：用来检测数组中每个元素（检测所有元素）是否存在符合指定条件的元素。
// 若有一个满足条件，则返回true，后面的元素都不会再执行。
// 不会对空数组进行检测，不会改变原始数组
var arr = [-1,2,3,4,5]
var result = arr.some(function (item, index) {
    return item > 0
})
  • find方法：用来检测数组中是否存在符合条件的值，若存在则返回该值且之后的遍历不再执行，若不存在返回undefined。
var arr = [1, 3, 6, 90, 23];
const result = arr.find(function (element, index, array) {
        return element > 6;
    });
console.log(result); // 90   
// 返回第一个满足条件的值
  • reduce 方法

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

其他操作

  • Array.from()：用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map），返回转换后的数组。
  • Array.of()：用于作为做于数组构造函数Array()的补充，Array.of()传参方式与其结果的映射更为统一
// Array()参数不同指行方式不同，只有大于2个参数值才会按照传参创建数组，单个参数时为创建与参数长度一致的数组
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
//相比Array()行为更加统一
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

数组去重

set去重

set是一种新的数据结构并不是数组类型（set是一个不重复的数据集），使用set做去重操作时需要对结果进行数据类型转换

   // Set 本身是一个构造函数，用来生成 Set 数据结构
    const arr = [1,1,2,2,3,3,4,4,5,5];
    const setData = Array.from(new Set(arr));// 类数组转为数组可以通过展开语法实现[...new Set(arr)]
    console.log(setData);

但是Set去重有一个弊端，他无法去重引用类型的数据,比如对象数组。当去重的数组为数字或者字符串数组时首选使用set()构造函数进行去重操作。

双循环去重
//双重循环去重
const handleRemoveRepeat = (arr) => {
    for (let i=0,len = arr.length; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
            if (arr[i] === arr[j]) {
                arr.splice(j, 1);
                j--;
                len--;
            }
        }
    }
    return arr;
};
indexOf方法去重

数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组res，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在res中，则将其push进res中，最后将res返回即可获得去重的数组

//去重
const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++) 
     if (repeatArr.indexOf(arr[i]) === -1)  repeatArr.push(arr[i])
    return repeatArr;
}
// includes()与indexOf方法去重完全一致，区别只存在于两种判断存在函数的返回值不同
const handleRemoveRepeat = (arr) => {
    let repeatArr = [];
    for (let i = 0,len = arr.length ; i < len; i++)
        if (!repeatArr.includes(arr[i])) repeatArr.push(arr[i])
    return repeatArr;
}
filter方法去重

将数组中第一次出现的重复元素删掉

var arr = [1, 3, 6, 90, 23,1,2,3];
const filterArr = arr.filter(function(item, index) {
// 如果元素首次出现的位置就是当前遍历的index，按这个规则取到的值是唯一的
    return arr.indexOf(item, 0) === index
})
avatar
文章
阅读
粉丝