数组方法的总结
数组方法总结
// ==============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; }) 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遍历器对象 这个以后在讨论
作者：LY_Glimmer
链接：https://juejin.cn/post/7021027993057230855