每天温习一个JS方法之Array.flat方法第六天

1. `Array.flat`方法

1.1 描述

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

不会改变原数组

1.2 语法

arr.flat(depth) // depth 默认值为1

参数：

depth：可选。提取嵌套数组的结构深度，默认值为1

1.3 注意

arr.flat()返回一个包含数组和其子数组所有元素的新数组。
depth可以是任意值，但一般只有number和string 类型的数值才会被接受，undefined则为默认值

2. `Array.flat`应用

2.1 示例

注：输出的Array(3） = ['a', ['b'], 'c'],Array(1) = ['b']

const arr = [1, 2, ['a', ['b'], 'c']];
console.log(arr.flat()); // 输出 [1, 2, 'a', Array(1), 'c'] ———— depth 默认值为1
console.log(arr); // 输出 [1, 2, Array(3)]  ———— 不会改变原数组const arr = [1, 2, ['a', ['b'], 'c']];
console.log(arr.flat('abc'));  // 输出 [1, 2, Array(3)]console.log(arr.flat('2')); // 输出 [1, 2, 'a', 'b', 'c']console.log(arr.flat(undefined)); //  输出 [1, 2, 'a', Array(1), 'c']// 引用自MDN ———— 使用 Infinity，可展开任意深度的嵌套数组
const arr = [1, 2, ['a', ['b'], 'c']];
console.log(arr.flat(Infinity)); // 输出 [1, 2, 'a', 'b', 'c']

2.2 与其他方法连通提取嵌套数组对象的情况

/* 输出户主及子系姓名 */
const arr = [{id: 1,name: '张三',families: [{ id: 101, name: '张四' },{ id: 105, name: '张五' },],},{id: 2,name: '李四',families: [{ id: 101, name: '李五' },{ id: 105, name: '李六' },],},
];
const result = arr.map((o) => {let nameArr = [];nameArr.push(o.name);nameArr.push(o.families.map((o) => o.name));return nameArr;}).flat(2);
console.log(result); // 输出 ['张三', '张四', '张五', '李四', '李五', '李六']

上面有点强制嵌套了，其实可以不用，如下

const result = arr.map((o) => {return [o.name].concat(o.families.map((o) => o.name));
}); // 输出 ['张三', '张四', '张五', '李四', '李五', '李六']

Array.flat 还有诸多与其它方法联用的应用，熟悉它，相信你在逻辑处理过程中能够广泛应用到

每天温习一个JS方法之Array.flat方法第六天相关推荐

js常用方法之Array对象方法扩展
趁着这段项目少,对Array零散的知识进行一下梳理和总结,以便下次使用,代码如下: 1 /** 2 * 数组通用扩展方法 3 * 4 * @author lixiangqian 20130419 5 ...
JS：数组Array的方法(增删改查)：push() 、pop() 、unshift()、 shift()、concat()、join()、reverse()、sort()
push() 该方法可以向数组的末尾添加一个或多个元素. 可以将要添加的元素作为方法的参数传递,这样元素会自动添加到数组末尾. 该方法会将数组新的长度作为返回值返回. let arr = [" ...
C#——String.IndexOf方法与Array.IndexOf方法的异同
相同:返回值都为int类型,没找到返回值都为-1 (1)//IndexOf方法从左到右查找子串在母串中的索引值 String a = "abcdefg"; ...
前端百题斩【020】——竟然有五种方式实现flat方法
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第20斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 20.1 ...
前端百题——竟然有五种方式实现flat方法
1 背景不知道老铁们有没有遇到过一道面试题:如何将一个多维数组展开成一个一维数组?当时我遇到的时候还不了解flat这个神奇的方法,用了最传统的解决方法进行解决. const flatten = ar ...
ruby中、.reject_Ruby中带有示例的Array.reject方法
ruby中..reject Ruby Array.reject方法 (Ruby Array.reject Method) In the last article, we have seen how w ...
Array.of()方法
Array.of()方法 Array.of()方法用于将一组值,转换为数组. Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3) ...
数组(array)ES5方法
Array是JavaScript的内置对象,同时也是一个构造函数,可以用它生成新的数组,用于在变量中存储多个值 var cars = ["Saab", "Volvo&qu ...
ruby array_Ruby中带有示例的Array.keep_if方法
ruby array Ruby Array.keep_if方法 (Ruby Array.keep_if Method) In the last articles, we have studied th ...

每天温习一个JS方法之Array.flat方法第六天

1. `Array.flat`方法

1.1 描述

1.2 语法

1.3 注意

2. `Array.flat`应用

2.1 示例

2.2 与其他方法连通提取嵌套数组对象的情况

每天温习一个JS方法之Array.flat方法第六天相关推荐

最新文章

热门文章

每天温习一个JS方法之Array.flat方法 第六天

1. Array.flat方法

1.1 描述

1.2 语法

1.3 注意

2. Array.flat应用

2.1 示例

2.2 与其他方法连通提取嵌套数组对象的情况

每天温习一个JS方法之Array.flat方法 第六天相关推荐

最新文章

热门文章

每天温习一个JS方法之Array.flat方法第六天

1. `Array.flat`方法

2. `Array.flat`应用

每天温习一个JS方法之Array.flat方法第六天相关推荐