数组方法总结
// ==============Tips================
let arr = ['LY', 'DHN', 'ZHY', 'CTY', 'MJJ'];
// // 有时候这样打印不直观
console.log(arr); // ["LY", "DHN", "ZHY", "CTY", "MJJ"]
// 可以用这个 会打印一个表格哦
console.table(arr);
1. push() 数组后面压入元素
/**
* 1. push() 数组后面压入元素
* 可以压入多个哦
* 返回值为数组的长度
* 影响原数组
* */
let arr = [1, 2, 3, 4];
let result = arr.push(5, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(result); // 6
2.pop() 数组后面移出元素
/**
* 2.pop() 数组后面移出元素
* 不接受参数
* 返回值为移除的元素
* 影响原数组
* */
let arr = [1, 2, 3, 4];
let result = arr.pop()
console.log(arr); // [1, 2, 3]
console.log(result); // 4
3.unshift() 数组前面压入元素
/**
* 3.unshift() 数组前面压入元素
* 可以压入多个哦
* 返回值为数组长度
* 影响原数组
* */
let arr = [1, 2, 3, 4];
let result = arr.unshift(-1, 0)
console.log(arr); // [-1, 0, 1, 2, 3, 4]
console.log(result); // 6
4.shift() 数组前面移出元素
/**
* 4.shift() 数组前面移出元素
* 不接受参数
* 返回值为移除的元素
* 影响原数组
* */
let arr = [1, 2, 3, 4];
let result = arr.shift()
console.log(arr); // [2, 3, 4]
console.log(result); // 1
5.splice() 集移除与添加的功能的缝合怪
/**
* 5.splice() 集移除与添加的功能的缝合怪
* 参数1：开始截取的位置
* 参数2：截取到什么地方 不包括当前位
* 参数3+n：之后的参数是要添加什么
* 返回值为截取的数组
* 改变原数组
* */
let arr = [1, 2, 3, 4];
// 解释一下 从索引0开始截取 截取2位 然后伤口处添加 521 520
let result = arr.splice(0, 2, 521, 520);
console.log(arr);
6.concat() 合并数组
/**
* 6.concat() 合并数组
* 参数为要合并的数组 可以合并多个哦
* 不影响原数组
* 返回值为合并后的新数组 总是返回一个新数组
* 注意：可以以值为参数
* */
let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8, 9];
let result = arr1.concat(arr2);
console.log(arr1); // [1, 2, 3, 4]
console.log(arr2); // [5, 6, 7, 8, 9]
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
7.slice() 裁剪数组
/**
* 7.slice() 裁剪数组
* 类似与 splice 区别不改变原数组
* 参数1：开始截取的位置
* 参数2：截取到什么位置
* 返回截取的元素
* 不改变原数组
* */
let arr = [1, 2, 3, 4];
let result = arr.slice(0, 2)
console.log(arr); // [1, 2, 3, 4]
console.log(result); // [1, 2]
8.reverse() 反转数组
let arr = ['你', '是', '我', '年', '少', '的', '欢', '喜'];
let result = arr.reverse()
console.log(arr); // ["喜", "欢", "的", "少", "年", "我", "是", "你"]
console.log(result); // ["喜", "欢", "的", "少", "年", "我", "是", "你"]
console.log(result === arr); // true
9.sort() 数组排序
/**
* 9.sort() 数组排序
* 假如没有传递对比函数==>里面的元素会调用自己原型上的 toString()变成字符串然后对比ASCII码
* 参数接收一个排序函数
* 参数1:下一个要对比的值
* 参数2:上一次对比的值
* 改变原数组
* 返回值为原数组
* */
let arr = [4, 2, 1, 5, 3, 6, 9, 8, 7];
let result = arr.sort((a, b) => {
// console.log(a, b);
// 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
// 若 a 等于 b，则返回 0。
// 若 a 大于 b，则返回一个大于 0 的值。
// 一句话 当返回一个大于0的值的时候就交换位置
return a - b // 升序 降序反过来咯
})
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(result); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr === result); // true
10.indexOf() 查找元素在数组中的位置 从前往后
/**
* 10.indexOf() 查找元素在数组中的位置 从前往后
* 找到了返回下标
* 找不到返回-1
* 接收第二个参数 开始查找的位置 并且可以写负值 从后面往前面数索引 然后从该位置往后找
* 注意：和找对象一样 只找一个
* */
let arr = [1, 2, 3, 4];
let result1 = arr.indexOf(3);
let result2 = arr.indexOf(521);
let result3 = arr.indexOf(3, 3);
console.log(result1); // 2
console.log(result2); // -1
console.log(result3); // -1
11.lastIndexOf() 查找元素在数组中的位置 从后往前
/**
* 11.lastIndexOf() 查找元素在数组中的位置 从后往前
* 找到了返回下标
* 找不到返回-1
* 接收第二个参数 开始查找的位置 并且可以写负值 从后面往前面数索引 然后从该位置往前找
* 注意：和找对象一样 只找一个
* */
let arr = [1, 2, 3, 4];
let result1 = arr.lastIndexOf(3);
let result2 = arr.lastIndexOf(521);
let result3 = arr.lastIndexOf(3, -2); // 从3开始往前面找3发现自己就是 数组从后开始没有 索引0这一说
console.log(result1); // 2
console.log(result2); // -1
console.log(result3); // 2
12.includes() 查找数组中有没有该元素
/**
* ES6+
* 12.includes() 查找数组中有没有该元素
* 返回值为布尔值 找到了为true 找不到为false
* */
let arr = [1, 2, 3, 4];
let result1 = arr.includes(3)
let result2 = arr.includes(521)
console.log(result1); // true
console.log(result2); // false
13.find() 查找数组有没有符合条件的元素
/**
* ES6+
* 13.find() 查找数组有没有符合条件的元素
* 就近返回 找到了就不找了
* 找到了返回该元素
* */
let arr = [1, 2, 3, 4];
let result = arr.find((item, index, arr) => {
// console.log(item); // 数组中的每一个元素
// console.log(index); // 数组元素索引
// console.log(arr); // 数组本身
return item > 1
})
console.log(result); // 2
14.findIndex() 查找又没有满足条件的元素
/**
* ES6+
* 14.findIndex() 查找又没有满足条件的元素
* 就近返回 找到了就不找了
* 返回该元素在数组的下标
* */
let arr = [1, 2, 3, 4];
let result = arr.findIndex((item, index, arr) => {
// // console.log(item); // 数组中的每一个元素
// // console.log(index); // 数组元素索引
// // console.log(arr); // 数组本身
return item > 1
})
console.log(result); // 1
15.flat() 拉平数组 其实就是把多维数组变成一维数组 降维打击
/**
* ES6+
* 15.flat() 拉平数组 其实就是把多维数组变成一维数组 降维打击
* 返回值为拉平后的新数组
* 默认拉平2维数组
* 可以传递参数拉平三维数组
* */
let arr = [[1, 2], [3, 4, [5]]];
let result1 = arr.flat();
// 可以发现默认参数为2可以拉平二维数组
console.log(result1); // [1, 2, 3, 4,[5]]
// 拉平一个三维数组要传递参数为3 简单记忆拉平多少维度就传什么
let result2 = arr.flat(3);
console.log(result2); // [1, 2, 3, 4, 5]
16.fill() 填充一个数组
/**
* 16.fill() 填充一个数组
* 用什么填满数组 用爱啊
* 返回原数组
* 改变原数组
* */
let arr = [1, 2, 3, 4];
let result = arr.fill('LOVE U');
console.log(arr); // ["LOVE U", "LOVE U", "LOVE U", "LOVE U"]
console.log(result); // ["LOVE U", "LOVE U", "LOVE U", "LOVE U"]
console.log(arr === result); true
17.Array.from() 去伪存真 把伪数组变成真数组
/**
* 17.Array.from() 去伪存真 把伪数组变成真数组
* */
let fakeArr = {
"0": "1",
"1": "2",
"2": "3",
"3": "4",
length: 4
}
let result = Array.from(fakeArr);
console.log(result); // ["1", "2", "3", "4"]
console.log(result instanceof Array); // true 变成真数组了
18.Array.of() 创建数组的方式 为了弥补 new Array()的不足
/**
* 18.Array.of() 创建数组的方式 为了弥补 new Array()的不足
*/
let arr = Array.of(521);
console.log(arr); // [521] 用new Array() 会出现一个长度为521的值为empty的数组
19.join() 把数组的元素以一个分割符连接成字符串
let arr = ['荣', '耀', '不', '是', '一', '个', '人', '的', '游', '戏'];
let result = arr.join('')
console.log(result); // 荣耀不是一个人的游戏
20.forEach() 简简单单的迭代 其实下面的迭代都可以基于forEach实现
/**
* 20.forEach() 简简单单的迭代 其实下面的迭代都可以基于forEach实现
* item 数组的每一项 ===>第一个参数
* index 数组每一项的下标===> 第二个参数
* arr 数组本身 ====> 第三个参数
* */
let arr = ['风', '花', '雪', '月'];
arr.forEach((item, index, arr) => {
// 1.简单的迭代
// 2.没有返回值 默认为undefined
// 3.return 打断不了迭代 或者说只可以打断一次循环
console.log(`${item}-----${index}-----${arr}`);
})
21.reduce() 汇总 进去一堆出一个结果
/**
* 21.reduce() 汇总 进去一堆出一个结果
* 这个是和其他的不一样的 这个接收4个参数
* total ---> 上一次运算的结果===>第一个参数 必须的！
* currentValue ---> 当前的值===>第二个参数 必须的！
* currentIndex ---> 当前值的下标 ===>第三个参数 可选的
* arr ---> 数组本身 ====>第四个参数 可选的
* 此函数的返回值是你处理之后得到的结果 所以叫汇总
* 可以通过第二个参数给它一个开始累加的初始值
* */
let arr = [1, 2, 3, 4];
let result1 = arr.reduce((total, currentValue, currentIndex, arr) => {
return total += currentValue;
},0)
console.log(result1) // 10
// 求数组和简化写法
let result2 = arr.reduce((a, b) => a + b);
console.log(result2) // 10
22.filter() 过滤
/**
* 22.filter() 过滤
* item 数组的每一项 ===>第一个参数
* index 数组每一项的下标===> 第二个参数
* arr 数组本身 ====> 第三个参数
* 返回值是一个新数组 其实就是满足条件的元素组成的一个❤的数组
* */
let arr = [90, 100, 60, 30, 20, 70, 80, 10];
let result1 = arr.filter((item, index, arr) => {
// 过滤掉小于60的数字
return item >= 60;
})
console.log(result1); // [90, 100, 60, 70, 80]
// 简写方式 // 过滤掉小于60的数字
let result2 = arr.filter(item => item >= 60);
console.log(result2); // [90, 100, 60, 70, 80]
23.map() 映射
/**
* 23.map() 映射
* 简单来说 map 和 forEach 是差不多的
* item 数组的每一项 ===>第一个参数
* index 数组每一项的下标===> 第二个参数
* arr 数组本身 ====> 第三个参数
* 区别：这个有返回值==>每一次迭代之后的返回值组成的❤数组
* */
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let result1 = arr.map((item, index, arr) => {
// 数组中每一个值加1之后的❤数组
return ++item;
})
console.log(result1); // [2, 3, 4, 5, 6, 7, 8, 9, 10]
// 简化写法
let result2 = arr.map(item => ++item);
24.every() 每一个都满足条件就返回true 只要有一个不满足条件就返回false1. push() 数组后面压入元素
let arr = [10, 20, 30, 40];
let result1 = arr.every((item, index, arr) => {
// 数组中的每一项都大于10吗？全部满足才返回true 而且这个方法会短路
return item >= 10;
})
console.log(result1); // 都满足条件所以是true
// ========================================================
let result2 = arr.every((item, index, arr) => {
console.log(1); // 可以发现只打印了一次1所以只要碰到一个不满足条件的直接返回false不继续迭代
// 数组中的每一项都大于20吗？全部满足才返回true 10就是不满足的所以直接返回false
return item >= 20;
})
console.log(result2); // 10就不满足条件了所以为false
// 简化写法
let result3 = arr.every(item => item >= 10);
console.log(result3); // true
25.some() 和 every() 相反
/**
* 25.some() 和 every() 相反
* item 数组的每一项 ===>第一个参数
* index 数组每一项的下标===> 第二个参数
* arr 数组本身 ====> 第三个参数
* 返回值是一个布尔值 只要有一个满足条件的就返回true 全部不满足条件才返回false
**/
let arr = [10, 20, 30, 520];
let result1 = arr.some((item, index, arr) => {
// 数组中有大于100的吗？520大于100所以为true
return item > 100;
})
console.log(result1); // true
// =================================================
let result2 = arr.some((item, index, arr) => {
// 数组中有大于1的吗？第一个值10就大于1所以到这里就结束迭代 找到满足条件的就停止迭代
// console.log(1); 只会打印一次
return item > 1;
})
console.log(result2); // true
// ==============================================
let result3 = arr.some((item, index, arr) => {
// 数组中有大于1000的吗？没有符合条件了所以返回false
return item > 1000;
})
console.log(result3); // false
// 简化写法
let result4 = arr.some(item => item > 10);
console.log(result4); // true
26.Array.isArray() 用于判断是不是Array类型 Yes or NO
/**
* ES6+
* 26.Array.isArray() 用于判断是不是Array类型 Yes or NO
* 返回布尔值
* 是Array就是true
* 不是Array就是false
* */
let arr = ['我是不是Array呀'];
let result1 = Array.isArray(arr);
let obj = { name: 'LY_Glimmer' };
let result2 = Array.isArray(obj);
console.log(result1);// true
console.log(result2); // false
// !!!!!!==> keys、values、entries，它们使用数组方式的话，返回的是Iterator遍历器对象 这个以后在讨论
