ES6 新增数组方法
ZGuangJu 2/18/2019 前端基础ES6
# 新增方法
Array.prototype.flat() 数组扁平化
See More
var newArray = arr.flat([depth])
flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
参数
depth(可选):指定要提取嵌套数组的结构深度，默认值为 1。
返回值 一个包含将数组与子数组中所有元素的新数组。
示例
扁平化嵌套数组
var arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
扁平化与数组空项
flat() 方法会移除数组中的空项:
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]`
使用 reduce 与 concat
var arr = [1, 2, [3, 4]];
// 展开一层数组
arr.flat();
// 等效于
arr.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]
// 使用扩展运算符 ...
const flattened = arr => [].concat(...arr);
reduce + concat + isArray + recursivity
// 使用 reduce、concat 和递归展开无限多层嵌套的数组
var arr1 = [1,2,3,[1,2,3,4, [2,3,4]]];
function flatDeep(arr, d = 1) {
return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
: arr.slice();
};
flatDeep(arr1, Infinity);
// [1, 2, 3, 1, 2, 3, 4, 2, 3, 4]
forEach + isArray + push + recursivity
// forEach 遍历数组会自动跳过空元素
const eachFlat = (arr = [], depth = 1) => {
const result = []; // 缓存递归结果
// 开始递归
(function flat(arr, depth) {
// forEach 会自动去除数组空位
arr.forEach((item) => {
// 控制递归深度
if (Array.isArray(item) && depth > 0) {
// 递归数组
flat(item, depth - 1)
} else {
// 缓存元素
result.push(item)
}
})
})(arr, depth)
// 返回递归结果
return result;
}
// for of 循环不能去除数组空位，需要手动去除
const forFlat = (arr = [], depth = 1) => {
const result = [];
(function flat(arr, depth) {
for (let item of arr) {
if (Array.isArray(item) && depth > 0) {
flat(item, depth - 1)
} else {
// 去除空元素，添加非undefined元素
item !== void 0 && result.push(item);
}
}
})(arr, depth)
return result;
}
# 以下未修改
# forEach()
let arr = [1, 2, 3, 4, 5]
// forEach遍历数组
arr.forEach((item,index,self)=>{
console.log(item*10)
})
# map()
// map遍历数组，返回一个新数组 (用作统一修改数组项)
let r1 = arr.map((item, index, arr) => {
return item * 10
})
console.log(r1)
# filter()
// filter过滤出满足条件的值，返回一个新的数组 (用作数组过滤)
let r2 = arr.filter((item, index, arr) => {
return item > 2
})
console.log(r2)
# reduce()
// reduce前一项一直作用于后一项上(可以用作数组求和或求阶乘)
let r3 = arr.reduce((result, item, index, arr) => {
return result + item
})
console.log(r3)
# some()
// someh找到满足条件的第一个就停止(检测数组中的是否存在满足条件的项目),并返回true，如果都不满足，返回false
let r4 = arr.some((item,index)=>{
return item//2 === 0,index
})
console.log(r4)
# every()
// every 其中有一项不满足就返回false，否则返回true (检测数组中是否都满足条件 )
let r5 = arr.every((item,index)=>{
return item<5
})
console.log(r5)
# indexOf()/lastIndexOf()方法
//该方法有两个参数，第一个参数表示要查找的项，第二个参数表示开始查找的位置，当第二个参数省略的时候表示默认从第0个位置开始查找
alert(arr.indexOf(4)); //弹出3，因为4在数组中的索引值为3
alert(arr.indexOf(4,4)); //弹出-1，因为从第四个位置开始往后找的时候，找不到4这个元素
//跟该方法相同的还有一个lastIndexOf()方法，跟indexOf()方法不同的是，该方法是从后往前面开始找
# includes()
//接收两个参数，查询的项以及查询起始位置。
arr.includes(2);// 结果true，返回布尔值
arr.includes(20);// 结果：false，返回布尔值
arr.includes(2,3)//结果：false，返回布尔值
# fill()
//将数值填充到指定数组中
arr.fill(5)//arr[5,5,5,5,5]