当前位置:首页 > 技术文章 > 正文内容

ES6史上最全数JS数组方法合集-02-数组操作

zonemu18小时前技术文章1

数组生成 array.of

let res = Array.of(1, 2, 3)
console.log(res) // [1, 2, 3]

下标定位 indexOf

用于查找数组中是否存在某个值,如果存在则返回某个值的下标,否则返回-1

let list = [1, 2, 3];
console.log(list.indexOf(2))  // 1
console.log(list.indexOf('饼干'))  // -1

元素存在 includes

检测数组中是否存在该元素,返回布尔

let list = [1, 2, 3];
console.log(list.includes(2))  // true

数组添加 push

向数组后面添加元素,返回值为数组的length

let list = [1, 2, 3];
let res = list.push(1)
console.log(res) // 4

数组头添加 unshift

向数组的头部添加元素,返回值为数组的length

let list = [1, 2, 3];
let res = list.unshift(0)
console.log(res) // 0,1,2,3

数组反转 reverse

用于数组反转,返回新数组

let list = [1, 2, 3]
let res = list.reverse()
console.log(res) //  [3, 2, 1]

数组拼接 join

用于数组以什么形式拼接,返回字符串

let list = [1, 2, 3]
let res = list.join('-')
console.log(res)  // 1-2-3

数组排序 sort

用于数组排序,接收函数参数,排序规则根据参数函数返回值,返回新数组

  • 返回值为正数,后面的挪到前面
  • 返回值为负数,保持不动
  • 返回值为0,保持不动
let list = [1, 2, 3]
let sortRes = list.sort((a, b)=> b-a)
console.log(sortRes)  // [3, 2, 1]

数组合并 concat

用于合并数组,返回新数组

let list = [1, 2, 3]
let res = list.concat([4, 5, 6])
console.log(res)  // [1, 2, 3, 4, 5, 6]

数组遍历(each)

for、for...of...、forEach

const list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];

for (let i = 0, len = list.length; i < len; i++) {
  if (list[i] === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(list[i]);
}

for (const item of list) {
  if (item === 5) {
    break; // 1 2 3 4
    // continue; // 1 2 3 4 6 7 8 undefined 10 11
  }
  console.log(item);
}

list.forEach((item, index, arr) => {
  if (item === 5) return;
  console.log(index); // 0 1 2 3 5 6 7 9 10
  console.log(item); // 1 2 3 4 6 7 8  10 11
});

三者都是基本的由左到右遍历数组

  • forEach 无法跳出循环;for 和 for ..of 可以使用 break 或者 continue 跳过或中断。
  • for ...of 直接访问的是实际元素。for 遍历数组索引,forEach 回调函数参数更丰富,元素、索引、原数组都可以获取。
  • for ...of 与 for 如果数组中存在空元素,同样会执行。

补充 forEach中执行异步任务

  • forEach中执行异步任务,不会等待异步任务完成,这个时候可以用 for ..of替代。

数组转换(map)

将一个对象数组的某个属性以逗号拼接起来:重点map可以遍历数组,而且不改变原始数组数据,可以通过map返回一个经过修饰的新数组

比如输入[{"a":1},{"a":2},{"a":3},{"a":4},{"a":5}]返回1,2,3,4,5

function getFileCode(array){
  let result = null;
  if(array && array.length>0){
      result = array.map((item,index)=>{
          return item.fileCode;
      }).join(",");
  }
  return result;
}

数组过滤(filter)

可以过滤数组中指定的元素

const list = [
{ name: '头部导航', type: 'nav', id: 1 },,
{ name: '轮播', type: 'content', id: 2 },
{ name: '页脚', type: 'nav', id: 3 },
];
const resultList = list.filter(item => {
  console.log(item);
  return item.type === 'nav';
});
// resultList: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

const newList = list.map(item => {
  console.log(item);
  return item.id;
});
// newList: [1, empty, 2, 3]

// list: [
//   { name: '头部导航', type: 'nav', id: 1 },
//   empty,
//   { name: '轮播', type: 'content', id: 2 },
//   { name: '页脚', type: 'nav', id: 3 },
// ]

数组查询(find)

  • find 方法返回数组中满足 callback 函数的第一个元素的值。如果不存在返回undefined。
  • findIndex 它返回数组中找到的元素的索引,而不是其值,如果不存在返回 -1。
const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.find((item) => item.id === 3);
// result: { name: '页脚', id: 3 }
result.name = '底部导航';
// list: [
//   { name: '头部导航', id: 1 },
//   { name: '轮播', id: 2 },
//   { name: '底部导航', id: 3 },
// ]

const index = list.findIndex((item) => item.id === 3);
// index: 2
list[index].name // '底部导航';

数组判断(some)

some函数如果有一个元素存在则返回true

const list = [
{ name: '头部导航', id: 1 },
{ name: '轮播', id: 2 },
{ name: '页脚', id: 3 },
];
const result = list.some((item) => item.id === 3);
//result = true/false

相关文章

车辆收费管理系统(车辆收费管理格式表)

今天来了解《#车辆收费管理系统》,它包括如下功能:车辆档案表格界面,车辆档案录入信息窗口,设置交费年份表格界面,车辆交费表信息窗口,本月交费表格界面,车辆预交费用表格界面,车辆预交费录入信息窗口,本次...

linux发行版-openSUSE Agama 15安装程序发布:带来多项可用性升级

openSUSE旗下仍在开发中的全新Linux安装工具Agama,于近日推出v15版本,带来了界面增强、实用新功能等一系列改进,为用户带来更顺畅的系统安装体验!界面优化:细节之处见用心新版本在本地化设...

Ubuntu 24.10发行版登场:Linux 6.11内核、GNOME 47桌面环境

IT之家 10 月 11 日消息,Canonical 昨日发布新闻稿,正式推出代号为 Oracular Oriole 的 Ubuntu 24.10 发行版。新版在内核方面升级到最新 6.11 版本,并...

崩溃!3 道 React 面试必卡题,吃透稳过金九银十

凌晨三点还在对着 “React 组件为什么重复渲染” 抓耳挠腮?别慌!今天挑出 3 道让 90% 候选人卡壳的高频题,全是大厂面试官挖的 “坑”,手把手教你见招拆招,看完直接装进面试 “弹药库”!先问...

Vue3,父组件子组件传值,provide(提供)和inject(注入)传值

父组件向子组件传值父子组件传递数据时,通常使用的是props和emit,父向子传递使用props,子向父传递使用emit。子组件接收3种方式// 1、简单接收 props:["title...

面试官:聊聊你知道的Vue与React的区别

最近面到很多大公司的时候,小编都会碰到一个很尴尬的问题,很多大公司的技术栈都是React,但是小编学的是Vue,其实从本质上来说两者都是比较优秀的前端框架,所以有些面试官会问到Vue和React的区别...