JS 常用的数组方法

介绍

JS 常用的数组方法合集

map(item=>{重组解构}) 处理数组方法(重组)

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

  • map后的数据类型: [{id:'',name:'',seq:''},{},{}.........] 是一个JSON对象格式的数据

• map() 具有两个参数 一个是原数据(item) 一个是索引值(index)

• map可以作用于 对遍历的每一项数据 进行加工 让其变为新的数组。

• map() 方法会遍历出一个新的数组(无需存储) 拿来用即可

  • 用于数组中的每一项数据进行处理 最后返回一个新的数组
  • 可以用于 给数组添加新的属性名

对每一个现有频道进行排序 并且添加一些属性

  //! 对每一个现有频道进行排序（添加一个seq属性进行编号和其他数据）
      //! 先对之前的频道排序 利用map方法(包含index参数) 往里面添加 频道序列号
      const orderChannels = this.channels.map((item, index) => {
        return {
          //! 添加频道数据的id
          id: item.id,
          //! 添加频道数据的名称
          name: item.name,
          //! 添加频道数据的 索引(map自带)
          seq: index
        })
  // 数据类型: [{id:'',name:'',seq:''},{},{}.........]

filter(item=>{筛选条件}) 筛选数组方法

返回的数据类型是 布尔值 符合条件 true 不符合 false

• filter() 方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • 注意：filter() 不会对空数组进行检测。
  • 注意：filter() 不会改变原始数组。

筛选数组对象(JSON)中的num不等0的对象

  let arr = [
    {
      productId: 1,
      productName: '电视机',
      num: 20
    }, {
      productId: 2,
      productName: '洗衣机',
      num: 0
    }, {
      productId: 3,
      productName: '冰箱',
      num: 50
    }, {
      productId: 4,
      productName: '空调',
      num: 0
    },
  ]
  // 进行筛选
  arr = arr.filter(item => {
    return item.num !== 0 // num不等0的数据筛选出来
  })
  console.log(arr)
// [{productId: 1, productName: '电视机', num: 20},{productId: 3, productName: '冰箱', num: 50}]

配合 some() 检测数组中的元素是否满足指定条件(取反) 再filter()储存不满足条件数据

    optionChannels () {
// 进行筛选 filter()方法进行数据总筛选 接收some()传来的true(取反值) 代表不存在的数据为true filter() 方法储存不存在的数据即可
// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
      return this.allChannels.filter(item => { // allChannels 是全部频道数据 channels是我的频道数据
        // 进行符合条件筛选 some() 并且取反 把不满足条件的取反变成true 返回给filter()筛选器
        // some()方法作用：判断数组中是否包含符合条件的数据，只要有一项符合，就返回true
        return !this.channels.some(items => {
          return items.id === item.id
        })
      })
    }

some(item=>{条件判断}) 筛选数组方法(有一个满足)

• some()不会创建一个新数组 some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• some()和 forEach()一样 都可以遍历 并且支持暂停遍历
  • 终止遍历 return true
• 如果没有满足条件的元素，则返回false。
  • 注意： some() 不会对空数组进行检测。
  • 注意： some() 不会改变原始数组。
• 通常和 filter()方法使用

简单的some()案例

        var a=[1,2,4,69,56,89]
        // 如果有超过88的 就返回true
　　　　 var some1=a.some((item)=>{
                return item > 88
            })
        console.log(some1)//true

every(item=>{条件判断}) 筛选数组方法(所有满足)

• 大致和some()方法一致

• every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

  every() 方法使用指定函数检测数组中的所有元素：

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件，则返回 true。

• 注意： every() 不会对空数组进行检测。

  注意： every() 不会改变原始数组。

• every()是所有条件都满足 才会返回true some有一个满足就返回true

简单的every()案例

	 const a=[1,2,4,69,56,89]
	 // 如果都超过0 返回true
　　　　 var some1=a.every((item)=>{
                return item > 0
            })
        console.log(some1)

find(item=>{筛选条件}) 筛选数组符合条件内容

• find() (opens new window)不会修改原对象(数组) 但是会返回一个符合条件的对象
• 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 undefined
• 注意: find() 对于空数组，函数是不会执行的。
• 可以设置索引值的参数 array.find(function(当前元素, 索引值, 当前元素所属的数组对象))

基于Vue进行的find()筛选 (作用域插槽传来的数据例子)

    formatHireTyp (type) { // 接收作用域插槽传来的数据
      // 使用find方法 查询符合格式化的数据
      const obj = Types.hireType.find(item => { // 导入格式化规则
        return item.id === type // 格式化条件 查询 作用域插槽传来的数据
      })
      // 把查完的结果 return返回 返回给作用域插槽
      // 进行判断 如果查询到存在筛选内容 那就赋值给其正式的数据 如果没查到 返回原数据
      return obj ? obj.value : type
    },

findIndex()查找数组对应的下标(索引值)

• findIndex() (opens new window) 可以使用遍历的方式 查询数组对象中某个符合条件的对象 而indexOF()不可以遍历
• findIndex() (opens new window) 不会遍历全部数据 当他找到符合条件的就会终止 并返回符合条件的索引值

查询数组对象中 符合条件的对象 返回其索引

• 一个数组对象 获取 id 为 3 的索引

const arry = [
  { id: '1', name: '张三' },
  { id: '2', name: '李四' },
  { id: '3', name: '王五' },
  { id: '4', name: '赵六' }
]

1. 通过indexOf() (opens new window) 匹配 map() (opens new window)返回

let index = arry.map((item) => item.id).indexOf('3')
console.info(index); //返回值2

2. 通过findIndex() (opens new window) 自身进行遍历匹配

let index = arry.findIndex((item) => item.id == '3')
console.info(index); // 返回值2

• 两种方式的区别：
  • map()的遍历是不可中断的，不管是否找到匹配对象都会完整的遍历整个数组对象；
  • findIndex()找到匹配对象后就返回结果，不会继续遍历;

findLast(item=>{筛选条件}) 倒叙筛选数组

• findLast() (opens new window) 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined (opens new window)。
• 他和find() (opens new window) 效果一样 只不过find()是正序查询 findLast()是倒叙查询

const nums = [7, 14, 3, 8, 10, 9];

// 倒叙查找符合条件的数据
const lastEven = nums.findLast((num) => num % 2 === 0)

console.log(lastEven) // 10

findLastIndex() 倒叙查找数组对应的下标(索引值)

• findLastIndex() (opens new window) 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
• 他和findIndex() (opens new window) 效果一样 只不过findIndex()是正序查询 findLastIndex()是倒叙查询

const nums = [7, 14, 3, 8, 10, 9];

// 倒叙查找符合条件数据的索引值
const lastEvenIndex = nums.findLastIndex((num) => num % 2 === 0);

console.log(lastEvenIndex) // 4

forEach((item,index)=>{}) 循环遍历

• 不会生成一个新数组 会直接改变原数组
• 本质上等同于 for 循环，对每一项执行 function 函数。
• 没有返回值(return)
• forEach循环遍历的时候 不能终止 只能从头遍历到结尾
• 注意: 该方法会改变原始数组。

筛除3号数字

var arr = [1, 2, 3, 4, 5];

arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});

