返回顶部
首页 > 资讯 > 前端开发 > JavaScript >一文掌握JavaScript数组常用工具函数总结
  • 144
分享到

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

2024-04-02 19:04:59 144人浏览 薄情痞子
摘要

目录一. 实现Array.isArray二. 将类数组转换为数组1. 借用数组的方法进行转换2. es6的方式转换三. 判断是否为数组四. 数组方法实现1.forEach2. fil

一. 实现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数组工具内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 一文掌握JavaScript数组常用工具函数总结

本文链接: https://lsjlt.com/news/152536.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 一文掌握JavaScript数组常用工具函数总结
    目录一. 实现Array.isArray二. 将类数组转换为数组1. 借用数组的方法进行转换2. es6的方式转换三. 判断是否为数组四. 数组方法实现1.forEach2. fil...
    99+
    2024-04-02
  • 一文带你掌握axios工具函数
    目录前言源码阅读kindOfisBufferisArrayBufferViewisPlainObjectisFormDatatrimfindKeymergestripBOMendsW...
    99+
    2022-12-15
    axios 工具函数 axios 函数
  • JavaScript数组常用工具函数怎么使用
    这篇文章主要讲解了“JavaScript数组常用工具函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript数组常用工具函数怎么使用”吧!一. 实现Array.isAr...
    99+
    2023-07-02
  • 掌握 golang 函数分析工具
    go 函数分析工具对于理解和优化 go 程序至关重要。pprof:用于分析函数的 cpu 使用情况和内存分配。go tool trace:允许可视化分析函数的调用关系和执行时间。go-f...
    99+
    2024-05-06
    golang 函数分析 git
  • Vue项目中常用的工具函数总结
    目录前言一、自定义聚焦指令1、方式一2、方式二3、方式三二、输入框防抖1、需求2、思路3、代码实现三、关键字高亮1、需求2、思路3、代码演示四、格式化Excel表格中存储的时间1、需...
    99+
    2024-04-02
  • JavaScript数组Array的一些常用方法总结
    目录一.JavaScript中创建数组的方式二、数组方法概括三、方法详解1.join()2.pop()3.shift()4.push()5.unshift()6.concat...
    99+
    2024-04-02
  • 一文带你掌握JavaScript中的箭头函数
    在JavaScript中,箭头函数是一种简化的函数语法,它在ES6(ECMAScript 2015)引入。箭头函数的语法比传统的function表达式更简洁,同时还有一些特性,例如继...
    99+
    2023-05-19
    JavaScript箭头函数 JavaScript箭头函数使用 JS箭头函数
  • JavaScript常用的工具函数分享
    目录格式化时间戳时间格式化 几分钟前 几小时前url参数转为对象对象序列化【对象转url参数】本地存储cookie操作数字格式化单位数字千位过滤过滤成版本号首字母大写class 操作...
    99+
    2024-04-02
  • JavaScript数组 几个常用方法总结
    目录1、前言2、filter()3、map()4、sort()5、reduce()6、forEach()7、方法列表8、本文参考1、前言 数组方法有太多了,本文记录一些本人容易记错的...
    99+
    2024-04-02
  • MySQL 常用函数总结
    前言: MySQL数据库中提供了很丰富的函数,比如我们常用的聚合函数,日期及字符串处理函数等。SELECT语句及其条件表达式都可以使用这些函数,函数可以帮助用户更加方便的处理表中的数据,使MySQL数据库的...
    99+
    2022-05-16
    mysql 函数 mysql 常用函数
  • JavaScript操作数组的常用方法总结
    我们在日常开发过程中,使用到原生 JavaScript的时候,有时候会频繁的对数组进行操作,今天我把工作以来,经常用到的有关 JavaScript数组的方法总结一...
    99+
    2024-04-02
  • PHP数组函数用法总结
    这篇文章主要讲解了“PHP数组函数用法总结”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP数组函数用法总结”吧!PHP数组函数是核心的一部分。无需安装即可使用这些函数函数名称描述arra...
    99+
    2023-06-04
  • 数组常用方法总结
    数组常用方法总结 一.获取数组长度1.1 使用length 二.数组转字符串2.1 Arrays是什么2.2 使用toString() 三. 数组拷贝3.1 使用 copyOf()3.2 copyOfRange() 四....
    99+
    2023-08-30
    java 排序算法 开发语言
  • JavaScript中常见的高阶函数总结
    目录前言map函数reduce函数filter函数sortevery方法find方法findIndex方法foreach方法总结前言 一个函数可以接受另一个函数作为参数,就把这个函数...
    99+
    2024-04-02
  • Mysql常用函数小总结
    Mysql数据库提供了大量的函数,学会使用将会事半功倍,以下分别为字符串函数,数值函数,时间和日期函数,系统函数 (一)字符串函数  CONCAT(s1,s2,...) 返回连接参数产生的字符串,一个或多个待拼接的内容...
    99+
    2019-09-24
    Mysql常用函数小总结
  • JavaScript数组常用方法实例讲解总结
    目录数组常用方法concat() 方法join() 方法pop() 方法push() 方法reverse() 方法shift() 方法slice() 方法sort...
    99+
    2024-04-02
  • JavaScript中常用的数组操作方法总结
    目录前言数组基础遍历方法forfor offor in数组的基础操作方法push:尾部追加元素pop:尾部移出元素unshift:头部追加元素shift:头部移出元素splice:删...
    99+
    2024-04-02
  • JavaScript中的50+个实用工具函数小结
    JavaScript可以做很多出色的事情,本篇文章给大家整理50+个实用工具函数,可以帮助你提高工作效率并可以帮助调试代码 1、isStatic: 检测数据是不是除了symbol外...
    99+
    2024-04-02
  • 常用oracle数据库函数总结
    wm_concat的基本语法    select proj_id,max(scale_valus) as scale_valus  &n...
    99+
    2024-04-02
  • PHP常用的文件操作函数总结
    目录1 :basename()2 :copy()3 :dirname()4 :disk_free_space()5 :disk_total_space()6 :f...
    99+
    2022-11-13
    PHP文件操作函数 PHP文件操作
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作