温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript数组常用工具函数怎么使用

发布时间:2022-06-24 15:54:49 来源:亿速云 阅读:161 作者:iii 栏目:开发技术

这篇文章主要讲解了“JavaScript数组常用工具函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript数组常用工具函数怎么使用”吧!

一. 实现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数组常用工具函数怎么使用”的内容了,经过本文的学习后,相信大家对JavaScript数组常用工具函数怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI