最新公告
  • 欢迎您访问爱上源码网,分享精品整站源码,网站模板,游戏源码,APP小程序源码以及视频教程免费下载;服务永无止境!立即加入我们
  • JavaScript开发中 15 种常见的数组操作

    作者:Dmitri Pavlutin

    译者:前端小智

    来源:dmitripavlutin.com

    点赞再看,养成习惯

    本文 GitHub https://github.com/qq44924588… 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

    数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法,如array. forEach()array.map()等来操作数组。

    在实战中,我经常对数组可能的操作和相应采用哪个更好的方法不知所措,所以本文就列出 15 种常用数据方法,让咱们重温加强记忆一下。

    1. 数组的遍历

    1.1 for..of 循环

    for(const item of items)循环遍历数组项,如下所示遍历colors列表:

    const colors = ['blue', 'green', 'white'];
    
    for (const color of colors) {
      console.log(color);
    }
    // 'blue'
    // 'green'
    // 'white'

    提示:

    咱们可以随时使用break语句停止遍历。

    1.2 for 循环

    for(let i; i < array.length; i++)循环使用递增的索引变量遍历数组项。

    for通常需要在每个循环中递增index 变量

    const colors = ['blue', 'green', 'white'];
    
    for (let index = 0; index < colors.length; index++) {
      const color = colors[index];
      console.log(color);
    }
    // 'blue'
    // 'green'
    // 'white'

    index变量从0递增到colors.length-1。此变量用于按以下索引访问项:colors [index]

    提示

    咱们可以随时使用break语句停止遍历。

    1.3 array.forEach() 方法

    array.forEach(callback)方法通过在每个数组项上调用callback函数来遍历数组项。

    在每次遍历中,都使用以下参数调用callback(item [, index [, array]]):当前遍历项,当前遍历索引和数组本身。

    const colors = ['blue', 'green', 'white'];
    
    colors.forEach(function callback(value, index) {
      console.log(value, index);
    });
    // 'blue', 0
    // 'green', 1
    // 'white', 2

    提示:

    咱们不能中断array.forEach()迭代。

    2. 数组的映射

    2.1 Array.map()方法

    array.map(callback) 方法通过在每个数组项上使用callback调用结果来创建一个新数组。

    在每个遍历中的callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身,并应该返回新项。

    如下所示咱们对每个数组元素都递增 1

    const numbers = [0, 2, 4];
    
    const newNumbers = numbers.map(function increment(number) {
      return number + 1;
    });
    
    newNumbers; // => [1, 3, 5]

    提示:

    array.map()创建一个新的映射数组,而不改变原始数组。

    2.2 Array.from()方法

    Array.from(arrayLike[, callback])方法通过在每个数组项上使用callback 调用结果来创建一个新数组。

    在每个遍历中callback(item[, index[, array]])使用参数调用:当前项、索引和数组本身并且应该返回新项。

    如下所示咱们对每个数组元素都递增 1

    const numbers = [0, 2, 4];
    
    const newNumbers = Array.from(numbers,
      function increment(number) {
        return number + 1;
      }
    );
    
    newNumbers; // => [1, 3, 5]

    提示:

    • Array.from()创建一个新的映射数组,而不改变原始数组。
    • Array.from()更适合从类似数组的对象进行映射。

    3. 数据的简化

    3.1 Array.reduce() 方法

    array.reduce(callback[, initialValue])通过调用callback 函数来将数组简化为一个值。

    在每次遍历中的callback(accumulator, item[, index[, array]])使用用参数调用的:累加器,当前项,索引和数组本身且应该返回累加器。

    经典示例是对数字数组求和:

    const numbers = [2, 0, 4];
    
    function summarize(accumulator, number) {
      return accumulator + number;
    }
    
    const sum = numbers.reduce(summarize, 0);
    
    sum; // => 6

    第一步,将accumulator 初始化为0。然后,对每个累加数字和的数组项调用summary函数。

    提示:

    如果没有使用 initialValue 来设置初始值,则默认使用数组的第一个元素作为初始值。

    4. 数据的连接

    4.1 array.concat() 方法

    array.concat(array1[, array2, ...])将一个或多个数组连接到原始数组。如下所示,连接两个数组:

    const heroes = ['小智', '前端小智'];
    const villains = ['老王', '小三'];
    
    const everyone = heroes.concat(villains);
    
    everyone // ["小智", "前端小智", "老王", "小三"]

    提示:

    • concat()创建一个新的数组,而不改变原来的数组
    • array.concat(array1 [,array2,...]) 接受多个要连接的数组。

    4.2 展开操作符号

    咱们将展开操作符与数组字面量一起使用来连接数组:[...array1, ...array2]

    const heroes = ['小智', '前端小智'];
    const villains = ['老王', '小三'];
    
    const names = [...heroes, ...villains];
    
    names; // ["小智", "前端小智", "老王", "小三"]

    提示:

    [...arr1, ...arr2, ...arrN]:咱们可以使用展开运算符连接所需数量的数组。

    获取数组的片段

    5.1 array.slice() 方法

    array.slice([fromIndex [,toIndex]])返回数组的一个片段,该片段从fromIndex开始,以toIndex结尾(不包括toIndex本身)。fromIndex可选参数默认为0toIndex可选参数默认为array.length

    const names = ["小智", "前端小智", "老王", "小三"]
    
    const heroes = names.slice(0, 2)
    const villains = names.splice(2)
    
    heroes // ["小智", "前端小智"]
    villains // ["老王", "小三"]

    提示:

    array.slice() 创建一个新数组,而不改变原始数组。

    6. 数组的拷贝

    6.1 展开操作符

    拷贝数组的一种简单方法是使用展开运算符:const clone = [... array],如下所示,拷贝 colors 数组:

    const colors = ['white', 'black', 'gray'];
    
    const clone = [...colors];
    
    clone; // => ['white', 'black', 'gray']
    colors === clone; // => false

    提示:

    [...array] 创建一个浅拷贝。

    6.2 array.concat()方法

    [].concat(array)是另一种拷贝数组的方法。

    const colors = ['white', 'black', 'gray'];
    
    const clone = [].concat(colors);
    
    clone; // => ['white', 'black', 'gray']
    colors === clone; // => false

    提示:

    [].concat(array) 创建一个浅拷贝。

    6.3 array.slice() 方法

    array.slice())是另一种拷贝数组的方法。

    const colors = ['white', 'black', 'gray'];
    
    const clone = colors.slice();
    
    clone; // => ['white', 'black', 'gray']
    colors === clone; // => false

    提示:

    colors.slice() 创建一个浅拷贝。

    7. 查找数组

    7.1 array.includes() 方法

    array.includes(itemToSearch [,fromIndex])返回一个布尔值,array 是否包含itemToSearch。 可选参数fromIndex,默认为0,表示开始搜索的索引。如下所示:判断299是否存在于一组数字中:

    const numbers = [1, 2, 3, 4, 5];
    
    numbers.includes(2);  // => true
    numbers.includes(99); // => false

    7.2 array.find() 方法

    array.find(predicate) 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

    如下所示,找到数组中的第一个偶数:

    const numbers = [1, 2, 3, 4, 5];
    
    function isEven(number) {
      return number % 2 === 0;
    }
    
    const evenNumber = numbers.find(isEven);
    
    evenNumber; // => 2

    7.3 array.indexOf() 方法

    array.indexOf(itemToSearch[, fromIndex]) 返回array中第一个出现的itemToSearch的索引。默认为0的可选参数fromIndex表示开始搜索的索引。

    如下所示,找到前端小智的索引:

    const names = ["小智", "前端小智", "老王", "小三"]
    
    const index = names.indexOf('前端小智')
    
    index // 1

    提示:

    • 如果找不到该项,则array.indexOf(itemToSearch)返回-1
    • array.findIndex(predicate)是使用predicate函数查找索引的替代方法。

    8. 查询数组

    8.1 array.every() 方法

    如果每个项都通过predicate 检查,则array.every(predicate)返回true

    在每个遍历predicate(item[, index[, array]])上,用参数调用predicate 函数:当前遍历项、索引和数组本身。

    如下所示,确定数组是否只包含偶数:

    const evens = [0, 2, 4, 6];
    const numbers = [0, 1, 4, 6];
    
    function isEven(number) {
      return number % 2 === 0;
    }
    
    evens.every(isEven); // => true
    numbers.every(isEven); // => false

    8.2 array.some() 方法

    如果每个项只要一下通过predicate 检查,则array.every(predicate)返回true

    在每个遍历predicate(item[, index[, array]])上,用参数调用predicate 函数:当前遍历项、索引和数组本身。

    如下所示:确定数组是否至少包含一个偶数:

    const numbers = [1, 5, 7, 10];
    const odds = [1, 3, 3, 3];
    
    function isEven(number) {
      return number % 2 === 0;
    }
    
    numbers.some(isEven); // => true
    odds.some(isEven);   // => false

    9. 数组的过滤

    9.1 array.filter() 方法

    array.filter(predicate)方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

    在每个遍历predicate(item[, index[, array]])上,用参数调用predicate 函数:当前遍历项、索引和数组本身。

    如下所示:将一个数组过滤为仅包含偶数:

    const numbers = [1, 5, 7, 10];
    
    function isEven(number) {
      return number % 2 === 0;
    }
    
    const evens = numbers.filter(isEven);
    
    evens; // => [10]

    提示:

    array.filter() 创建一个新数组,而不改变原始数组。

    10. 数组的插入

    10.1 array.push() 方法

    array.push(item1 [...,itemN]) 方法将一个或多个项追加到数组的末尾,并返回新的长度。

    如下所示,在names 数组的末尾添加 '小智'

    const names = ['小智']
    
    names.push('前端小智')
    
    names // ["小智", "前端小智"]

    提示:

    • array.push() 会改变原数组
    • array.push(item1, item2, ..., itemN) 可以添加多个元素。

    10.2 array.unshift() 方法

    array.unshift(item1[..., itemN])方法将一个或多个项追加到数组的开头,返回数组的新长度

    const names = ['小智']
    
    names.unshift('前端小智')
    
    names // ["前端小智", "小智"]

    提示:

    • array.unshift() 会改变原数组
    • array.unshift(item1, item2, ..., itemN) 可以添加多个元素。

    10.3 展开操作符

    可以通过组合展开操作符和数组字面量以不可变的方式在数组中插入项。

    在数组末尾追加一个项:

    const names = ['小智', '大治']
    
    const names2 = [...names, '王大冶']
    
    names2 // ["小智", "大治", "王大冶"]

    在数组的开头追加一个项:

    const names = ['小智', '大治']
    
    const names2 = [
      '王大冶',
      ...names
    ]
    
    names2 // ["王大冶", "小智", "大治"]

    在任何索引处插入元素:

    const names = ['小智', '大治']
    const indexToInsert = 1
    
    const names2 = [
      ...names.slice(0, indexToInsert),
      '前端小智',
      ...names.slice(indexToInsert)
    ]
    
    names2  // ["小智", "前端小智", "大治"]

    11. 删除数组元素

    11.1 array.pop() 方法

    array.pop()方法从数组中删除最后一个元素,然后返回该元素。如下所示,删除colors数组的最后一个元素:

    const colors = ['blue', 'green', 'black'];
    
    const lastColor = colors.pop();
    
    lastColor; // => 'black'
    colors; // => ['blue', 'green']

    提示:

    array.pop() 会改变原数组。

    11.2 array.shift() 方法

    array.shift()方法从数组中删除第一个元素,然后返回该元素。

    const colors = ['blue', 'green', 'black'];
    
    const firstColor = colors.shift();
    
    firstColor; // => 'blue'
    colors; // => ['green', 'black']

    提示:

    • array.shift() 会改变原数组。
    • array.shift()有O(n)复杂度。

    11.3 array.splice() 方法

    array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素,并插入新的元素。

    例如,咱们从索引1处删除2个元素:

    const names = ['张三', '李四', '王五', '赵六']
    
    names.splice(1, 2)
    
    names // => ["张三", "赵六"]

    names.splice(1,2)删除元素'张三''赵六'

    names.splice() 可以插入新元素,而不是插入已删除的元素。 咱们可以替换索引1处开始的的2个元素,然后插入一个新的元素 '小智'

    const names = ['张三', '李四', '王五', '赵六']
    
    names.splice(1, 2, '小智')
    
    names //  ["张三", "小智", "赵六"]

    提示:

    • array.splice() 会改变原数组。

    11.4 展开操作符号

    可以通过组合展开操作符和数据字面量以不可变的方式从数组中删除项。

    const names = ['张三', '李四', '王五', '赵六']
    const fromIndex = 1
    const removeCount = 2
    
    const newNames = [
       ...names.slice(0, fromIndex),
       ...names.slice(fromIndex + removeCount)
    ]
    
    newNames // ["张三", "赵六"]

    12. 清空数组

    12.1 array.length属性

    array.length是保存数组长度的属性。 除此之外,array.length是可写的。

    如果咱们写一个小于当前长度的array.length = newLength,多余的元素从数组中移除。

    如下所示:使用array.length = 0删除数组中的所有项目:

    const colors = ['blue', 'green', 'black'];
    
    colors.length = 0;
    
    colors; // []

    12.2 array.splice() 方法

    array.splice(fromIndex[, removeCount[, item1[, item2[, ...]]]])从数组中删除元素,并插入新的元素。

    如果removeCount参数被省略,那么array.splice()将删除从fromIndex开始的数组的所有元素。咱们使用它来删除数组中的所有元素:

    const colors = ['blue', 'green', 'black'];
    
    colors.splice(0);
    
    colors; // []

    13. 填充数组

    13.1 array.fill() 方法

    array.fill(value[, fromIndex[, toIndex]])用从fromIndextoIndex的值填充数组(不包括toIndex本身)。fromIndex可选参数默认为0,toIndex可选参数默认为array.length

    例如,使用用零值填充数组:

    const numbers = [1, 2, 3, 4];
    
    numbers.fill(0);
    
    numbers; // => [0, 0, 0, 0]

    不仅如此,还可以使用Array(length).fill(initial)来初始化特定长度和初始值的数组。

    const length = 3;
    const zeros = Array(length).fill(0);
    
    zeros; // [0, 0, 0]

    提示:

    • array.splice() 会改变原数组。

    13.2 Array.from() 函数

    Array.from() 有助于初始化带有对象的特定长度的数组:

    const length = 4;
    const emptyObjects = Array.from(Array(length), function() {
      return {};
    });
    
    emptyObjects; // [{}, {}, {}, {}]

    14. 数组的扁平化

    14.1 array.flat()方法

    array.flat([depth])方法通过递归扁平属于数组的项直到一定深度来创建新数组。 depth可选参数默认为1

    const arrays = [0, [1, 3, 5], [2, 4, 6]];
    
    const flatArray = arrays.flat();
    
    flatArray; // [0, 1, 3, 5, 2, 4, 6]

    arrays 包含数字和数字数组的混合。 arrays.flat()对数组进行扁平,使其仅包含数字。

    提示:

    array.flat() 创建一个新数组,而不会改变原始数组。

    15. 数组的排序

    15.1 array.sort() 方法

    array.sort([compare])方法对数组的元素进行排序。

    可选参数compare(a, b)是一个自定义排序顺的回调函数。如果比较compare(a, b)返回的结果:

    • 如果 a小于b,在排序后的数组中a应该出现在b之前,就返回一个小于0的值。
    • 如果a等于b,就返回0
    • 如果a大于b,就返回一个大于0的值。

    如下所示,对数组 numbers 时行排序

    const numbers = [4, 3, 1, 2];
    
    numbers.sort();
    
    numbers; // => [1, 2, 3, 4]

    numbers.sort() 以升序对数字进行排序。

    使用比较函数,让偶数排在奇数前面:

    const numbers = [4, 3, 1, 2];
    
    function compare(n1, n2) {
      if (n1 % 2 === 0 && n2 % 2 !== 0) {
        return -1;
      }
      if (n1 % 2 !== 0 && n2 % 2 === 0) {
        return 1;
      }
      return 0;
    }
    
    numbers.sort(compare);
    
    numbers; // => [4, 2, 3, 1]

    提示:

    • array.sort() 会改变原数组。

    推荐教程:《JS教程

    以上就是JavaScript开发中 15 种常见的数组操作的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:javascript 前端 html vue.js
  • 本文转载于:segmentfault,如有侵犯,请联系916990011@qq.com删除
    • 上一篇:JavaScript开发中常用的方法集
    • 下一篇:三分钟了解Vue框架

    相关文章

    相关视频

    • 用JavaScript获取伪元素(Pseudo-E…
    • 现代JavaScript使用技巧之ES6中的简写语…
    • 一起看看JavaScript如何获取页面上被选中的…
    • JavaScript怎么检测当前浏览器是无头浏览器
    • JavaScript开发中 15 种常见的数组操作
    • JavaScript逻辑运算符
    • JavaScript中的条件语句
    • JavaScript 函数定义

    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
    本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~

    重要声明:
    1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负!
    2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理!给予奖励!
    3.本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!本站提供有偿服务!如有侵权请联系在线客服!
    4.如您手中有优质资源或教程,可以自助投稿发布,成功分享后有奖励和额外收入!
    5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理!
    6.400电话/软著/ICP,EDI许可证/商标特价办理中!
    爱上源码下载网 » JavaScript开发中 15 种常见的数组操作

    常见问题FAQ

    从网站下载的源码都有安装教程么?不会安装怎么办?
    本站发布的网站源码和模板资源大部分在压缩包内都有教程,如您不会安装可以联系本站在线技术进行付费安装。
    爱上源码的所有源码都是亲测能正常运行的么?
    本站目前拥有资源10w+,包含整站源码,网站模板,游戏源码,小程序源码,视频教程,破解软件等,每天也在测试更新;因时间和精力有限我们无法对资源进行一一测试,只能保证所分享资源内容无误,希望理解。
    我手中的优质资源可以在你这换钱或者VIP么?
    爱上源码支持投稿,欢迎发布您手中的优质资源进行售卖;本站VIP支持免费获取,目前邀请10人注册爱上源码即可免费获取VIP。
    爱上源码除了资源分享还有其他业务没?
    【价值30W+微擎模块出售正版商业微擎坑位及招收代理,详情咨询本站客服!】我们团队目前运营并推广几套商业化saas智能小程序系统能满足大部分小程序开发需求,并由SaaS和独立部署版商城小程序系统;另外销售400电话,各种ICP/EDI资质证书办理,软著和商标注册服务等。

    发表评论

    • 32会员总数(位)
    • 35644资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 666稳定运行(天)

    提供最优质的资源集合

    开通VIP 源码下载