#yyds干货盘点# JavaScript 高级应用 第一弹（上）_数组

Author：Gorit

Date：2021年12月9日


一、数组篇

目标：讲解一下开发中不常见，但是很好用的 API

1.1 展开表达式

展开数组的每一项，返回一个新数组

let arr = [1,2,3];
console.log(...arr); // [1, 2 ,3]
// 用来数组拷贝
let res = [...arr];
res.push(4);
res //  [1,2,3,4]
arr //  [1,2,3

​​MDN 展开语法​​

1.2 返回一个新数组

除了数值的 for 循环，forEach 循环，还有哪些好用的循环处理方案

1.2.1 map

使用 map，对每一项元素进行特定操作，然后返回操作后的新数组eg： 

let arr = [1, 2, 3];
let res = arr.map(item => item + 1);
res   // [2,3,4

1.2.2 filter

根据条件筛选出符合条件的元素，并返回一个新数组eg: 

let arr [1,2,3,4,5,6];
// 获取数组中的偶数
let res = arr.filter(item => item % 2 === 0);
res   // [2,4,6]

1.2.3 concat

合并两个或者多个数组, 不改变原数组

concat()
concat(value0)
concat(value0, value1)
concat(value0, value1, ... , valueN
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"

实际应用

本地定义一个数，再从其他的地方加载一个数据，两个数据处理后，合并

1.3 索引相关问题

  1. indexOf() || lastIndexOf() （不存在，返回 -1）
  2. find() // 查找具体的元素，并且返回第一个符合条件的元素, 没找到返回 undefined


const array1 = [5, 12, 8, 130, 44];
   
const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12


  1. findIndex() // 查找第一个符合条件的元素的下标，没找到返回 -1


const array1 = [5, 12, 8, 130, 44];
   
const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3


  1. at() // Node.js 不支持


let arr = [1,2,3];
   
// 获取最后一个元素

arr.at(-1) 等价于 arr[arr.length - 1];

1.4 返回 boolean 值

  1. every() // 测试所有元素是否符合条件


let arr = [1,2,3,4,5];
   
let isLargerThan = (num) => num > 0;

function testEachElement (arr) {
  return arr.every(isLargerThan);
}

console.log(testEachElement(arr));  // 所有元素都大于 0，所以为true
  1. some() // 测试，只要有元素通过即可


let arr = [1,2,3,4,5];
   
let isLargerThan1 = (num) => num > 4;

function testSomeElement (arr) {
  return arr.some(isLargerThan1);
}

console.log(testSomeElement(arr));  // 有一个元素大于 4，所以为 true
  1. includes[] // 条件筛选，一般用于 消除多重 if 操作

includes 的值是否都包含于 数组 arr 中 


let arr = [1,2,3];
   
   // 加载网络数据，将拿到的列表数据比对是否存在与预先定义好的数组
   const {data : res} = await getData("/xxx/xxx");
   
   {
       "code": 200,
       "msg": "SUCCESS",
       "data": {
           xx: xx,
           list: [2,3]
       }
   }
   
   // 循环判断返回的设置是否和前端定义的相等
   if (res.data.list[0] = arr[1] || res.data.list[1]) {
      // 执行你的业务逻辑...
   }

1.5 返回一个最终结果

reduce

这个内置的函数比较特殊，他是通过回调处理每一个值，每次处理都会保存上次处理的结果，继续与下一个元素继续处理

实现对一个数字的连续操作实现一个累加器 

let res = 0;
for (const item of [1,2,3,4,5]) {
  res+=item;
}
console.log(res)

使用 reduce 实现相同的功能

let arr = [1,2,3,4,5];
// 实现一个累加器
const reducer = (preVal, curVal) => preVal + curVal;
console.log(arr.reduce(reducer));
/**
 * preVal + curVal (curVal) 是从数组下标开始的 （preVal） 是从上一次处理的结果开始的
  第一次执行，由于没有赋初始值，所以就 preVal 从 0 开始
  0 + 1 => 1
  第二次，继续使用第一次的结果
  1 + 2 = 3
  3 + 3 = 6;
  6 + 4 = 10;
  10 + 5 = 15;
<strong>/
console.log(arr.reduce(reducer, 6));
/</strong>
 * 有初始值了
 * 6 + 1 = 7
 * 7 + 2 = 9
 * 9 + 3 = 12
 * 12 + 4 = 16
 * 16 + 5 = 21
**

1.6 参考资料

​​MDN Array​​

1.7 原文链接

​​《Gorit 带你学全栈 — JavaScript 高级应用（第一弹）》​​

二、彩蛋

粉丝福利：限时！！！

  1. 不定期分享一些知识技能
  2. 前沿技术分享
  3. 个人学习总结

#yyds干货盘点# JavaScript 高级应用 第一弹（上）_web开发_02