【JavaScript】数组进阶\小作业笔记

Faye_newTenant

于 2023-02-02 18:53:34 发布

阅读量110

点赞数

分类专栏：笔记 #js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_46069068/article/details/128785921

版权

笔记同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

#js

8 篇文章 0 订阅

订阅专栏

数组的方法

数组拥有自己的方法，数组也是对象的一种

创建数组的方法

除手动写外，可使用方法

fill方法：可以传入三个参数，第一个为填充的数字，第二个为开始位置（包含），第三个为结束位置（不包含）

// Emprty arrays + fill method
const x = new Array(7);//创建新空数组
console.log(x);
// console.log(x.map(() => 5));
x.fill(1, 3, 5);
x.fill(1);
console.log(x);

from方法
参数1：伪数组对象（拥有一个 length 属性和若干索引属性的任意对象）或一个可迭代对象（可以获取对象中的元素，如 Map 和 Set 等）
参数2：一个回调函数，实现类似map()的功能

const y = Array.from({ length: 7 }, () => 1);
console.log(y);

//回调函数参数：当前元素、索引、数组本身

const z = Array.from({ length: 7 }, (_, i) => i + 1);
console.log(z);

还可使用from方法将NodeList转换为数组

tip：创建随机数的方法

Math.trunc(value) 参数:该函数接受单个参数值，返回给定数字的整数部分。
Math.random() 可以生成大于等于0.0、小于1.0的double型随机数。
Math.trunc(Math.random() * 100));返回0-100之间的随机整数。

splice、slice

// Simple Array Methods
let arr = ['a', 'b', 'c', 'd', 'e'];

// SLICE
arr.slice(2);//切片 可接受两个参数，切片开头与结尾，创建浅拷贝
arr.splice(2); //直接在原数组进行删除，第一个参数为删除的开始位置，第二个参数为删除的长度
arr2.reverse()//在原数组进行逆转数组
const letters = arr.concat(arr2);//返回一个新数组，链接两数组
console.log([...arr, ...arr2]);//同样作用
letters.join(' - ')//生成一个字符串

//ES6新方法
arr.at(0)//访问位置0
//用途：
console.log(arr[arr.length - 1]);
console.log(arr.slice(-1)[0]);
console.log(arr.at(-1));//访问最后一个元素

MDN-Array参考

forEach

是一个高阶函数，需要传入一个回调函数：
每次迭代执行一次回调函数，回调函数可接受的参数为：
当前元素、当前位置、整个数组（按序传入）

与for-of所实现的功能相同

movements.forEach(function (mov, i, arr) {
  if (mov > 0) {
    console.log(`Movement ${i + 1}: You deposited ${mov}`);
  } else {
    console.log(`Movement ${i + 1}: You withdrew ${Math.abs(mov)}`);
  }

可应用于set与map：

map中参数：值、索引、整个map
set中参数：键值、键值（与第一个参数相同，仅为了与其他两种调用结构相同，可用下划线代替）、整个set

map、filter、reduce（重要方法）

将一个数组转换为新数组的方法

map
传入一个回调函数（可接受三个参数-见上foreach），返回一个新数组，其中每个元素用指定函数进行变换
与forEach的区别：forEach对数组每个元素进行操作，但是不会返回新数组，而map返回一个新数组

  ages.map(age => (age <= 2 ? 2 * age : 16 + age * 4))

filter
传入一个过滤条件函数，应返回布尔值，filter返回符合条件的元素的新数组

const withdrawals = movements.filter(mov => mov < 0);

reduce
对数组进行指定操作（如累加），返回一个元素
函数接收第一个参数为累加器（accumulator），后为当前元素、索引、整个数组
后要加累加器初值
巧用：累加器可自定义用途，如做最大值筛选等

// accumulator -> SNOWBALL
// const balance = movements.reduce(function (acc, cur, i, arr) {
//   console.log(`Iteration ${i}: ${acc}`);
//   return acc + cur;
// }, 0);
const balance = movements.reduce((acc, cur) => acc + cur, 0);
console.log(balance);


const max = movements.reduce((acc, mov) => {
  if (acc > mov) return acc;
  else return mov;
}, movements[0]);
console.log(max);

复杂用法
const { deposits, withdrawals } = accounts
  .flatMap(acc => acc.movements)
  .reduce(
    (sums, cur) => {
      // cur > 0 ? (sums.deposits += cur) : (sums.withdrawals += cur);
      sums[cur > 0 ? 'deposits' : 'withdrawals'] += cur;
      return sums;
    },
    { deposits: 0, withdrawals: 0 }
  );

find方法

传入一个回调函数，返回检索到符合条件的第一个元素

const firstWithdrawal = movements.find(mov => mov < 0);

用法：根据属性名，检索数组中的对象

indexof与findindex

findIndex可传入一个回调函数，返回一个索引，而indexof只能进行简单比对，但是使用起来比findIndex简单一些

some与every

some方法传入一个回调函数，与回调函数中的条件比对，若有符合条件的元素，返回一个boolean，与includes()类似，但includes只接受简单值，无法使用回调函数
every与some类似，但是仅在回调函数中的条件数组元素全部符合时才会返回true

flat与flatMap

flat默认将嵌套数组展开一层，传入一个数字，可控制展开的层数
flatMap传入一个回调函数，对数组元素按函数筛选出来，最后返回展开的数组，仅将数组展开一层（无法控制层数）

const arrDeep = [[[1, 2], 3], [4, [5, 6]], 7, 8];
console.log(arrDeep.flat(2));
///
const overalBalance2 = accounts
  .flatMap(acc => acc.movements)
  .reduce((acc, mov) => acc + mov, 0);
console.log(overalBalance2);

sort方法

可处理字符串元素和数字元素，可传入一个回调函数，两参数为数组中要比较的相邻两个元素a，b。直接作用于原数组。
返回一个负值，a在b前（位置不变），正值，b在a前（位置交换）。

// 升序
///法1
// movements.sort((a, b) => {
//   if (a > b) return 1;
//   if (a < b) return -1;
// });
///法2
movements.sort((a, b) => a - b);
console.log(movements);