ES6中的map(),filter(),flat(),reduce()用法

本文深入解析JavaScript数组的map、filter、flat与reduce方法,包括它们的功能、应用场景及实例代码,帮助开发者掌握高效处理数组的技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.map()

作用:返回一个新数组,新数组中的元素为原数组中的元素调用回调函数处理后的值,不会改变原始数组
代码:

    let oldArr = [1,2,3];
	let newArr = oldArr.map((value,key,arr)=>{
		console.log("我是value:"+value);
		console.log("我是key:"+key);	
		console.log("我是原数组: "+ arr)
		return value * 2;
	})
		
	console.log(oldArr);
	console.log(newArr);

结果:
在这里插入图片描述
参数:array.map(回调函数( value,index,arr ))

  • value:当前元素值
  • index:当前元素下标
  • arr:当前元素数组
    遍历 原数组中的元素,调用回调函数,将回调函数返回值添加到新数组中,不会改变原始数组

2.filter()

filter() 可以看成过滤函数,返回符合条件的元素的数组
作用:根据条件筛选原数组中符合条件的元素,添加到一个新数组中返回。不会修改原始数组

    let oldArr = [2,4,6,8,10];
	let newArr = oldArr.filter((v,i,arr)=>{
		console.log("我是当前数组的value:"+v);
		console.log("我是当前数组key:"+i);	
		console.log("我是原数组: "+ arr)
		return v > 5;
	})
	
	
	console.log(oldArr);
	console.log(newArr);

在这里插入图片描述
参数:array.filter(回调函数( currentValue,index,arr ))

  • value - 当前元素值
  • index - 当前元素下标
  • arr - 当前数组

返回值:返回包含符合条件的元素的数组;没有符合条件的元素,则返回 空数组。

2.1 filter的应用

filter去掉空字符串、undefined、null


let arr = ['','1','2',undefined,'img',undefined,null]
let newArr = arr.filter(item => item)
console.log(newArr);//["1", "2", "img"]

filter去重


let arr=[1,1,2,3,3,4,4,5,6,6,7]
let newArr = arr.filter((v,i,arr)=>
	arr.indexOf(v)=== i
)

console.log(newArr);	// [1, 2, 3, 4, 5, 6, 7]

去重推荐使用set
let arr=[1,1,2,3,3,4,4,5,6,6,7]
let newArr =Array.from(new Set(arr)) 
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7]

3.flat()

作用: 数组的成员有时还有数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

let arr= [1, 2, [3, 4]];
let newArr = arr.flat();
console.log(newArr); //[1, 2, 3, 4]

上述代码中,原始数组中成员中有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。
flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

flat的应用

let arr = [1, 2, [3, 4, [5, 6]]];
// 默认只能 拉平 1层
arr.flat(); 
 [1, 2, 3, 4, [5, 6]]
// 参数为2 表示要拉平 2 层 嵌套数组
arr.flat(2); 
[1, 2, 3, 4, 5, 6]
// 也可以连续调用
arr.flat().flat(); 
 [1, 2, 3, 4, 5, 6]
// 如果不管有多少嵌套层,都要转成一维数组的话,可以用Infinity关键字作为参数
arr.flat(Infinity)
 [1, 2, 3, 4, 5, 6]

4.reduce()

reduce()函数接收一个回调函数(必须)和指定的初始值(非必须)作为参数。函数中的参数,分别为 初始值,当前项,当前数组,进行累加或者累积操作,初始值为每次累加或者累计后的结果

语法:array.reduce(callback, [initialValue])
reduce()方法接收callback函数,
function callback(preValue, curValue, index, array)

  • preValue: 必需,初始值(initialValue)或者计算结束后的返回值
  • curValue: 必需,当前元素
  • index: 可选,当前元素在数组中的索引值
  • array: 可选,当前元素所属的数组对象
  • initialValue:可选,传递给函数的初始值( 第一次调用callback函数时的preValue)

4.1 reduce的应用

数组求和

let arr = [1,2,3,4,5];

const sum = arr.reduce((prev,cur,index,ary)=> prev + cur,10)
console.log(sum); //25


