js数组方法(完整版)

push

  • 作用:向数组末尾追加项(可以多项,多项直接用逗号分隔)
  • 参数:需要添加到数组的项
  • 返回值:数组追加项之后的长度
  • 原数组是否改变:是
var ary1 = [1, 2, 3];
var r1 = ary1.push(4, 5);
console.log(ary1, r1);

pop

  • 作用:删除数组末尾一项
  • 参数:无
  • 返回值:被删除的数组项
  • 原数组是否改变:是
var ary2 = [1, 2, 4];
var r2 = ary2.pop();
console.log(ary2, r2);

unshift

  • 作用:向数组开头添加项
  • 参数:需要追加到开头的项
  • 返回值:追加完内容后的数组新长度
  • 原数组是否改变:是
var ary3 = [1, 2, 3];
var r3 = ary3.unshift(4, 5);
console.log(ary3, r3);

shift

  • 作用:删除数组起始一项
  • 参数:无
  • 返回值:被删除的项
  • 原数组是否改变:是
var ary4 = [1, 2, 3];
var r4 = ary4.shift();
console.log(ary4, r4);

splice(n,m)

  • 作用:从索引为 n 开始删除 m 个
  • 参数:起始索引 n,要删除的个数
  • 返回值:由删除的项组成新数组
  • 原数组是否改变:是
var ary5 = [1, 2, 3];
var r5 = ary5.splice(1, 2);
console.log(ary5, r5);

splice(n,m,x)

  • 作用:从索引 n 开始删除 m 个,用 x 替换删除的部分
  • 参数:起始索引,删除个数,用来替换的数组项x
  • 返回值:被删除的项组成的新数组
  • 原数组是否改变:是
var ary6 = [1, 2, 3];
var r6 = ary6.splice(1, 1, 5);
console.log(ary6, r6);

slice(n,m)

  • 作用:从索引 n 开始复制到索引 m(不包括m)
  • 参数:起始索引 n,终点索引 m; 注意:m 不写就是复制到最后一项,如果 n 和 m 都不写也是从开头复制到末尾
  • 返回值:复制的项组成的新数组
  • 原数组是否改变:否
var ary8 = [1, 2, 4, 5];
var r8 = ary8.slice(1, 3);
var r9 = ary8.slice(1);
var r10 = ary8.slice();
var r11 = ary.slice(0);
console.log(r8);
console.log(r9);
console.log(r10);
console.log(r11);

concat()

  • 作用:将数组拼接起来
  • 参数:需要拼接的数组或者数组项
  • 返回值:拼接过后的新数组
  • 原数组是否改变:否
var ary12 = [1, 3, 5, 7];
var r12 = ary12.concat([9, 11]); // 参数传递一个数组
console.log(ary12, r12);

var r13 = ary12.concat(9, 11); // 参数传递数组项
console.log(ary12, r13);

var r14 = ary12.concat(); // 一个参数不传相当于把数组复制一份
console.log(r14);
console.log(r14 === ary12); // false

join()

  • 作用:根据参数指定的分隔符把数组连接成字符串
  • 参数:分隔符,不指定时默认空字符串
  • 返回值:拼接过后的字符串
  • 原数组是否改变:否
var ary15 = [1, 3, 5, 7];
var str15 = ary15.join('+');
console.log(ary15, str15);

toString()

  • 作用:把数组转换成字符串
  • 参数:无
  • 返回值:字符串
  • 原数组是否改变:否
var ary16 = [1, 2, 5, 8];
var str16 = ary16.toString();
console.log(ary16, str16);

indexOf()

  • 作用:数组项 x 在数组中第一次出现的索引位置
  • 参数:数组项x
  • 返回值:如果数组中存在该项,就返回该项第一次出现的索引,如果不存在,则返回 -1
  • 原数组是否改变:否
var ary17 = [1, 3, 5, 7];
var r17 = ary17.indexOf(3);
console.log(ary17, r17);

var r18= ary17.indexOf('bingo');
console.log(ary17, r18); // -1

lastIndexOf()

  • 作用:数组项 x 在数组中最后一次出现的索引位置
  • 参数:数组项x
  • 返回值:如果数组中存在该项,就返回该项最后一次出现的索引,如果不存在,则返回 -1
  • 原数组是否改变:否
var ary19 = [1, 3, 5, 7, 3];
var r19 = ary19.lastIndexOf(3);
console.log(ary19, r19);

var r20 = ary19.lastIndexOf('bingo');
console.log(ary19, r20); // -1

sort

  • 作用:给数组按照升序或者降序排列
  • 参数:回调函数
  • 返回值:如果回调函数 return a - b 就返回升序排列后的数组
  • 如果回调函数 return b - a,返回降序排列后的数组;
  • 原数组是否改变:是
//sort(function (a, b) {
//return a - b
//})

var ary21 = [1, 5, 2, 6, 4];
var r21 = ary21.sort(function (a, b) {
  return a - b
});
var r22 = ary21.sort(function (a, b) {
  return b - a;
});
console.log(ary21, r21, r22);

reverse()

  • 作用:让数组翻转过来排列
  • 参数:无
  • 返回值:翻转过后的数组
  • 原数组是否改变:是
var re = ary21.reverse();
console.log(ary21, re);

forEach

  • 作用:遍历数组
  • 参数:回调函数(回调函数的参数:value是遍历时每一个数组项,index 是这个数组项的索引,array数组本身)
  • 返回值:无
  • 原数组是否改变:否
<script>
  var arr = [1,2,3]
  arr.forEach(function(value,index,array){
                       元素   索引  本身
  })
</script>

map

  • 作用:将原数组映射成一个新数组
  • 参数:回调函数(回调函数的参数同 forEach)
  • 返回值:由回调函数的返回值组成的新数组
  • 原数组是否改变:否
const array1 = [1, 4, 9, 16];

const map1 = array1.map(function(value){
	//...
});

console.log(map1);

filter

        返回一个新数组 value, index, array

var arr = [12,34,5,67,86,67]
var newArr = arr.filter(function(value,index){
  return value%2 === 0
})

some

        value, index, array

        1. filter 查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来

        2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

        3. every用于检测数组所有的元素是否都符合指定条件,如果全部满足条件,则返回true,只要一个不满足,就会直接返回false

var arr = ['yellow' , 'green' , 'pink']
        var flag = arr.some(function(value){
            return value == 'green'
        })
        console.log(flag)  //true

reduce

        reduce()方法接收一个函数作为累加器,数组中的每个值,(从左到右)开始缩减,最终计算为一个值

arr.reduce(function(prev,cur,index,arr){
...
}, init);

        arr: 表示原数组;

        prev: 表示上一次调用回调时的返回值,或者初始值 init;

        cur: 表示当前正在处理的数组元素;

        index: 表示当前正在处理的数组元素的索引,若提供 init 值,则索引为0,否则索引为1;

        init: 表示初始值

let arr = [3,4,56,8,5]
//求和
let sum = arr.reduce((pre,cur)=>{
  return pre+cur
},0)
//取最大值
let maxNum = arr.reduce((pre,cur)={
  returu Math.max(pre.cur)
})
//去重
let arr.reduce((pre,cur)=>{
  pre.indexOf(cur) < 0 && pre.push(cur)
  return pre
},[])

<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详解
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值