JS数组的方法

本文介绍了JavaScript中数组的一系列操作方法,包括unshift/push用于在数组头尾添加元素,shift/pop用于删除头尾元素,splice用于在任意位置添加/删除元素,indexOf/lastIndexOf用于查找元素,以及转换成字符串、翻转、排序、截取、迭代器方法、累加、合并、判断是否为数组等。此外,还讨论了ES6中新增的Array.of(),Array.from(),find(),fill(),includes()和数组扁平化等特性。

1、添加

(1)unshift():将元素添加到数组的头部位置,返回新数组的的长度。

let array=[1,'元素'];

array.unshift('头部');

console.log(array);//[ '头部', 1, '元素' ]

(2)push():将元素添加到数组尾部,返回新数组的长度

array.push('尾部');

console.log(array);//[ '头部', 1, '元素','尾部']

2、删除

(1)shift():删除数组的头部元素,返回值是删除的元素

console.log(array.shift());//头部

console.log(array);//[1, '元素','尾部']

(2)pop():删除数组的尾部元素,返回值是删除的元素

console.log(array.pop());//尾部

console.log(array);//[1, '元素']

3、任意位置

splice(start,delnum,ele1,ele2):从start位置开始删除或者添加,删除个数为delnum,ele1,ele2为从start开始添加的元素。返回值是新数组,元素是删除的元素,会影响原数组。

添加:

let array=['头部',1,'元素','尾部'];

console.log(array.splice(1,0,1,2));//[]

console.log(array);//[ '头部', 1, 2, 1, '元素', '尾部' ]

删除并添加:

let array=['头部',1,'元素','尾部'];

console.log(array.splice(1,2,1,2));//[1,'元素']

console.log(array);//[ '头部', 1, 2,  '尾部' ]

4、查找

indexOf():从前往后查找,返回元素首次出现的位置,不存在则返回-1,NaN始终返回-1;

lastindexOf():从后往前遍历,返回值是元素最后一次出现的位置,不存在返回-1;

应用:

数组去重

function distinct (arr){

let arr1=[];

arr.forEach(function(ele){

if(arr1.indexOf(ele)==-1){

arr1.push(ele);

}

});

return arr1;

}

console.log(distinct([1,2,2,3,4,5,5]));//[ 1, 2, 3, 4, 5 ]

5、转换成字符串

String() 

toString()

join():拼接元素变成字符串,生成新的字符串,不会影响原数组

6、翻转

reverse():翻转数组中的元素,影响原数组

7、排序

sort():返回值是-1则交换位置,影响原数组

arr.sort(function((a,b){

return(a-b);

}))

8、截取

slice(start,end):不会影响原数组,支持负数,-1表示数组最后一个元素,不传参则默认截取整个数组,不存在交集则返回[]

9、数组迭代器方法:

(1).forEach(function(ele,index,arr){}):不会产生新数组,没有返回值;

(2).some(function(ele,index,arr){}):返回值是布尔值,只要有一个满足条件,返回true;

(3).every(function(ele,index,arr){}):返回值是布尔值,都满足才是true;

(4).map(function(ele,index,arr){}):有返回值,把每次的执行结果组合成新数组;

(5).filter(function(ele,index,arr){}):将数组中满足条件的元素过滤出来

应用:

数组去重

arr.filter(function(ele,index,arr){

return arr.indexOf(ele)=index;

})

10、累加

reduce(function(prev,next,index,arr){},defalvalue):

prev:上一次的返回值,初始值默认数组的第一个元素;

next:下一个值,初始值默认为数组的第二个元素;

index:next的下标;

arr:原数组;

defalvalue:设置后,prev=defalvalue,next=arr[0];

数组累加:

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

let sum=arr.reduce(functioon(prev,next){

return prev+next;//prev*next  累乘

});

console.log(sum);//10

11、合并

(1)concat():将多个数组合并为新数组

(2)... :扩展运算符(ES6)

12、判断是否为数组

isArray():返回布尔值

(另有:instanceOf操作符,判断左侧是否为右侧的实例化对象)

13、ES6:

(1)Array.of():将一组值转换为数组;

(2)Array.from():将一个类数组对象或者可以遍历的对象转换成数组;

条件:

该类数组对象必须具有llength属性;

该类数组对象的属性名必须为数值型或字符串型的数字

let arr=Array.from(arguments);

(3)copywithin(index,startindex,endindex)

index : 从index位置开始替换元素

stratindex:开始截取替换的元素的位置

endindex:结束截取替换的元素的位置

 (4)find():返回第一个满足条件的元素,不存在返回undefined

(5)fill():填充数组,会影响原数组

(6)includes():返回值是布尔值,相比indexOf,NaN不影响

(7)数组扁平化

.flat(Infinity):拉伸n层

