一文掌握JavaScript数组常用工具函数总结

一文掌握JavaScript数组常用工具函数总结

目录

一. 实现Array.isArray

二. 将类数组转换为数组

1. 借用数组的方法进行转换

2. es6的方式转换

三. 判断是否为数组

四. 数组方法实现

1.forEach

2. filter

3. every

4. some

5. findIndex

6. Reduce

五. 实现数组扁平化

1. 普通递归+concat

2. reduce+concat

3. while+concat

4. toString+split

5. flat

6. 正则

六. 去重

1. 利用 ES6 语法(扩展运算符)

2. 利用 forEach() + 对象容器

3. 利用 forEach 和 indexOf

4. 利用 filter + indexOf

5. 利用 forEach 和 includes (本质同3)

6. 利用 sort

7. 双层for循环

七. 排序

1. 冒泡排序

2. 选择排序

3. 原生排序

4. 快速排序

5. 插入排序

八. 最大值与最小值

1. 假设法

2. math.max() + 假设法

3. reduce

4. 排序

5. 利用Math.max

九. 平均值

十. 数组乱序

十一. 将数组扁平化并去除其中重复数据,最终得到一个升序且不重复的数

一. 实现Array.isArray if (!Array.isArray){ Array.isArray = function(arg){ return Object.prototype.toString.call(arg) === '[object Array]'; }; } 二. 将类数组转换为数组 1. 借用数组的方法进行转换 // 1. slice Array.prototype.slice.call(arguments) // 2. concat [].concat.apply([], arguments) 2. es6的方式转换 // 1. ...扩展运算符 [...arguments] // 2. Array.from() Array.from(arguments) 三. 判断是否为数组 var a = []; // 1.基于instanceof a instanceof Array; // 2.基于constructor a.constructor === Array; // 3.基于Object.prototype.isPrototypeOf Array.prototype.isPrototypeOf(a); // 4.基于getPrototypeOf Object.getPrototypeOf(a) === Array.prototype; // 5.基于Object.prototype.toString Object.prototype.toString.call(a) === '[object Array]'; // 6. 通过Array.isArray Array.isArray(a) 四. 数组方法实现 1.forEach Array.prototype.myForEach = function(fn, context = window){ let len = this.length for(let i = 0; i < len; i++){ typeof fn === 'function' && fn.call(context, this[i], i) } } 2. filter Array.prototype.myFilter = function(fn, context = window){ let len = this.length, result = [] for(let i = 0; i < len; i++){ if(fn.call(context, this[i], i, this)){ result.push(this[i]) } } return result } 3. every Array.prototype.myEvery = function(fn, context){ let result = true, len = this.length for(let i = 0; i < len; i++){ result = fn.call(context, this[i], i, this) if(!result){ break } } return result } 4. some Array.prototype.mySome = function(fn, context){ let result = false, len = this.length for(let i = 0; i < len; i++){ result = fn.call(context, this[i], i, this) if(result){ break } } return result } 5. findIndex Array.prototype.myFindIndex = function (callback) { for (let i = 0; i < this.length; i++) { if (callback(this[i], i)) { return i } } } 6. Reduce Array.prototype.myReduce = function (fn, initialValue) { let arr = Array.prototype.call(this) let res, startIndex res = initialValue ? initialValue : arr[0] startIndex = initialValue ? 0 : 1 for (let i = startIndex; i < arr.length; i++) { res = fn.call(null, res, arr[i], i, this) } return res } 五. 实现数组扁平化 let ary = [1, [2, [3, 4, 5]]] 1. 普通递归+concat const flatten = function(ary){ let result = [] for(let i = 0;i<ary.length;i++){ if(Array.isArray(ary[i])){ result = result.concat(flatten(ary[i])) } else { result.push(ary[i]) } } return result } 2. reduce+concat const flatten = function(ary){ return ary.reduce((prev, next)=>{ return prev.concat(Array.isArray(next) ? flatten(next) : next) }, []) } 3. while+concat const flatten = function(ary){ while(ary.some(item=>Array.isArray(item))){ ary = [].concat(...ary) } return ary } 4. toString+split const flatten = function(ary){ return ary.toString().split(',') } 5. flat const flatten = function(ary){ return ary.flat(Infinity) } 6. 正则 const flatten6 = function(ary){ let str = JSON.stringify(ary) str = str.replace(/([|])/g, '') return JSON.parse(`[${str}]`) } 六. 去重 1. 利用 ES6 语法(扩展运算符) const unique1 = (array) => { // return Array.from(new Set(array)) return [...new Set(array)] } 2. 利用 forEach() + 对象容器 const unique2 = (array) => { const arr = [] const obj = {} array.forEach(item => { if (!obj.hasOwnProperty(item)) { obj[item] = true arr.push(item) } }) return arr } 3. 利用 forEach 和 indexOf const unique3 = (array) => { const arr = [] array.forEach(item => { if (arr.indexOf(item) === -1) { arr.push(item) } }) return arr } 4. 利用 filter + indexOf const unique4 = (array) => { return array.filter((item,index) => { return array.indexOf(item) === index; }) } 5. 利用 forEach 和 includes (本质同3) const unique6 = (array) => { let result = []; array.forEach(item => { if(!result.includes(item)){ result.push(item); } }) return result; } 6. 利用 sort const unique6 = (array) => { let result = array.sort(function (a,b) { return a - b; }); for(let i = 0;i < result.length;i ++){ if(result[i] === result[i+1]){ result.splice(i + 1,1); i --; } } return result; } 7. 双层for循环 function unique(array) { // res用来存储结果 var res = []; for (var i = 0, arrayLen = array.length; i < arrayLen; i++) { for (var j = 0, resLen = res.length; j < resLen; j++ ) { if (array[i] === res[j]) { break; } } // 如果array[i]是唯一的,那么执行完循环,j等于resLen if (j === resLen) { res.push(array[i]) } } return res; } console.log(unique(array)); // [1, "1"] 七. 排序 1. 冒泡排序

