数组的方法
- 数组拥有自己的方法,数组也是对象的一种
创建数组的方法
除手动写外,可使用方法
- 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));//访问最后一个元素
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);
技巧:使用sort时创建数组副本的方法:使用链式函数
const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;
总结
课程:数组总结
小练习笔记
- 在js创建一个新html元素:使用模板字符串
- 在某一元素内插入这个新html元素:使用
insertAdjacentHTML
方法(参考mdn文档) - 元素的
innerHTML
方法:返回该元素的内容,可对其进行赋值 e.preventDefault();
防止表单提交后刷新- 获取表单值
inputLoginUsername.value
- 使用可选链接防止未定义的对象报错
currentAccount?.pin
- 使用模糊方法使按钮或输入框失去焦点:
inputLoginPin.blur();
- 对于输入框中的数据,均为string型,若要与数字比对,记得使用类型转换
- 清除输入框内容:仅需将其值
.value
设置为空字符串