indexOf() 查找下标(索引值)

• 查找 对应数据的索引值
  • 如果存在 返回相应的索引值
  • 如果不存在 返回 -1 (区分大小写)

查询相应内容的下标

<script type="text/javascript">

let str=["123","321","111"]

str.indexOf("123")
str.indexOf("321")
str.indexOf("666")
</script>
// 返回的数值
0
1
-2

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

• includes() 方法用来判断一个数组是否包含一个指定的值。
• 如果是返回 true，否则false

简单判断流程

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

splice() 数组截取删除添加二合一

• splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
• 这个方法 不会生成 新数组 会直接改变原来数组
• 通常用作删除功能

**注意: **该方法会改变原始数组。

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

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

splice() 用作删除 示例

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.splice(0,3); // 截取三个内容
// 截取的内容
console.log(citrus) // ['Banana', 'Orange', 'Lemon']
// 被截的内容
console.log(fruits) // ['Apple', 'Mango']

slice() 分割数组方法

• slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
• 不会修改原数组 但会返回一个分割后的新数组

语法

array.slice(开始索引, 结束索引) 

简单小案例

let fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
let citrus = fruits.slice(0,3); // 截取三个内容
// 截取的内容
console.log(citrus) // ['Banana', 'Orange', 'Lemon']
// 被截的内容
console.log(fruits) // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']

new set() 数组去重方法

MDN官网介绍 (opens new window)

• ES6 提供了新的数据结构 new Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
  • 设置该方法时候 需要在前面加 new 创建一个新对象