原理:利用数组的前一项与相邻的后一项相比较,判断大/小,交换位置

const bubbleSort = function(ary){ for(let i = 0; i < ary.length - 1; i++){ for(let j = 0; j < ary.length - 1 - i; j++){ if(ary[j] > ary[j+1]){ [ary[j], ary[j+1]] = [ary[j+1], ary[j]] } } } return ary } 2. 选择排序

原理:利用数组的某项与后面所有的值相比较,判断大/小,交换位置

const bubbleSort = function(ary){ for(let i = 0; i < ary.length - 1; i++){ for(let j = i + 1; j < ary.length; j++){ if(ary[i] > ary[j]){ [ary[i], ary[j]] = [ary[j], ary[i]] } } } return ary } 3. 原生排序 Array.sort((a, b)=>a-b) 4. 快速排序

原理:取数组的中间值作为基准,判断左右两边的值大或小,添加到相应数组,递归调用,然后将所有的值拼接在一起。

const quick_sort = function(ary){ if(ary.length < 1){ return ary } let centerIndex = Math.floor(ary.length/2) let centerVal = ary.splice(centerIndex, 1)[0] let left = [] let right = [] ary.forEach(item => { item > centerVal ? right.push(item) : left.push(item) }) return [...quick_sort(left), ...[centerVal], ...quick_sort(right)] } 5. 插入排序

原理:先将数组中的一项添加到新数组中,循环数组每一项与新数组中比较,比较大的值放在后面小的放到新数组的前面。

const insertion_sort = function(ary){ let newAry = ary.splice(0, 1) for(let i = 0; i < ary.length; i++){ let cur = ary[i] for(let j = newAry.length - 1; j >= 0;){ if(cur < newAry[j]){ j-- j === -1 && newAry.unshift(cur) } else { newAry.splice(j + 1, 0, cur) j = -1 } } } return [...newAry] } 八. 最大值与最小值 1. 假设法 const maxMin = function(ary){ let [min, max] = [ary[0], ary[1]] ary.forEach(ele => { min > ele ? min = ele : null max < ele ? max = ele : null }) return [min, max] } 2. math.max() + 假设法 var arr = [6, 4, 1, 8, 2, 11, 23]; var result = arr[0]; for (var i = 1; i < arr.length; i++) { result = Math.max(result, arr[i]); } console.log(result); 3. reduce var arr = [6, 4, 1, 8, 2, 11, 23]; function max(prev, next) { return Math.max(prev, next); } console.log(arr.reduce(max)); 4. 排序 var arr = [6, 4, 1, 8, 2, 11, 23]; arr.sort(function(a,b){return a - b;}); console.log(arr[arr.length - 1]) 5. 利用Math.max Math.max.apply(null, ary) // 扩展运算符 Math.max(...arr) // eval var max = eval("Math.max(" + arr + ")"); 九. 平均值 const balance = function(ary){ ary.sort((a, b) => a - b) ary.shift() ary.pop() let num = 0 ary.forEach(item => { num += item }) return (num/ary.length).toFixed(2) } 十. 数组乱序 function shuffle(a) { var j, x, i; for (i = a.length; i; i--) { j = Math.floor(Math.random() * i); x = a[i - 1]; a[i - 1] = a[j]; a[j] = x; } return a; } 十一. 将数组扁平化并去除其中重复数据,最终得到一个升序且不重复的数 let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10]; Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>{ return a-b})

到此这篇关于一文掌握JavaScript数组常用工具函数总结的文章就介绍到这了,更多相关JS数组工具内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个

    电脑表格转换为图表|表格转换成图表

    电脑表格转换为图表|表格转换成图表,,表格转换成图表1、选择A列,在“插入”选项下的“数据透视表”中,将数据透视字段拖曳到“行”和“值”

    iPad看电影不用担心视频转换器帮你

    iPad看电影不用担心视频转换器帮你,,谁说iPad电影只能依赖WiFi网络,谁认为苹果iPad电影通过限制来源作为电影迷的一个好工具,iPad看电影自然