<think>我们参考了多个引用中关于JavaScript数组方法的内容,现在需要给用户提供一份详细的JavaScript数组方法详解和使用指南。我们将按照常见数组方法分类,并给出说明、语法、参数、返回值、是否改变原数组以及示例。注意:根据引用内容,我们会特别关注slice、join、forEach、sort、splice等方法,同时补充其他常用方法。内容结构:1.数组方法分类(根据是否改变原数组)2.每个方法的详细说明(包括方法的功能、语法、参数、返回值、是否改变原数组、示例代码)注意:在回答中,行内代码用`code`表示,但根据要求,行内数学表达式才用$...$,这我们不需要数学表达式,所以全部用代码块或行内代码块。由于用户要求独立公式单独用$$...$$,但这没有,所以不用。我们将分为两部分:第一部分:不改变原数组方法(例如:slice,join,concat等)第二部分:改变原数组方法(例如:splice,push,pop,sort,reverse等)同时,我们也会提到一些ES6新增的方法(如map,filter,reduce等),尽管引用中没有详细提到,但为了完整性,我们会简要说明。但是要注意:用户引用的内容中提到了slice,join,forEach,sort,splice,因此这些是重点。开始组织内容:</think> 根据提供的引用内容,以下是 JavaScript 数组方法的详细解析与使用指南,涵盖核心方法的使用场景和注意事项: ### 一、核心数组方法详解 1. **`slice(start, end)`** - **功能**:截取数组中指定区间的元素生成新数组 - **参数**: `start`:起始索引(包含) `end`:结束索引(不包含) - **返回值**:新数组 - **是否改变原数组**:❌ ```javascript const arr = ["a", "b", "c", "d", "e"]; const res = arr.slice(1, 4); // ["b", "c", "d"] ``` 2. **`splice(index, howmany, item1, ...)`** - **功能**:删除/插入元素 - **参数**: `index`:起始位置 `howmany`:删除数量(0表示不删除) `item1...`:插入的新元素 - **返回值**:被删除元素组成的数组 - **是否改变原数组**:✅ ```javascript const arr = [1, 2, 3, 4]; arr.splice(1, 2, "x", "y"); // 删除2个元素后插入 // arr变为 [1, "x", "y", 4] ``` 3. **`forEach(callback)`** - **功能**:遍历数组元素 - **参数**:回调函数 `(value, index, array) => {}` - **返回值**:undefined - **是否改变原数组**:取决于回调操作 ```javascript const arr = [1, 2, 3]; arr.forEach((val, idx) => console.log(val * idx)); // 输出: 0, 2, 6 ``` 4. **`sort([compareFunction])`** - **功能**:数组排序(默认按字符编码排序) - **参数**:可选比较函数 `(a,b) => a-b`(升序) - **返回值**:排序后的数组 - **是否改变原数组**:✅ ```javascript const nums = [23, 65, 13]; nums.sort((a,b) => a - b); // [13, 23, 65] ``` 5. **`join(separator)`** - **功能**:将数组连接为字符串 - **参数**:分隔符(默认逗号) - **返回值**:字符串 - **是否改变原数组**:❌ ```javascript ["a", "b", "c"].join("-"); // "a-b-c" ``` ### 二、特殊技巧应用 1. **类数组转换(arguments→数组)** ```javascript function convert() { return [].slice.call(arguments); } convert(1, 2, 3); // [1, 2, 3] ``` 2. **ES6简化版数组转换** ```javascript const slice = Function.call.bind(Array.prototype.slice); slice(arguments); // 直接转换类数组对象 ``` ### 三、方法特性对比表 | 方法 | 改变原数组 | 返回值类型 | 时间复杂度 | |------------|------------|----------------|------------| | `slice()` | ❌ | 新数组 | O(n) | | `splice()` | ✅ | 被删除元素数组 | O(n) | | `sort()` | ✅ | 排序后数组 | O(n log n) | | `join()` | ❌ | 字符串 | O(n) | ### 四、最佳实践建议 1. **纯函数优先**:优先使用不改变原数组方法(如 `slice`/`map`/`filter`) 2. **性能敏感场景**:避免在循环中连续调用 `splice` 3. **复杂排序**:始终为 `sort()` 提供比较函数,避免字符编码排序问题[^3] 4. **大数据处理**:`forEach` 比传统 `for` 循环更易维护但性能略低[^2] --- ### 相关问题 1. `Array.prototype.map()` 和 `forEach()` 的主要区别是什么? 2. 如何实现数组合并去重操作? 3. `reduce()` 方法的高级应用场景有哪些? 4. ES6 新增的数组扩展方法有哪些优势? 5. 如何用数组方法实现浅拷贝与深拷贝? [^1]: 引用JS数组方法大全 [^2]: 引用JS数组方法(全且详细) [^3]: 引用JS数组数组方法的使用 [^4]: 引用Array.splice详解
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值