ES6数组的`flat()`和`flatMap()`函数用法

今天给大家分享ES6中两个超实用的数组函数:flat()flatMap(),学会它们能让数组处理变得更轻松!

1. flat()函数

1.1 基本介绍

flat()用于将嵌套数组"拍平",即将多维数组转换为一维数组。

1.2 语法

const newArray = oldArray.flat([depth]);
- `depth`:可选参数,表示拍平深度,默认值为1### 1.3 示例#### 默认深度(depth=1```javascript
const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat()); 
// 输出: [1, 2, 3, 4, [5, 6]]
指定深度(depth=2)
const arr = [1, [2, 3], [4, [5, 6]]];
console.log(arr.flat(2)); 
// 输出: [1, 2, 3, 4, 5, 6]
完全拍平(Infinity)
const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(Infinity));
// 输出: [1, 2, 3, 4]

1.4 注意事项

  • 自动移除空元素
console.log([1, , 3].flat()); // 输出: [1, 3]

2. flatMap()函数

2.1 基本介绍

flatMap()map()flat(1)的组合,先映射再拍平一层。

2.2 语法

const newArray = arr.flatMap(callback(currentValue[, index[, array]]){// 返回新数组元素
});

2.3 示例

const nums = [1, 2, 3];// 等效于map后接flat(1)
console.log(nums.flatMap(x => [x * 2])); 
// 输出: [2, 4, 6]// 只能拍平一层
console.log(nums.flatMap(x => [[x * 2]]));
// 输出: [[2], [4], [6]]

2.4 实际应用

// 拆分字符串并展开
const sentences = ["Hello world", "Good morning"];
console.log(sentences.flatMap(s => s.split(' ')));
// 输出: ["Hello", "world", "Good", "morning"]

总结对比

方法作用拍平深度
flat()单纯拍平数组可指定
flatMap()先map再flat(1)固定1层

这两个方法在处理嵌套数组时非常有用,合理使用可以让代码更简洁高效!

小贴士:遇到复杂嵌套结构时,可以组合使用map+flat或直接使用flat(Infinity)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/912690.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/912690.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

upload-labs靶场通关详解:第15-16关

