iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >JavaScript数组常用工具函数怎么使用
  • 100
分享到

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

2023-07-02 13:07:24 100人浏览 薄情痞子
摘要

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

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

一. 实现Array.isArray

if (!Array.isArray){  Array.isArray = function(arg){    return Object.prototype.toString.call(arg) === '[object Array]';  };}

二. 将类数组转换为数组

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

// 1. sliceArray.prototype.slice.call(arguments)// 2. concat[].concat.apply([], arguments)

2. es6的方式转换

// 1. ...扩展运算符[...arguments]// 2. Array.from()Array.from(arguments)

三. 判断是否为数组

var a = [];// 1.基于instanceofa instanceof Array;// 2.基于constructora.constructor === Array;// 3.基于Object.prototype.isPrototypeOfArray.prototype.isPrototypeOf(a);// 4.基于getPrototypeOfObject.getPrototypeOf(a) === Array.prototype;// 5.基于Object.prototype.toStrinGobject.prototype.toString.call(a) === '[object Array]';// 6. 通过Array.isArrayArray.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)// evalvar 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数组常用工具函数怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: JavaScript数组常用工具函数怎么使用

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript数组常用工具函数怎么使用
    这篇文章主要讲解了“JavaScript数组常用工具函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript数组常用工具函数怎么使用”吧!一. 实现Array.isAr...
    99+
    2023-07-02
  • 一文掌握JavaScript数组常用工具函数总结
    目录一. 实现Array.isArray二. 将类数组转换为数组1. 借用数组的方法进行转换2. es6的方式转换三. 判断是否为数组四. 数组方法实现1.forEach2. fil...
    99+
    2022-11-13
  • JavaScript常用的工具函数分享
    目录格式化时间戳时间格式化 几分钟前 几小时前url参数转为对象对象序列化【对象转url参数】本地存储cookie操作数字格式化单位数字千位过滤过滤成版本号首字母大写class 操作...
    99+
    2022-11-13
  • vscode工具函数idGenerator怎么使用
    这篇文章主要介绍“vscode工具函数idGenerator怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vscode工具函数idGenerator怎么使用”文章能帮助大家解决问题。vsco...
    99+
    2023-07-05
  • Node.js path模块中的常用工具函数怎么使用
    这篇“Node.js path模块中的常用工具函数怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一...
    99+
    2022-10-19
  • JavaScript组合函数怎么使用
    这篇文章主要讲解了“JavaScript组合函数怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript组合函数怎么使用”吧!如果没有组合函数 compose,函数连续调用...
    99+
    2023-07-02
  • JavaScript数组操作函数怎么使用
    这篇文章主要介绍“JavaScript数组操作函数怎么使用”,在日常操作中,相信很多人在JavaScript数组操作函数怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • JavaScript工厂函数怎么用
    本文小编为大家详细介绍“JavaScript工厂函数怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript工厂函数怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2022-10-19
  • Vue中util工具函数怎么用
    这篇文章将为大家详细讲解有关Vue中util工具函数怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,...
    99+
    2022-10-19
  • JavaScript中实用工具函数有哪些
    这篇文章主要讲解了“JavaScript中实用工具函数有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中实用工具函数有哪些”吧! ...
    99+
    2022-10-19
  • jQuery中的AJAX工具函数怎么用
    本文小编为大家详细介绍“jQuery中的AJAX工具函数怎么用”,内容详细,步骤清晰,细节处理妥当,希望这篇“jQuery中的AJAX工具函数怎么用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起...
    99+
    2022-10-19
  • JavaScript前端实用的工具函数封装
    目录1.webpack里面配置自动注册组件2.自定义指令图片懒加载3.图片文件转base64格式(实现预览)4.数组转为tree型结构(递归实现)5.递归深拷贝6.将数组里面的对象转...
    99+
    2022-11-13
  • Java中Arrays数组工具类怎么用
    小编给大家分享一下Java中Arrays数组工具类怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法一览表方法名简要描述asList()返回由指定数组支持的...
    99+
    2023-06-25
  • vscode工具函数Symbol如何使用
    这篇文章主要介绍“vscode工具函数Symbol如何使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vscode工具函数Symbol如何使用”文章能帮助大家解决问题。什么是Symbol?符号(S...
    99+
    2023-07-05
  • vscode工具函数once如何使用
    这篇文章主要介绍“vscode工具函数once如何使用”,在日常操作中,相信很多人在vscode工具函数once如何使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vscode工具函数once如何使用”的疑...
    99+
    2023-07-05
  • Vue项目中常用的工具函数总结
    目录前言一、自定义聚焦指令1、方式一2、方式二3、方式三二、输入框防抖1、需求2、思路3、代码实现三、关键字高亮1、需求2、思路3、代码演示四、格式化Excel表格中存储的时间1、需...
    99+
    2022-11-12
  • JavaScript中的50+个实用工具函数小结
    JavaScript可以做很多出色的事情,本篇文章给大家整理50+个实用工具函数,可以帮助你提高工作效率并可以帮助调试代码 1、isStatic: 检测数据是不是除了symbol外...
    99+
    2022-11-12
  • CTF_Web:php伪随机数mt_rand()函数+php_mt_seed工具使用
    CTF_Web:php伪随机数mt_rand函数漏洞 0x00 问题描述0x01 mt_rand函数0x02 CTF例题0x03 php_mt_seed...
    99+
    2023-10-02
    web web安全 php
  • 聊聊Node.js path模块中的常用工具函数
    本篇文章带大家聊聊Node中的path模块,介绍一下path的常见使用场景、执行机制,以及常用工具函数,希望对大家有所帮助!在开发过程中,会经常用到 Node.js  ,它利用 V8 提供的能力,拓展了 JS 的能力。而在 Nod...
    99+
    2022-06-09
    path Node 执行机制
  • 前端开发的常用工具函数有哪些
    这篇文章主要讲解了“前端开发的常用工具函数有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“前端开发的常用工具函数有哪些”吧!1、时间格式化等方法推荐使用 moment.js 的库文件2、...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作