专栏首页前端鼓励师前端工程师必须掌握的 JavaScript 数组方法

前端工程师必须掌握的 JavaScript 数组方法

在 JavaScript 中,数组是一个特殊的数据结构,可以用来存储不同类型的元素。作为我们开发人员使用最频繁的数据结构之一,本文介绍一些你可能不太了解但又必须掌握的数组内置方法,帮助你提升开发效率,快速完成数据处理。

concat()

此方法用于连接两个或多个数组,它不会改变现有的数组,返回的是多个数组连接后一个新数组。

const myArray = [1, 2, 3, 4, 5];
const myArray2 = [10, 20, 30, 40, 50];
myArray.concat(myArray2);
// -------> 输出:[1, 2, 3, 4, 5, 10, 20, 30, 40, 50]

from()

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。如果对象是数组返回 true,否则返回 false

用法:Array.from(object, mapFunction, thisValue) object 要转换为数组的对象(必需) mapFunction 数组中每个元素要调用的函数(可选) thisValue 映射函数(mapFunction)中的 this 对象(可选)

const myString = "XPOET";
Array.from(myString);
// -------> 输出:["X", "P", "O", "E", "T"]

const mySet = new Set(["a", "a", "b", "c"]);
Array.from(mySet);
// -------> 输出:["a", "b", "c"]

Array.from([1, 2, 3], (x) => x * 10);
// -------> 输出:[10, 20, 30]

reverse()

此方法用于反转数组中元素的顺序,使第一个元素成为最后一个,最后一个元素成为第一个。

const myArray = ["e", "d", "c", "b", "a"];
myArray.reverse();
// -------> 输出:["a", "b", "c", "d", "e"]

forEach()

此方法用于循环遍历数组中的每个元素,并将元素传递给回调函数。

forEach() 对空数组不执行。

const myArray = [
  { id: 1, name: "Job" },
  { id: 2, name: "Alan" },
  { id: 3, name: "Lily" },
];
myArray.forEach((element) => console.log(element.name));
// -------> 输出:Job
//               Alan
//               Lily

find()

在数组中查找并返回符合条件的元素。如果符合条件的元素有多个,那么只返回第一个元素。如果没有符合条件的元素,则返回 undefined

find() 对空数组不执行;不改变数组的原始值。