• 需要手动 设置新数组 并且添加进去
• new set()自带很多自己的方法

set()方法去除数组重复 示例

      // ~ 3. 进行搜索数据的去重 new Set() 方法去重后自动生成数组 把没有重复的数组覆盖到 原先数组中
      this.history = [...new Set(this.history)]

push() 数组添加方法

• 把数据添加到数组末尾 对原数据不会有修改 不会覆盖 只是添加到末尾
• 注意: 该方法会直接对原数组进行操作 

push() 方法 添加数据 示例

    // 把服务器 获取的数据 储存到页面对象里 需要使用 push方法 因为分页是动态获取数据 需要用push添加 不覆盖之前数据
      this.list.push(...ret.data.results) // ... 是把所有数据储存起来

concat()数组连接(拼接)方法

• concat() 方法用于连接两个或多个数组。注意; 只能拼接数组 不能拼其他的
• 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。通常需要用变量来接收

let a = [1,2,3,4];

let b = [5,6];

let c = a.concat(b); // a,b 数组都不变，c变成了1,2,3,4,5,6 该方法并不会改变原数组

unshift() 数组开头添方法

• 添加数据到数组开头 不会覆盖之前数据 只是添加到开头

unshift() 方法 添加数据 示例

  // ~ 把输入的内容 保存到历史关键字对象里 unshift会把数据添加到第一项 push是默认添加到结尾
      this.history.unshift(this.q)

add() 数组添加方法

• 把数据添加到数组内 会覆盖原先的数据

add() 方法添加数据 示例

  this.list.add(...ret.data.results) 

toString() 对象转字符串方法

• 把对象转换为字符串格式
  • 通常解决 js获取过长id无法解读 用到json-bigint插件时候 把查分id的对象 转为字符串

把对象转换为字符串 (Vue的key只是别字符串)

:key="item.art_id.toString()

split(',') 字符串分割成字符串数组

• split() 会创建一个新的字符串数组 但不会改变原始字符串
• split() 方法用于把一个字符串分割成字符串数组。
• 数组字符串通过是 , 隔开
• 把字符串转成 字符串数组 可以方便循环遍历 在页面渲染出来

把符合条件的内容 从字符串分割成字符串数组

            if (state.movie.tags) { // 满足条件 把字符串分割为 字符串数组
                state.movie.tags = state.movie.tags.split(',')
            }

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

• 返回的值是布尔值
  • 如果含有 返回true
  • 如果不含 返回false
• 可以判断路径地址

设置路径白名单 判断是否在该路径下

// 创建一个路径白名单 里面填写的是路径 (允许用户游客模式访问一些内容 比如登录页 404 没必要验证)
const white = ['/login', '/404']

// 判断是否处于该路径地址
 if (white.includes(to.path)){
 
 }

reduce(()=>{},初始值可不写) 把数组中的所有项进行拼接

• reduce() 可以把数组中所有项目进行拼接
  • 拼接格式 必须是: 参数1+参数2+...... (参数1必须在最前)
• 不会修改原数组的数据 但是会返回一个拼接后的新数组
• 需要return
• reduce() 有四个参数
  • item代表一次回调的值 初始值为0
  • cart代表当前元素的值
  • index当前下标
  • arr原数组
  • 对象结尾是 初始值
• 通常可以代替循环遍历 拼接数据

简单的reduce() 使用

let a=[4,5,6,7,8]
//item代表一次回调的值 初始值为0
//cart代表当前元素的值
//index当前下标
//arr原数组
let num=a.reduce((item,cart,index,arr)=>{
    return item+=cart
},0)//初始值为0 从0开始
console.log(num) //输出为30

at()选中索引元素

• at() (opens new window)方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。

• 当我们想要访问倒数第N个元素时，我们只需要传入-N给at()即可:

const arr = ['a', 'b', 'c', 'd'];

// 倒数第一个元素
console.log(arr.at(-1)); // d
// 倒数第二个元素
console.log(arr.at(-2)); // c

• 除了数组，string和Uint8Array (opens new window)数组也支持at()

const str = 'Coding Beauty';
console.log(str.at(-1)); // y
console.log(str.at(-2)); // t

const typedArray = new Uint8Array([16, 32, 48, 64]);
console.log(typedArray.at(-1)); // 64
console.log(typedArray.at(-2)); // 48

参考文献

ES13的11个超赞的新属性 (opens new window)