数组常用API
增/改:
- push 将元素追加到数组末尾 unshit 反之
- splice(起始位置,删除数量,新元素)
删:
- splice(起始位置,删除数量)
- pop 删除数组的最后一个元素 shift 删除数组的首元素
查:
- filter 方法创建一个新数组,其中包含通过指定测试条件的所有元素。如果没有任何元素满足条件,返回一个空数组。
- find 返回符合条件的第一个元素
- findIndex 返回符合条件的第一个元素的索引
- indexOf 返回给定元素在数组中第一次出现的下标,不存在返回-1
迭代方法
reduce常用于
嵌套数组或对象:例如多维数组、包含对象的数组等。
混合数组和对象:数组中包含对象,或者对象内嵌套数组。
需要复杂条件和聚合的数据:例如对数据进行分组、筛选、排序等。
使用 reduce 来按订单的状态聚合每种状态下的总金额
还想计算每个状态下的订单数量,可以稍微修改一下 reduce 的逻辑
使用 reduce 统计每个部门的员工数量
判断是否是数组
- Array.isArray(arr)
- Object.prototype.toString.call(arr) === '[Object Array]'
- arr instanceof Array
- array.constructor === Array
["1", "2", "3"].map(parseInt) 答案是多少
- [1, NaN, NaN]因为 parseInt 需要两个参数 (val, radix),其中radix 表示解析时用的基数。
- map传了 3个(element, index, array),对应的 radix 不合法导致解析失败。
map与forEach的区别
- forEach方法,是最基本的方法,就是遍历与循环,默认有3个传参:分别是遍历的数组内容item、数组索引index、和当前遍历数组Array
- map方法,基本用法与forEach一致,但是不同的,它会返回一个新的数组,所以在callback需要有return值,如果没有,会返回undefined
- 这里的 forEach回调中两个参数分别为 value,index
- forEach 无法遍历对象
- forEach 无法使用 break,continue 跳出循环,且使用 return 是跳过本次循环
- 总结:forEach 和 map 的对比
| 功能 | forEach | map |
|---|---|---|
| 修改原数组 | ✔ 修改原数组 | ✖ 不修改原数组 |
| 返回新数组 | ✖ 需要手动创建和管理新数组 | ✔ 返回新数组 |
| 链式调用 | ✖ 不支持链式调用 | ✔ 支持链式调用 |
| 适用场景 | 单纯遍历数组,执行副作用 | 数据处理和转换,生成新数组 |
-
单纯遍历: 不对数组结构进行修改,仅对每个元素进行操作。
-
副作用: 操作超出了函数作用域本身,影响了外部变量、对象、DOM 或其他外部系统。
-
建议:
尽量使用
map或filter等函数式方法来实现新数组的生成和数据操作,而不是用forEach,除非你的需求明确需要直接修改原数组或执行其他副作用操作。forEach主要用于执行副作用操作,因为它不会返回新数组,也不适合链式调用,而是用来对数组中的每个元素执行某些外部操作。
数组去重方法总结
1、如果是简单数据类型 [...new Set(arr)]
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
2、利用indexOf去重:新建一个空的结果数组,for 循环原数组,判断结果数组是否存在当前元素,如果有相同的值则跳过,不相同则push进数组
function unique(arr) {
if (!Array.isArray(arr)) {
console.log('type error!')
return
}
var array = [];
for (var i = 0; i < arr.length; i++) {
if (array .indexOf(arr[i]) === -1) {
array .push(arr[i])
}
}
return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
// [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重
3、在方法二的基础上,将indexOf改成includes也OK。看看当前元素有没有在结果数组中
4、利用Map数据结构去重:
创建一个空Map数据结构,遍历需要去重的数组,
把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果
function arrayNonRepeatfy(arr) {
let map = new Map();
let array = new Array(); // 数组用于返回结果
for (let i = 0; i < arr.length; i++) {
if(map .has(arr[i])) { // 如果有该key值
map .set(arr[i], true);
} else {
map .set(arr[i], false); // 如果没有该key值
array .push(arr[i]);
}
}
return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]
Array.slice() 与 Array.splice() 的区别
slice
“读取”数组指定的元素,不会对原数组进行修改
- 语法:arr.slice(start, end)
- start 指定选取开始位置(含)
- end 指定选取结束位置(不含)
splice
- “操作”数组指定的元素,会修改原数组,返回被删除的元素
- 语法:arr.splice(index, count, [insert Elements])
- index 是操作的起始位置
- count = 0 插入元素,count > 0 删除元素
- [insert Elements] 向数组新插入的元素