let arr = [1,2,3,4,5];

const sum = arr.reduce((prev,cur,index,ary)=> prev + cur)
console.log(sum); //15

数组阶乘

let arr = [1, 2, 3, 4, 5]
  
  const fact=arr.reduce((prev, cur, index, ary) => {
  return prev * cur
})	console.log(fact); //120

展平数组(二维数组变为一维数组)

let arr = [[0,1], [2, 4, 6], [7, 8, 9]];
	const flat = arr.reduce((prev,cur)=>{
		return [...prev,...cur]
	});
	console.log(flat)

数组去重

let arr = [1, 2, 1, 2, 3, 0, 4, 5, 3, 1,1,1];
	let result = arr.sort().reduce((init, current) => {
    	if (init.length === 0 || init[init.length - 1] !== current) {
        	init.push(current);
    	}
    	return init;
	}, []);
	console.log(result); //[0,1,2,3,4,5]

计算数组中每个元素出现的次数

let letters = ['A', 'A', 'B', 'C', 'A'];

	const countletters= letters.reduce((allLetters, letter) => {
  		if (letter in allLetters) {
    		allLetters[letter] ++;
  		}
  		else {
    		allLetters[letter] = 1;
  	}
  		return allLetters;
		}, {});

console.log(countletters) //{A: 3, B: 1, C: 1}

const arraySum = (arr, val) => arr.reduce((acc, cur) => {
    return cur == val ? acc + 1 : acc + 0
}, 0);

