JavaScript中一些有关数组的API
一、length
let arr = [1, 2, 3, 4, 5, 6, 7]
1. 获取数组的长度
console.log(arr.length) // 7
2. 通过下标修改值
arr[0] = 4; console.log(arr) // [4, 2, 3, 4, 5, 6, 7]
3. 通过length修改数组长度
arr.length = 2 console.log(arr) // [4, 2]
4. 清空数组
arr.length = 0 console.log(arr) // []
5. 增加length的长度
arr.length = 10 console.log(arr) // [1, 2, 3, 4, 5, 6, 7, empty × 3]
二、添加删除数组的API
1. push(); 往数组后面添加数据，( )写要新增的数据
let arr = [1, 2, 3] arr.push(4) console.log(arr) // [1, 2, 3, 4]
2. pop(); 删除数组的最后一个数据，( )里面不需要写任何内容，一次只能删一个，删除多个重复写
let arr = [1, 2, 3] arr.pop(); console.log(arr) // [1, 2]
3. unshift(); 往数组前面添加数据
let arr = [1, 2, 3] arr.unshfit(4); console.log(arr) // [4, 1, 2, 3]
4. shift(); 删除数组的第一个数据
let arr = [1, 2, 3] arr.shift() console.log(arr) // [2, 3]
5. splice(); 方法向/从数组中添加/删除项目，然后返回被删除的项目。 注释：该方法会改变原始数组
- splice(index,howmany,item1,.....,itemX)
- index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
- howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
- item1, ..., itemX 可选。向数组添加的新项目。
let arr = [1, 2, 3]
arr.splice(1, 1, 4) // 删除下表为1 删除1个 替换为 4
console.log(arr) // [1, 4, 3]
arr.splice(1, 0, 5) // 在下标为1 的地方新增5
console.log(arr) // [1, 5, 4, 3]
6. slice(); 从已有的数组中返回选定的元素
- arrayObject.slice(start,end)
- start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
- end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规 定的是从数组尾部开始算起的元素。
说明：该方法并不会修改原始数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
let arr = [1, 2, 3, 4, 5] let arr1 = arr.slice(1, 2) // 返回元素为arr数组中下标为2的元素的新数组 let arr2 = arr.slice(-2) // 从数组尾部获取两个元素 返回新的数组 console.log(arr1) // [2] 返回新的数组 console.log(arr2) // [4, 5] console.log(arr) // [1, 2, 3, 4, 5] 不会改变原始数组
三、数组的遍历（判断、查找、筛选）、调序、分合
1. 判断是否为数组
let arr = [1, 2, 3, 4] let flag = Array.isArray(arr) console.log(flag) // true
2. Array.from() 从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例
let str = "ananiah" let strArr = Array.from(str) // 将字符串转化为数组 console.log(strArr) // ['a', 'n', 'a', 'n', 'i', 'a', 'h']
3. concat(), split() 数组的分合
let arr = [1, 2, 3, 4] let arr1 = arr.join('-') console.log(arr1) // "1-2-3-4" let arr4 = arr1.split("-") console.log(arr4) // ["1", "2", "3", "4"] let arr2 = [5, 6, 7] let arr3 = arr.concat(arr2) console.log(arr3) // [1, 2, 3, 4, 5, 6, 7]
4. reverse() sort() 数据的调序 注意：sort()会改变原始数组
let arr = [1, 2, 3, 4] let arr1 = arr.reverse() // 反转数组顺序 console.log(arr1) //[4, 3, 2, 1] let arr2 = arr1.sort() 排序 console.log(arr2) // [1, 2, 3, 4] // sort() 升序 arr.sort(function(a,b){return a-b}); // [1, 2, 3, 4] // sort() 降序 arr.sort(function(a,b){return b-a}); // [4, 3, 2, 1]
5. 遍历
let arr = [1, 2, 3, 4] // map arr.map((item, i) => console.log(item, i)) // every,some,includes 判断 是否有满足条件的元素，返回boolean值 /** * every() 方法用于检测数组所有元素是否都符合指定条件 * 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余* 的元素不会再进行检测。 * 如果所有元素都满足条件，则返回 true。 */ let a = arr.every(x=>x>3); // false /** * some() 方法用于检测数组中的元素是否满足指定条件 * 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检* 测。 * 如果没有满足条件的元素，则返回false */ let a = arr.some(x=>x>3); // true /** * includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 * * true，否则false * */ let a = arr.includes(2) // true // filter 筛选 返回满足条件的所有元素组成的一个新数组 let a = arr.filter(x=> x > 3) // [4] // find 查找 返回通过满足条件的第一个元素的值 let a = arr.find(x=> x > 3); // 4 // indexOf 查找，该方法既可操作数组，也可操作字符串 //返回-1时代表没有此项; 返回非负数时 代表当前元素(或元素首位)在原数组(或原字符串)中所处的位数 let a = arr.indexOf(2); // 1 if(a > -1) { // do something }
会改变原数组的： reverse, sort, splice
不会改变原数组的: slice, indexOf, join, concat, every, some,includes, filter, find, fill, reduce, forEach,map
四、数组的扁平化 将一个多维数组变为一个一维数组
1. 使用flat()
const arr = [1, 2, 3, [4, [5, 6, [7, 8]]],9]; // 方法一 使用flat() console.log(arr.flat(Infinity)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
2. 正则
let arr1 = JSON.stringify(arr).replace(/\[|\]/g, '').split(',')
console.log(arr1) // ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
// 改良
let arr2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g, '') + ']')
console.log(arr2) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
3. 使用reduce
const arr3 = arr => { return arr.reduce((pre, cur) => { return pre.concat(Array.isArray(cur) ? arr3(cur) : cur) }, []) }
console.log(arr3(arr)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
4. 函数递归
const arr4 = [] const Fn = arr => { for(let i = 0; i < arr.length; i++){ if(Array.isArray(arr[i])){ Fn(arr[i]) }else{ arr4.push(arr[i]) } } } Fn(arr) console.log(arr4) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
五、数组去重
1. 利用Set
// 数组去重 const numArr = [1, 2, 1, 3, 4, 4, false, true, false, 'true', {}, {}, []] // 使用数组的Set方法 console.log(Array.from(new Set(numArr))) // [1, 2, 3, 4, false, true, "true", {…}, {…}, Array(0)]
2. 两层for循环+splice
// 两层for循环+splice const unique1 = arr => { let len = arr.length; for (let i = 0; i < len; i++) { for (let j = i + 1; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1); // 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能 len--; j--; } } } return arr; } console.log(unique1(numArr)) // [1, 2, 3, 4, false, true, "true", {…}, {…}, Array(0)]
3. 利用indexOf
const unique2 = arr => { const res = []; for (let i = 0; i < arr.length; i++) { if (res.indexOf(arr[i]) === -1) res.push(arr[i]); } return res; }
4. 利用include
const unique3 = arr => { const res = []; for (let i = 0; i < arr.length; i++) { if (!res.includes(arr[i])) res.push(arr[i]); } return res; }
5. 利用filter
const unique4 = arr => { return arr.filter((item, index) => { return arr.indexOf(item) === index; }); }
6. 利用Map
const unique5 = arr => { const map = new Map(); const res = []; for (let i = 0; i < arr.length; i++) { if (!map.has(arr[i])) { map.set(arr[i], true) res.push(arr[i]); } } return res; }
六、类数组转化为数组
类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。
1. Array.from
Array.from(document.querySelectorAll('div'))
2. Array.prototype.slice.call()
Array.prototype.slice.call(document.querySelectorAll('div'))
3. 扩展运算符
[...document.querySelectorAll('div')]
4. 利用concat
Array.prototype.concat.apply([], document.querySelectorAll('div'));
参考大佬博客： https://juejin.cn/post/6875152247714480136#heading-13
