es6 数组

本文详细介绍了JavaScript数组方法fill, find及findIndex的功能与用法。fill用于填充数组元素,find与findIndex则用于查找满足条件的首个元素及其索引。

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

1. fill()

arr.fill(value, [start], [end])

fill()方法向数组的开始位置到结束位置填充一个静态值

参数:

value: 要填充的值

start: 可选。开始位置,默认为0

end: 可选。结束位置,默认为length-1

返回: 被改变的数组

注意:

fill() 方法会改变数组本身并返回它,而不是返回一个copy

fill() 方法并不强制第一个参数必须是数组,它可以用在其他对象上


2. find()

arr.find(callback[, thisArg])

find()方法返回数组中满足某个条件的一个值

参数:

callback: 对数组元素执行的测试函数,该函数接受3个参数:value,index,array,和map()一类的方法相同

thisArg: 可选。callback执行时的this指向的对象(一般不用)

返回: 满足测试函数的第一个值,若没有满足测试函数的元素,返回undefined

function mergeBarcodes(barcodes){
let result = [];
for(let i=0;i<barcodes.length;i++){
let existItem = result.find(function(item){
return item.barcode === barcodes[i].barcode;
});
console.log(existItem);
if(existItem){
existItem.amount+=barcodes[i].amount;
}else{
result.push(Object.assign({},barcodes[i],{
amount : barcodes[i].amount
}));
}
}
return result;
}

       let tags = ['ITEM0','ITEM3-2','ITEM3-2.5','ITEM0','ITEM1'];


3. findIndex()

arr.find(callback[, thisArg])

类似find(),不同的是它返回元素的索引


<think>好的,我现在需要向用户介绍ES6数组的相关知识。首先,我得回忆一下ES6数组新增的特性,确保自己对这些内容有正确的理解。 用户可能想知道ES6数组有哪些新方法或者语法改进。常见的ES6数组特性包括扩展运算符、Array.from()、Array.of()、find()和findIndex()、fill()、includes(),还有数组实例的entries()、keys()和values()方法,以及flat()和flatMap(),不过flat()和flatMap()是ES2019引入的,可能需要注明。 我需要先整理这些方法的用途和示例。例如,扩展运算符可以用于复制数组、合并数组,或者将类数组对象转为数组。Array.from()用于将类似数组的对象(比如arguments、NodeList)或者可迭代对象(比如Set、Map)转为真正的数组。Array.of()解决了new Array()构造器参数不同导致的问题,比如Array.of(3)会创建一个包含元素3的数组,而new Array(3)创建的是长度为3的空数组。 接下来是find()和findIndex(),这两个方法用于查找符合条件的元素或索引,比之前的indexOf()更灵活,因为可以使用回调函数。fill()方法可以数组,这在初始化数组时很有用。includes()方法用来判断数组是否包含某个元素,解决了indexOf()中NaN无法识别的问题。 然后是entries()、keys()和values()这些迭代器方法,可以用于遍历数组的键值对。flat()用于数组扁平化,flatMap()则是先对每个元素执行函数处理,再将结果扁平化。 在结构上,我应该先分点介绍每个特性,给出简洁的示例代码,并说明它们的用途和优势。需要注意使用正确的术语,同时用通俗易懂的语言解释,避免过于技术化。另外,要检查是否有遗漏的重要方法,比如copyWithin(),但这个方法可能使用较少,可以简要提及。 还要注意区分ES6和后续版本新增的方法,比如flat()属于ES2019,如果用户特别问的是ES6,可能需要说明,但通常在广义上ES6之后的新特性也会被包含在ES6的讨论中,所以最好还是提到,并标注版本。 最后,确保回答的结构清晰,每个部分有明确的标题和示例,帮助用户逐步理解。同时,按照系统指令,数学公式要用$...$,但这里可能用不上,主要注意代码块的使用和中文解释。</think>ES6(ECMAScript 2015)为 JavaScript 数组新增了许多实用特性,以下是核心内容整理: ### 一、扩展运算符 `...` 用途:展开数组元素 ```javascript // 合并数组 const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4]; // [1,2,3,4] // 函数传参 Math.max(...[5, 8, 2]); // 8 ``` ### 二、静态方法 1. **Array.from()** 将类数组对象转为真实数组 ```javascript Array.from(document.querySelectorAll('div')); // NodeList → 数组 Array.from('hello'); // ['h','e','l','l','o'] ``` 2. **Array.of()** 解决 `new Array(3)` 的歧义问题 ```javascript Array.of(3); // [3] Array.of(1,2,3); // [1,2,3] ``` ### 三、实例方法 1. **find() & findIndex()** 查找首个符合条件的元素 ```javascript [1, 5, 10].find(x => x > 8); // 10 [1, 5, 10].findIndex(x => x > 8); // 2 ``` 2. **fill()** 数组 ```javascript new Array(3).fill(0); // [0,0,0] [1,2,3].fill('a', 1); // [1,'a','a'] ``` 3. **includes()** 检测元素存在(支持NaN) ```javascript [1, NaN].includes(NaN); // true [1,2].includes(3); // false ``` 4. **遍历方法** 生成迭代器: ```javascript for (let [index, value] of ['a','b'].entries()) { console.log(index, value); // 0 'a' → 1 'b' } ``` ### 四、ES2019新增 1. **flat()** 数组扁平化 ```javascript [1, [2, [3]]].flat(2); // [1,2,3] ``` 2. **flatMap()** 映射后扁平化 ```javascript [2, 3].flatMap(x => [x, x*2]); // [2,4,3,6] ``` ### ▎对比传统方法优势 - **更直观**:`Array.of(3)` 比 `new Array(3)` 更符合直觉 - **更强搜索**:`find()` 支持回调,`includes()` 识别NaN - **简化操作**:扩展运算符替代 `concat()`,`flat()` 替代递归展开 示例:删除重复元素 ```javascript // ES6方式 [...new Set([1,2,2,3])]; // [1,2,3] ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值