let arr = [ 0, 1, 1,4,2, 0, 1, 3 ]
console.log(arraySum(arr, 1)) // 数组arr中 1 元素出现的次数为3
<think>好的,我现在需要帮助用户了解ES6新增的数组方法。首先,我得回忆一下ES6中数组方法有哪些新增的部分。用户可能已经知道ES5的方法,比如forEach、mapfilter等,但ES6引入了更多实用的方法。 根据提供的引用内容,引用[1]提到了ES6新增的mapfilter、some、every、reduce方法,不过这里可能需要确认,因为这些方法其实在ES5中就已经存在了。可能引用中的描述有误,或者用户提供的引用信息不准确。不过用户的问题明确是关于ES6新增的数组方法,所以需要确保回答正确。比如,ES6确实新增了如find、findIndex、fill、includes、Array.from、Array.of等方法。 接下来需要检查用户提供的引用内容。引用[1]提到mapfilter、some、every、reduceES6新增的,但实际上这些是ES5的方法。这可能是一个错误,但用户引用的资料可能有误,所以在回答时需要注意正确性,同时可能需要指出用户的引用可能存在错误,但按照用户提供的引用,可能需要处理这个矛盾。 用户的问题是想了解ES6新增的数组方法,所以正确的ES6新增方法包括:find(), findIndex(), fill(), includes(), Array.from(), Array.of(), entries(), keys(), values(), copyWithin(), 以及展开运算符(...)等。 现在需要组织回答,先列出ES6新增的方法,然后逐一解释每个方法的用途,并给出示例代码。同时,根据用户提供的引用,引用[3]提到了展开运算符用于添加元素,这也属于ES6的内容。因此,在回答中需要包括这些方法,并正确引用用户提供的资料,但要注意纠正可能的错误。 可能需要注意,用户提供的引用[1]和[2]中将ES5的方法误认为是ES6的,所以在回答中需要指出正确的ES6方法,避免混淆。例如,mapfilter等属于ES5,而find、includes等是ES6新增的。 因此,回答的结构应该是先明确列出ES6新增的数组方法,然后每个方法进行简要说明和示例,同时引用正确的来源。如果用户提供的引用有误,可能需要说明,但根据用户的要求,可能需要直接使用提供的引用,但这样会导致错误。因此,作为回答者,应该以正确知识为主,同时处理用户的引用内容。 根据用户提供的三个引用,引用[1]提到了ES6新增的map等方法,但实际上这些是ES5的。可能用户提供的引用有误,但按照用户的问题,需要正确回答ES6新增的方法。所以正确的ES6数组方法包括: - find() 和 findIndex() - fill() - includes() - Array.from() - Array.of() - entries(), keys(), values() - copyWithin() - 展开运算符(...) 此外,还有一些数组实例方法如flat()flatMap(),但它们是ES2019(ES10)引入的,可能不属于ES6。需要确认时间线。 现在需要将这些方法整理出来,每个方法给出解释和示例代码,并正确引用用户提供的资料中的相关内容。例如,引用[3]提到了展开运算符用于添加元素,可以引用这一点。而用户提供的引用[1]中的方法可能属于ES5,但用户可能混淆了,所以需要明确指出哪些是ES6新增的。 最终,回答需要结构清晰,分点列出ES6新增的方法,每个方法有代码示例,并适当引用用户提供的资料,同时纠正其中的错误。例如,在回答中指出mapfilter等方法属于ES5,而ES6新增了其他方法,但根据用户提供的引用[1],可能需要处理这个矛盾。不过,用户的问题明确询问ES6新增的方法,所以应该以正确的方法列表为主,可能需要在回答中说明用户提供的引用可能存在混淆,但根据系统指令,必须引用提供的引用内容。因此,需要找到用户引用中正确涉及ES6的部分,如引用[3]中的展开运算符,而引用[1]中的方法可能不正确,但用户可能希望将它们包含进去,这可能需要进一步处理。 可能用户提供的引用存在错误,但根据指示,必须使用这些引用。因此,在回答中需要结合正确的知识和提供的引用。例如,引用[1]提到ES6新增了map等方法,但实际上这些是ES5的,所以在回答中可能需要指出这些方法属于ES5,而ES6新增了其他方法,但用户的问题可能希望得到引用中的内容。这可能会导致矛盾,需要谨慎处理。 可能的最佳做法是,正确列出ES6新增的方法,并在适当的地方引用用户提供的资料中的正确部分。例如,当提到展开运算符时,可以引用引用[3],而引用[1]中的方法可能需要忽略,或者指出可能存在混淆。 总结步骤: 1. 列出ES6真正新增的数组方法。 2. 为每个方法提供解释和代码示例。 3. 引用用户提供的资料中的相关部分,如展开运算符引用[3]。 4. 生成相关问题。 需要确保回答正确,同时处理用户提供的引用中的可能错误。</think>ES6新增的数组方法主要包括以下几类,涵盖数组操作、元素查找和数据结构转换等场景: ### 一、元素查找方法 1. **`find()`** 返回数组中第一个满足条件的元素,若无则返回`undefined` ```javascript const arr = [5, 12, 8, 130]; arr.find(x => x > 10); // 12 ``` 2. **`findIndex()`** 返回第一个满足条件的元素的索引,若无则返回`-1` ```javascript [5, 12, 8, 130].findIndex(x => x > 10); // 1 ``` 3. **`includes()`** 判断数组是否包含指定值(支持`NaN`检测)[^3] ```javascript [1, 2, NaN].includes(NaN); // true ``` --- ### 二、数组填充与复制 4. **`fill()`** 用固定值填充数组的指定区间 ```javascript new Array(3).fill(7); // [7, 7, 7] ``` 5. **`copyWithin()`** 复制数组内部元素到指定位置 ```javascript [1, 2, 3, 4].copyWithin(0, 2); // [3, 4, 3, 4] ``` --- ### 三、数据结构转换 6. **`Array.from()`** 将类数组对象或可迭代对象转为数组[^1] ```javascript Array.from('hello'); // ['h', 'e', 'l', 'l', 'o'] ``` 7. **`Array.of()`** 根据参数创建新数组(解决`new Array(3)`的歧义问题) ```javascript Array.of(3); // [3] ``` --- ### 四、展开运算符(`...`) 8. **合并/添加元素** 展开运算符可用于数组合并或插入新元素[^3] ```javascript const arr1 = [1, 2]; const arr2 = [...arr1, 3]; // [1, 2, 3] ``` --- ### 五、迭代器方法 9. **`entries()`、`keys()`、`values()`** 返回数组的键、值或键值对的迭代器 ```javascript for (const [index, value] of ['a', 'b'].entries()) { console.log(index, value); // 0 'a', 1 'b' } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值