const myArray = [
  { id: 1, name: "John" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
];

myArray.find((element) => element.id === 2);
// -------> 输出:{id: 3, name: "Ali"}

myArray.find((element) => element.id === 5);
// -------> 输出:undefined

findIndex()

在数组中查找并返回符合条件的元素的索引(index)。如果符合条件的元素有多个,那么只返回第一个元素的索引(index)。如果没有符合条件的元素,则返回 -1

findIndex() 对空数组不执行;不会改变数组的原始值。

const myArray = [
  { id: 1, name: "John" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
];

myArray.findIndex((element) => element.id === 3);
// -------> 输出:2

myArray.findIndex((element) => element.id === 7);
// -------> 输出:-1

filter()

在数组中过滤出符合条件的所有元素,并返回一个新数组。如果数组中没有符合条件的元素,则返回一个空数组。

filter() 不改变数组的原始值。

const myArray = [
  { id: 1, name: "John" },
  { id: 2, name: "Ali" },
  { id: 3, name: "Mass" },
  { id: 4, name: "Mass" },
];
myArray.filter((element) => element.name === "Mass");
// -------> 输出:[{id: 3, name: "Mass"}, {id: 4, name: "Mass"}]

includes()

此方法用于判断数组中是否包含指定的值,如果有返回 true,否则返回 false

const myArray = ["A", "B", "C", 1, 2, 3, 4, 5];
myArray.includes(3);
// -------> 输出:true

myArray.includes(8);
// -------> 输出:false

myArray.includes("A");
// -------> 输出:true

some()

在数组内判断是否有符合条件的元素,只要有一个元素符合条件,则返回 true,否则返回 false

some() 对空数组不执行;不改变数组的原始值。

const myArray = ["a", "b", "c", "d", "e"];
myArray.some((item) => item === "d");
// -------> 输出:true

myArray.some((item) => item === "h");
// -------> 输出:false

every()

在数组内判断每一个元素是否都符合匹配条件,如果是,返回true,反之则返回 false

const myArray = ["a", "b", "c", "d", "e"];
myArray.every((item) => item === "d");
// -------> 输出:false

const myArray2 = ["a", "a", "a", "a", "a"];
myArray2.every((item) => item === "a");
// -------> 输出:true

sort()

此方法对数组内的元素进行排序,并返回排序后的新数组。

const myArray = [5, 4, 3, 2, 1];

// 升序
myArray.sort((a, b) => a - b);
// -------> 输出:[1, 2, 3, 4, 5]

// 降序
myArray.sort((a, b) => b - a);
// -------> 输出:[5, 4, 3, 2, 1]

map()

循环遍历数组中的每一个元素,并返回一个新数组,新数组中的元素为原始数组元素调用函数处理后的值。

map() 对空数组不执行;不会改变原始数组。

const myArray = [5, 4, 3, 2, 1];
myArray.map((x) => x * x);
// -------> 输出:[25, 16, 9, 4, 1]

fill()

此方法用于把一个固定值来替换数组中的元素(固定值可以是字母、数字、字符串、数组等等),并返回替换后的新数组。

语法:fill(value, start, end) value 参数 1 :固定值 start 参数 2:开始替换的索引 end 参数 3:结束替换的索引

const myArray = [1, 2, 3, 4, 5];
myArray.fill("A", 1, 3);
// -------> 输出:[1, "A", "A", 4, 5]

reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

语法:reduce(function(total, currentValue, currentIndex, array), initialValue) total 初始值,或者计算结束后的返回值(必需) currentValue 当前元素(必需) currentIndex 当前元素的索引(可选) array 当前元素所属的数组对象(可选)

const myArray = [1, 2, 3, 4, 5];
myArray.reduce((total, value) => total * value);
// 1 * 2 * 3 * 4 * 5
// -------> 输出:120

flat()

flat() 方法用于数组扁平化处理,即把数组中多维数组降维,最后返回降维后新数组。

用法:flat(depth) depth 表示要降维的深度(可选,默认为 1)

const myArray = [1, 2, [3, 4, 5, ["A", "B", "C"]]];
myArray.flat();
// -------> 输出:[[1, 2, 3, 4, 5, ["A", "B", "C"]]

myArray.flat(2);
// -------> 输出:[1, 2, 3, 4, 5, "A", "B", "C"]

flatMap()

该方法将函数应用于数组的每个元素,然后将结果压缩为一个新数组。该方法结合了 flat()map()

const myArray = [[1], [2], [3], [4], [5]];
myArray.flatMap((arr) => arr * 10);
// -------> 输出:[10, 20, 30, 40, 50]

// 等同于:
myArray.flat().map((arr) => arr * 10);
// -------> 输出:[10, 20, 30, 40, 50]

本文分享自微信公众号 - 前端鼓励师(FE-Cheerleaders),作者:XPoet

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-04-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端工程师必须知道的用javaScript刷新当前页面的3种方法

    页面自动刷新:把如下代码加入<head>区域中,其中10指每隔10秒刷新一次页面。

    孙叫兽
  • 前端工程师必须知道的用javaScript刷新当前页面的3种方法

    页面自动刷新:把如下代码加入<head>区域中,其中10指每隔10秒刷新一次页面。

    孙叫兽
  • web前端开发入门,学习路径以及具体的学习内容

    在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性。这 个部分内容非常简单,而且非常容易掌握。相信你也更愿意学习这个部分...

    用户5827212
  • 机器学习算法工程师必须掌握的七大技能

    实话实说,目前大部分人上各种班来学习机器学习,学习大数据,归根到底还是希望能找到一个好的工作,拿到更高的薪水,当然还有一部分原因是自己对这一方面比较感兴趣,希望...

    机器人网
  • web前端与手机应用的这些重点和知识点,你知道多少呢

    随着互联网、移动互联网的发展,HTML5成为了客户端软件开发的主流技术,HTML5实际上是由:HTML5语言、CSS3、JAVASCRIPT语言组成。

    用户5827212
  • 前端工程师的基本素养

    阅读原文 闲来无事,今天随便聊聊前端工程师应该具备哪些素质,权当博大家一笑。 前端工程师到底是工作很简单的“切图仔”,还是包揽客户端和中间层的“大前端”?招聘市...

    寒月十八
  • 【云+社区年度征文】全年的技术盘点与总结(含小程序开发)

    2020年,是个不平凡的一年,因为疫情的蔓延打乱了我的全盘计划。但是这也让我和云+社区一起共同努力,在工作中,完成了目标项目、攻克了技术难关、学习了新的技术,也...

    达达前端
  • 数据工程师必须掌握的7个大数据实战项目

    作为一名电影爱好者,我阅片无数,有些片子还经常翻来覆去看个好几遍。小时候因为这事儿,没少被我妈抓耳朵,“看过的片子为啥还要倒二遍?”我也说不上来,就是单纯的爱看...

    Lenis
  • Web前端开发工程师的具备条件

    deepcc
  • 一个前端工程师的基本修养

    用户1682855
  • 一个前端工程师的基本修养

    有人说互联网是前端工程师的舞台,先不论这个说法是否有些夸大其词,但前端工程师绝对撑起了互联网应用开发的“半壁江山”。随着传统网站、手机应用、桌面应用、微信小程序...

    企鹅号小编
  • 一个合格的中级前端工程师要掌握的JavaScript 技巧

    使用 Object.prototype.toString 配合闭包,通过传入不同的判断类型来返回不同的判断函数,一行代码,简洁优雅灵活(注意传入 type 参数...

    Nealyang
  • 前端开发语言有哪些?需要掌握什么?

    前端开发语言有哪些?需要掌握什么?通常前端开发在基础阶段掌握html+css+js+jq;框架语言阶段掌握vue+react+小程序;后端掌握nodejs+mo...

    用户8671053
  • Web前端工程师成长之路

        前端工程师,也叫Web前端开发工程师。他是随着web发展,细分出来的行业。Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScrip...

    用户4962466
  • 前端程序员必须掌握之三角函数在前端动画中的应用

    开发过程中经常有意无意地刻意避开数学相关的知识,你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现,timer-function 随意选用,最...

    coder_koala
  • 【技术创作101训练营】Web前端开发职业技术要求规划

    今天,我演讲的题目是《Web前端开发职业技术要求规划》。这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪一种呢?

    达达前端
  • Web前端开发职业技术要求规划

    今天,我演讲的题目是《Web前端开发职业技术要求规划》。这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪一种呢?

    达达前端
  • 软件测试人员掌握多少代码能力才够

    概述 软件测试工程师通常会面临着一个普遍的问题:软件测试工程师工作中需要写代码吗? 在理清这个问题前,我们有必要先全面的了解下软件测试的各种角色。 一般而言软件...

    苦叶子
  • 代码 - 软件测试扎心的痛

    概述 软件测试工程师通常会面临着一个普遍的问题:软件测试工程师工作中需要写代码吗? 在理清这个问题前,我们有必要先全面的了解下软件测试的各种角色。 一般而言软件...

    苦叶子

扫码关注云+社区

领取腾讯云代金券