一.纯函数
纯函数：1.不改变源数组(没有副作用)2.返回一个数组
concat map filter slice
1. concat() 字符串 合并传入的数组，返回一个新数组
const arr1 = [1, 2, 3, 4, 5, 6, 7]
const arr2 = [8, 9]
const res = arr1.concat(arr2)
console.log(res, 'res') // [1, 2, 3, 4, 5, 6, 7, 8, 9] 'res'
2. slice 字符串 截取数组，支持传入两个参数，第一个从0开始，第二个结束的位置（不包括此位置的元素）（可传可不传，不传就到结束）
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.slice(1)
console.log(arr1, arr, 'res') // [2, 3, 4, 5, 6, 7] [1, 2, 3, 4, 5, 6, 7] 'res'
const arr2 = arr.slice(2, 4)
console.log(arr2, arr, 'res') // [3, 4] [1, 2, 3, 4, 5, 6, 7] 'res'
const arr3 = arr.slice(-2)
console.log(arr3, arr, 'res') // [6, 7] [1, 2, 3, 4, 5, 6, 7] 'res'
const arr4 = arr.slice(-3, -1)
console.log(arr4, arr, 'res') // [5, 6] [1, 2, 3, 4, 5, 6, 7] 'res'
3. join()将数组拼接成字符串
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.join('')
console.log(arr1, arr, 'res') // 1234567 [1, 2, 3, 4, 5, 6, 7] res
4 indexOf() 字符串查找元素在数组中第一次出现时的索引，如果没有就返回-1
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.indexOf(4)
console.log(arr1, arr, 'res') // 3 [1, 2, 3, 4, 5, 6, 7] 'res'
5 lastIndexOf() 字符串查找元素在数组中最后一次出现时的索引，如果没有就返回-1
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.lastIndexOf(4)
console.log(arr1, arr, 'res') // 3 [1, 2, 3, 4, 5, 6, 7] 'res'
二、非函数
1.改变源数组 forEach some every reduce
1.unshif 和 push 向前和向后添加一个或多个元素到数组后尾，并返回这个数组的长度
const arr = [1, 2, 3, 4, 5, 6, 7]
arr.unshift(0)
console.log(arr.unshift(0)) // 长度
arr.push(8)
console.log(arr.push(8)) // 长度
console.log(arr) // [0, 1, 2, 3, 4, 5, 6, 7, 8]
2.shift 和 pop 删除数组最后一个元素，并返回这个元素
const arr = [1, 2, 3, 4, 5, 6, 7]
arr.shift()
console.log(arr.shift()) // 2
console.log(arr)
arr.pop()
console.log(arr.pop()) // 6
console.log(arr)
3. splice(x,n, ...) 从x位置开始截取，截取n个并返回被截取的元素，第三个参数是截取完了需要添加哪些元素，从x的位置开始添加
const arr = [1, 2, 3, 4, 5, 6, 7]
arr.splice(0, 2) // [1, 2]
arr.splice(0, 2, 8,9)
console.log(arr) // [8, 9, 3, 4, 5, 6, 7]
4. reverse()逆转数组的顺序
const arr = [1, 2, 3, 4, 5, 6, 7]
arr.reverse()
console.log(arr) // [7, 6, 5, 4, 3, 2, 1]
5. sort()数组排序，默认从小到大，可接受一个函数
const arr = [1, 2, 3, 4, 5, 6, 7]
arr.sort((a,b) => b - a)
console.log(arr) // [7, 6, 5, 4, 3, 2, 1]
三、数组遍历
1.forEach map filter every some reduce区别
`forEach` `map` `filter` `every` `some`参数：
函数第一个参数：数组项的值 必须
函数第二个参数：数组项的索引
函数第三个参数：数组对象本身
区别
some()、every()的返回值 ：true / false
filter()、map()的返回值 ：一个新数组
forEach()无返回值会改变源数组
const arr1 = arr.forEach((item, index) => arr[index] = item * 2)
const arr = [1, 2, 3, 4, 5, 6, 7]
const arr1 = arr.forEach(item => item * 2)
console.log(arr1, arr, 'forEach') // undefined [1, 2, 3, 4, 5, 6, 7] 'forEach'
const arr2 = arr.map(item => item * 3 )
console.log(arr2, arr, 'map') // [3, 6, 9, 12, 15, 18, 21] [1, 2, 3, 4, 5, 6, 7] 'map'
const arr3 = arr.filter(item => item > 3)
console.log(arr3, arr, 'filter') // [4, 5, 6, 7] [1, 2, 3, 4, 5, 6, 7] 'filter'
const arr4 = arr.every(item => item > 3)
console.log(arr4, arr, 'every') // false [1, 2, 3, 4, 5, 6, 7] 'every'
const arr5 = arr.some(item => item > 3)
console.log(arr5, arr, 'some') // true [1, 2, 3, 4, 5, 6, 7] 'some'
`reduce`
函数第一个参数：前一项的值
函数第二个参数：当前项的值
函数第三个参数：项的索引
函数第四个参数：数组对象
const arr6 = arr.reduce((prev, item) => prev + item )
console.log(arr6, arr, 'res') // 28 [1, 2, 3, 4, 5, 6, 7] 'res'
2.了解forEach、for in、for of三者区别吗？
一.forEach是数组的方法
1.便利的时候更加简洁，效率和for循环相同，不用关系集合下标的问题，减少了出错的概率
2.没有返回值
3.不能使用break中断循环,不能使用return返回到外层函数
二.for in用于循环遍历数组或对象属性(大部分用于对象)、得到对象的key或数组、字符串的下标
三.for of一个数据结构只有部署了Symbol.iterator属性，就被视为具有iterator接口，
就可以用for of循环遍历它的成员，
可用for of遍历的成员包括:数组，Set和Map结构，类数组对象
得到对象的value或数组、字符串的值
一、普通数组去重
const array = [1,2,3,4,6,4,3,2,1]
1. filter indexOf lastIndexOf 数组会反转
function unique(array){
if(!Array.isArray(array)) return false
return array.filter((item, index) => {
return array.indexOf(item) === index
})
}
2.indexOf includes
function unique(array){
const arr = []; //一个新的临时数组
const len = array.length
for(let i = 0; i < len; i++){
if(arr.indexOf(array[i]) === -1){ // !arr.includes(array[i])
arr.push(array[i]);
}
}
return arr;
}
3.数组下标法
function unique(array) {
if(!Array.isArray(array)) return false
const arr = []
const len = array.length
for (let i = 0; i < len; i++) {
if (array.indexOf(array[i]) === i) {
arr.push(array[i])
}
}
return arr
}
4.相邻元素排序 先排序
function unique(array){
if(!Array.isArray(array)) return false
array = array.sort((a, b) => a - b)
const arr = []
const len = array.length
for (let i = 0; i < len; i++) {
if (array[i] !== array[i - 1]) {
arr.push(array[i])
}
}
return arr
}
5.Set 解构赋值
function unique(array) {
if(!Array.isArray(array)) return false
return [...new Set(array)]
}
6. Set Array.from
function unique(array){
if(!Array.isArray(array)) return false
return Array.from(new Set(array))
}
7.类数组和数组区别
1.类数组拥有length属性和索引，是object；
2.类数组不具有数组所具有的方法；
3.例如内置对象arguments、DOM方法返回的结果都是类数组；
类数组转换数组
1.Array.prototype.slice.call(arguments)
2.[...arguments]
3.Array.from(new Set(arguments))
二、数组对象去重
const array = [{name: 'xiaolin', age:20},{ name:'xiaolin', age:20}, { name:'tom', age:21}]
1.临时对象缓存数组项 key 值
function unique(array,key) {
if(!Array.isArray(array)) return false
const result = []
const obj = {}
const len = array.length
for (let i = 0; i < len; i++) {
if (!obj[array[i][key]]) {
result.push(array[i])
obj[array[i][key]] = true
}
}
return result
}
2.reduce
function unique(array, key) {
if(!Array.isArray(array)) return false
var obj = {}
return array.reduce((prve, current) => {
obj[current[key]] ? "" : obj[current[key]] = true && prve.push(current)
return prve
},[])
}
三、数组扁平化的N种实现方案
const array = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10 ];
1.ES6方法直接实现 flat(Infinity)
function flatten(arr){
return arr.flat(Infinity)
}
2. 用 while 循环加扩展运算符
function flatten(array) {
while(array.some(Array.isArray)) {
array = [].concat(...array)
}
return array
}
3.ES5转换为字符串 toString()转换字符串 split(',')转发数组 parseFloat(item)去掉字符串
function flatten(array) {
return array.toString().split(',').map(item => parseFloat(item))
}
4.reduce函数
function flatten(array) {
return array.reduce(function(prev, current) {
return prev.concat(Array.isArray(current) ? flatten(current) : current)
},[])
}