第十五关 getimagesize函数验证 一、分析源代码 function isImage($filename){$types .jpeg|.png|.gif;if(file_exists($filename)){$info getimagesize($filename);$ext image_type_to_extension($info[2]);if(stripos($types,$ext)>0){return $ext;}else{return false…

【Linux】基础IO流

好的代码自己会说话,清晰的逻辑与优雅的结构,是程序员与世界对话的方式。 前言 这是我自己学习Linux系统编程的第五篇笔记。后期我会继续把Linux系统编程笔记开源至博客上。 上一期笔记是关于进程: 【Linux】进程-CSDN博客https://blog.csdn…

【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(二)

🔥个人主页:艾莉丝努力练剑 ❄专栏传送门:《C语言》、《数据结构与算法》、C语言刷题12天IO强训、LeetCode代码强化刷题 🍉学习方向:C/C方向 ⭐️人生格言:为天地立心,为生民立命,为…

AD8021ARZ-REEL7【ADI】300MHz低噪声运放放大器,高频信号处理的性价比之选!

AD8021ARZ-REEL7(ADI)产品解析与推广文案 1. 产品概述 AD8021ARZ-REEL7 是 Analog Devices Inc.(ADI) 推出的一款 高速、低噪声运算放大器(Op-Amp),属于 ADI的高性能放大器系列,专为…

WPF学习笔记(11)数据模板DataTemplate与数据模板选择器DataTemplateSelector

数据模板DataTemplate与数据模板选择器DataTemplateSelector 一、DataTemplate1. DataTemplate概述2. DataTemplate详解 二、DataTemplateSelector1. DataTemplateSelector概述2. DataTemplateSelector详解 总结 一、DataTemplate 1. DataTemplate概述 DataTemplate 表示数据…

【V6.0 - 听觉篇】当AI学会“听”:用声音特征捕捉视频的“情绪爽点”

系列回顾: 在上一篇 《AI的“火眼金睛”:用OpenCV和SHAP洞察“第一眼缘”》 中,我们成功地让AI拥有了视觉,它已经能像一个严苛的“质检员”一样,评判我视频的画质和动态感。 但我的焦虑并没有完全消除。因为我发现&a…

(5)pytest-yield操作

1. 简介 上一篇中,我们刚刚实现了在每个用例之前执行初始化操作,那么用例执行完之后如需要清除数据(或还原)操作,可以使用 yield 来实现。fixture通过scope参数控制setup级别,既然有setup作为用例之前前的操…

C++中的cmath库

在C编程中,数值计算是科学计算、工程应用及算法开发的基础。cmath库作为C标准库的重要组成部分,提供了丰富的数学函数和工具,能够高效处理各种数值计算任务。本文将全面解析cmath库的核心功能,并通过实战案例展示其强大威力。 一…

python包管理工具uv VS pip

在 Python 中,uv 和 pip 都是包管理工具,但它们的定位和特性有所不同。以下是主要区别: 1. pip(传统工具) 定位:Python 官方的包安装工具,是 Python 生态中最基础的包管理器。特点:…

OpenCv基础(C++)

1.图像读取与显示 #include<opencv2/opencv.hpp> using namespace cv;Mat src imread("C:/Users/16385/Desktop/new/photo/1.jpg");//读取图像 Mat src imread("C:/Users/16385/Desktop/new/photo/1.jpg",IMREAD_GRAYSCALE); //将读取的图像转为灰…

MySQL非阻塞创建索引的方法

文章目录 1. Online DDL (MySQL 5.6)2. pt-online-schema-change 工具3. gh-ost 工具4. 对于MySQL 8.0注意事项 在MySQL中创建大型表索引时&#xff0c;传统方式会阻塞表的写操作&#xff0c;影响生产环境使用。以下是几种非阻塞创建索引的方法&#xff1a; 1. Online DDL (My…

数字雨动画背景

<!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>数字雨动画背景</title><style>* {m…

分布式锁的概念与应用场景

一、分布式锁的核心概念 分布式锁是一种在分布式系统环境下&#xff0c;用于保证多个进程/节点对共享资源实现互斥访问的机制。其本质是通过某种中间件&#xff08;如Redis、ZooKeeper等&#xff09;实现跨节点的锁控制&#xff0c;确保在分布式环境中&#xff0c;同一时刻只有…

js代码09

题目 好的&#xff0c;我们继续。 在上一个练习中&#xff0c;我们深入探讨了 this 的复杂性。你会发现&#xff0c;ES6 引入的 class 语法在很大程度上就是为了简化 this 的使用&#xff0c;并为 JavaScript 提供一个更清晰、更熟悉的面向对象编程&#xff08;OOP&#xff0…

基于Airtest的App数据爬取实战:突破传统爬虫的边界

引言:App数据爬取的技术困境 在当今移动优先的时代,App已成为企业核心数据载体,然而​​传统爬虫技术​​在App数据获取上面临三大难题: ​​协议层屏障​​:加密HTTPS、SSL Pinning等技术阻断中间人攻击​​渲染层障碍​​:React Native、Flutter等跨平台框架使DOM解析…

【LeetCode 热题 100】560. 和为 K 的子数组——(解法一)前缀和+暴力

Problem: 560. 和为 K 的子数组 题目&#xff1a;给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。子数组是数组中元素的连续非空序列。 【LeetCode 热题 100】560. 和为 K 的子数组——&#xff08;解法二&#xff09;前缀和…

android车载开发之HVAC

目前主要在做车载hvac的开发&#xff0c;主要的一些功能主要是hvac&#xff0c;座椅&#xff0c;香氛&#xff0c;设置等的一些模块&#xff0c;具体模块下&#xff0c;比如 1.空调 ac&#xff0c;智能模式&#xff08;极速降温&#xff0c;极速采暖&#xff0c;智能除味&…

深度学习 Diffusers 库(自留)

&#xff08;本文将围绕 安装Diffusers库及其依赖、理解Diffusers核心概念&#xff1a;Pipeline, Model, Scheduler 、使用预训练模型进行推理&#xff08;文生图、图生图等&#xff09; 、 自定义模型和调度器 、训练自己的扩散模型&#xff08;可选&#xff0c;需要大量资源&…

【VPC技术】基础理论篇

文章目录 概述相关基础核心知识软件定义网络SDNOverlay 技术 安全组概述 参考博客 &#x1f60a;点此到文末惊喜↩︎ 概述 相关基础 基本概念 虚拟私有云VPC&#xff1a;是一个隔离的网络环境&#xff0c;每个VPC拥有专属的IP地址范围&#xff08;CIDR&#xff09;、路由表、…

在 RK3588 Ubuntu 上编译 eglinfo:全流程实战 + 常见报错修复

dv1/eglinfo 是一个开源的 EGL 信息检测工具&#xff0c;广泛用于 OpenGL ES 图形栈调试、驱动验证和嵌入式平台图形支持排查。在 Rockchip RK3588 上编译该工具可以协助我们确认 EGL DRM 是否配置正确&#xff0c;尤其在无窗口系统&#xff08;如 eglfs、framebuffer&#xf…