JS中对数组元素进行增、删、改、查的方法,以及其他方法

该文章已生成可运行项目,

总结一下 JS中提供的方法可以对数组元素进行增、删、改、查以及其他方法

一、增加元素

1、push()

push可接收任意数量的参数,把它们逐个添加至数组末尾,并且可以返回修改后数组的长度。

例子:

var arr = [];

var len = arr.push(1); //返回数组长度
		
console.log(arr); // [1]
console.log(len); // 1
		
len = arr.push(2,3);
		
console.log(arr); // [1,2,3]
console.log(len); // 3

2、unshift()

该方法与push()类似,也可接收任意数量的参数,只不过是将参数逐个添加至数组前端而已,同样返回新数组长度。

例子:

var arr = [1,2,3];
			
var len = arr.unshift(0);

console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4

len = arr.unshift(-2,-1);

console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(len);  // 6

3、concat()

该方法与push()方法有点类似,同样是将元素添加至数组末尾,只不过这个数组已经不是原来的那个数组了,而是其副本,所以concat()操作数组后会返回一个新的数组。

特性:

  1. 不传参数,返回当前数组副本
  2. 传递非数组参数,这些参数就会被直接添加到结果数组的末尾
  3. 传递数组参数,将数组每一个元素,添加新的数组中

例子:

var arr = [1,2,3];
			
var arr2 = arr.concat(4,[5,6]);
console.log(arr);  // [ 1, 2, 3]
console.log(arr2); // [ 1, 2, 3, 4, 5, 6]

4、splice()

前面的三个方法都具有很大局限性,因为不是添加到数组前就是数组后,而splice()它非常灵活,它可以添加元素到数组的任意位置。

它除了可以添加元素之外还具有删除和替换元素的功能。

splice()可以向数组指定位置添加任意数量的元素。

需要传入至少3个参数:splice(a, b, c, d, ......)

1、a 起始元素的位置

2、b 要删除的元素个数,从起始元素开始算

3、c后面的是要插入的元素,可以是数组

var arr = [1,2,3];
			
arr.splice(2, 0, 6, 7, 8);
console.log(arr); //[1, 2, 6, 7, 8, 3]

arr.splice(2, 3, 10, 20, 30);
console.log(arr); //[1, 2, 10, 20, 30, 3]

arr.splice(2, 3, [40, 50, 60]);
console.log(arr); //[1, 2, [40, 50, 60], 3]

二、删除元素

1、pop()

与push()方法配合使用可以构成后进先出的栈,该方法可从数组末尾删除最后一项并返回该项。

例子:

var arr = [1,2,3];
			
var item = arr.pop();
console.log(item);  // 3

console.log(arr);  // [1, 2]

2、shift()

与push()方法配合使用可以构成先进先出的队列,该方法可删除数组第一项并返回该项。

例子:

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

var item = arr.shift();

console.log(item); // [1]

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

3、slice()

该方法同concat()一样是返回一个新数组,不会影响原数组,只不过slice()是用来裁剪数组的,返回裁剪下来的数组。

slice()方法可以接受一或两个参数

1、一个参数,返回从该参数指定位置开始到当前数组末尾的所有项

2、两个参数,返回起始和结束位置之间的项,但不包括结束位置的项。

例子:

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

var arr3 = arr.slice(2);	

console.log(arr);  //[1, 2, 3, 4, 5]
console.log(arr3); //[3, 4, 5]
	
var arr2 = arr.slice(1, 3);

console.log(arr); //[1, 2, 3, 4, 5]
console.log(arr2); //[2, 3] 前包括后不包括

4、splice()

它除了可以添加元素之外还具有删除和替换元素的功能。

splice()可以向数组指定位置添加任意数量的元素。

需要传入至少3个参数:splice(a, b, c, d, ......)

1、a 起始元素的位置,从1开始;

2、b 要删除的元素个数,从起始元素开始算

3、c后面的是要插入的元素,可以是数组

var arr = [1,2,3];
			
arr.splice(2, 0, 6, 7, 8);
console.log(arr); //[1, 2, 6, 7, 8, 3]

arr.splice(2, 3, 10, 20, 30);
console.log(arr); //[1, 2, 10, 20, 30, 3]

arr.splice(2, 3, [40, 50, 60]);
console.log(arr); //[1, 2, [40, 50, 60], 3]

三、修改元素

使用splice() 修改数组元素。原理很简单,就是向指定位置插入任意数量的元素,且同时删除任意数量的元素。

例子:

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

arr.splice(2, 1, 10);

console.log(arr); //[1, 2, 10, 4, 5]

四、查找元素

indexOf() 和 lastIndexOf()

这两个方法都接收两个参数:

1、要查找的项

2、表示查找起点位置的索引。(可选的)

indexOf() 从数组的开头(位置0)开始向后查找。

lastIndexOf() 从数组的末尾开始向前查找。

两个方法,当找不到该元素时,都返回 -1 

例如:

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

var index = arr.indexOf(2);

console.log(index);  // 1

index = arr.indexOf(2, 0);
console.log(index);  // 1

index = arr.indexOf(2, 2);
console.log(index);  // 5

index = arr.indexOf(6);
console.log(index);  // -1

其它方法:

1.join()

该方法用来将数组转换为字符串,不改变原数组,返回转换后的字符串

var arr = [1,2,3,4,5,2]; 
console.log(arr.join("-")); //1-2-3-4-5-2
console.log(arr); //[1,2,3,4,5,2]

2.sort()

按ascii码排序,改变原数组,返回排序后的数组

var arr = [1,2,3,4,5,2]; 
console.log(arr.sort()); //[1, 2, 2, 3, 4, 5]
console.log(arr); //[1, 2, 2, 3, 4, 5]

3.reverse() 

用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组。、

var arr = [1,2,3,4,5,2]; 
console.log(arr.reverse()); // [2, 5, 4, 3, 2, 1]
console.log(arr); // [2, 5, 4, 3, 2, 1]

4.filter()

返回数组中满足条件的元素组成的新数组,原数组不变

var arr = [1,2,3,4,5,2]; 
var arr2 = arr.filter(function(current, index, array){
	console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
	return current < 4
})
console.log(arr) //[1, 2, 3, 4, 5, 2]
console.log(arr2) //[1, 2, 3, 2]

5.map() 

map() 方法来根据需求格式化原数组,返回格式化后的数组。原数组不变

var arr = [1,2,3,4,5,2]; 
var arr2 = arr.map(function(current, index, array){
	console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
	return "$"+current
})
console.log(arr) //[1, 2, 3, 4, 5, 2]
console.log(arr2) //["$1", "$2", "$3", "$4", "$5", "$2"]

6.every() 

 对数组的每一项都运行给定的函数,若每一项都返回 ture,则返回 true

var arr = [1,2,3,4,5,2]; 
var bool = arr.every(function(current, index, array){
	console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
	return current < 3
})
var bool2 = arr.every(function(current, index, array){
	console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
	return current < 6
})
console.log(bool) //false
console.log(bool2) //true

7.some()

对数组的每一项都运行给定的函数,若存在一项或多项返回 ture,否则返回 false

var arr = [1,2,3,4,5,2]; 
var bool = arr.some(function(current, index, array){
	console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
	return current < 3
})
var bool2 = arr.some(function(current, index, array){
	console.log("当前元素current="+current + "索引index="+index +"数组array="+array)
	return current < 0
})
console.log(bool) //true
console.log(bool2) //false

8.forEach()

遍历整个数组,不中断

var arr = [1,2,3,4,5,2]; 
var arr2 = [];
arr.forEach(function(item){
	arr2.push(item)
})
console.log(arr2) //[1, 2, 3, 4, 5, 2]
console.log(arr)  //[1, 2, 3, 4, 5, 2]

 

 

本文章已经生成可运行项目
<think>首先,用户的问题是关于JavaScript数组方法的记忆技巧。参考提供的引用内容: - 引用[1]:概述了JavaScript数组操作方法的重要性。 - 引用[2]:具体提到了pop()、shift()方法。 - 引用[3]:详细描述了截拼复排转的方法,包括unshift(), push(), shift(), pop(), splice(), slice(), concat(), reverse(), sort(), toString()。 - 引用[4]:提到了concat()方法的使用。 我需要基于这些引用,构建一个清晰、结构化的回答,帮助用户记忆这些方法。 回答结构: 1. **引言**:简要介绍JavaScript数组方法的重要性,并说明记忆技巧。 2. **分类讲解**:将方法分为(或其他相关类别),基于引用[3]的分类。 - :unshift(), push() - :shift(), pop() - :splice() - 截:slice() - 拼:concat() - 复:复制方法(slice(), concat()) - 排:reverse(), sort() - 转:toString() 引用[3]中提到了“截拼复排转”,我可以沿用这个框架。 3. **记忆技巧**:提供一些简单的口诀或关联来帮助记忆。 4. **示例代码**:使用代码片段展示每个方法的使用,确保语法正确。 5. **总结**:强调实践和常见场景。 6. **相关问题**:生成2-3个相关问题,基于系统指令。 系统指令要求: - 所有行内数学表达式用$...$,但这里不涉及数学,所以不需要。 - 独立公式用$$...$$,同样不适用。 - LaTeX语法正确:在代码块中使用正确语法。 - 使用中文回答。 - 生成相关问题:在末尾添加“§§相关问题§§”。 - 引用标识:在回答中自然地添加引用标识,如[^1]。 引用内容: - [^1]:来自引用[1],关于数组方法的重要性。 - [^2]:来自引用[2],pop()和shift()方法。 - [^3]:来自引用[3],详细方法列表。 - [^4]:来自引用[4],concat()方法。 在回答中引用这些。 用户问题:"请问JavaScript数组方法有哪些,如何记忆" 所以,核心是列出方法并提供记忆技巧。 基于引用[3],方法包括: - :前unshift(),后push() - :前shift(),后pop() - :splice() - 截:slice() - 拼:concat() - 复:复制(slice()或concat()) - 排:reverse(),sort() - 转:toString() 我需要覆盖这些,并解释如何记忆。 记忆技巧:可以创建简单的口诀,比如“前,前位截取,拼接复制,排序反转,转字符串”。 或者基于引用[3]的“截拼复排转”。 回答大纲: 1. **介绍**:JavaScript数组方法是核心操作,掌握它们能提高开发效率[^1]。 2. **方法分类与解释**: - **(添加元素)**: - unshift():在数组开头添加元素。 - push():在数组末尾添加元素。 - **元素)**: - shift():数组开头的元素。 - pop():数组末尾的元素。 - **修改元素)**: - splice():在指定位置除或添加元素。 - **截(截取元素)**: - slice():截取数组的一部分。 - **拼(拼接数组)**: - concat():拼接多个数组。 - **复(复制数组)**: - 使用slice()或concat()进行复制。 - **排(排序)**: - reverse():反转数组顺序。 - sort():排序数组元素。 - **转(转换)**: - toString():将数组转换为字符串。 3. **记忆技巧**:使用“截拼复排转”的口诀,每个字对应一类方法。或者,关联常见操作:添加时“前un后push”,除时“前shift后pop”,修改用splice,等等。 4. **代码示例**:提供每个方法的简单代码示例。 5. **总结**:实践这些方法,根据需求选择合适的方法[^1]。 6. **相关问题**:生成2-3个问题。 相关问题建议: 1. 如何高效地使用splice()方法进行数组操作? 2. JavaScript数组排序时需要注意什么? 3. 数组复制有哪些方法,各有什么优缺点? 确保回答真实可靠,基于引用。 最终输出格式: - 以中文回答。 - 包含代码块。 - 末尾添加“§§相关问题§§”。</think>### JavaScript数组方法及记忆技巧 JavaScript数组方法是日常开发中的核心操作,掌握它们能显著提升代码效率和可读性[^1]。这些方法可分为“”四大类,但为了更精细地记忆,我参考了“截拼复排转”的分类框架(源自引用[3]),并结合实际使用场景进行解释。下面我将逐步介绍这些方法,并提供简单的记忆口诀和代码示例,帮助您轻松掌握。 #### 1. **(添加元素)** - **方法**: - `unshift()`:在数组**开头**添加一个或多个元素,返回新长度。 - `push()`:在数组**末尾**添加一个或多个元素,返回新长度。 - **记忆口诀**: “前”——“前”对应`unshift()`(开头添加),“后”对应`push()`(末尾添加)。 - **示例代码**: ```javascript let arr = [2, 4]; arr.unshift(1); // 开头添加:arr变为[1, 2, 4] arr.push(5); // 末尾添加:arr变为[1, 2, 4, 5] ``` #### 2. **元素)** - **方法**: - `shift()`:数组**开头**的第一个元素,返回被除的元素。 - `pop()`:数组**末尾**的最后一个元素,返回被除的元素。 - **记忆口诀**: “前”——“前”对应`shift()`(开头除),“后”对应`pop()`(末尾除)。这类似于队列操作(FIFO)。 - **示例代码**: ```javascript let arr = ["red", "green", "blue"]; let firstItem = arr.shift(); // 除开头:firstItem为"red",arr变为["green", "blue"] let lastItem = arr.pop(); // 除末尾:lastItem为"blue",arr变为["green"] ``` #### 3. **修改元素)** - **方法**: - `splice()`:在指定位置**除、添加或替换**元素,返回被除的元素数组。 - 参数:`splice(起始索引, 除个数, 添加元素...)` - **记忆口诀**: “操作”——`splice()` 就像“手术刀”,可灵活修改任意位置。 - **示例代码**: ```javascript let arr = [2, 4, 6, 8]; arr.splice(1, 2, 3, 5); // 从索引1开始,除2个元素(4和6),添加3和5:arr变为[2, 3, 5, 8] ``` #### 4. **截(截取元素)** - **方法**: - `slice()`:截取数组的一部分(**不变原数组**),返回新数组。 - 参数:`slice(起始索引, 结束索引)`(包含起始,不包含结束)。 - **记忆口诀**: “截取片段”——`slice()` 类似于“切片”,只读不修改。 - **示例代码**: ```javascript let arr = [2, 4, 6, 8]; let subArr = arr.slice(1, 3); // 截取索引1到2:subArr为[4, 6],arr不变 ``` #### 5. **拼(拼接数组)** - **方法**: - `concat()`:拼接多个数组(**不变原数组**),返回新数组。 - **记忆口诀**: “拼接整合”——`concat()` 用于合并数组,类似“胶水”。 - **示例代码**: ```javascript let arr1 = [2, 4]; let arr2 = [6, 8]; let newArr = arr1.concat(arr2); // 拼接:newArr为[2, 4, 6, 8],arr1和arr2不变 ``` #### 6. **复(复制数组)** - **方法**: - 使用 `slice()` 或 `concat()` 进行浅拷贝(**不变原数组**)。 - **记忆口诀**: “复制副本”——`slice()` 和 `concat()` 都能创建新数组,避免原数组修改。 - **示例代码**: ```javascript let arr = [2, 4, 6]; let copy1 = arr.slice(); // 复制:copy1为[2, 4, 6] let copy2 = arr.concat(); // 复制:copy2为[2, 4, 6] ``` #### 7. **排(排序)** - **方法**: - `sort()`:对数组元素排序(默认按字符串Unicode排序)。 - `reverse()`:反转数组顺序。 - **记忆口诀**: “排序反转”——`sort()` 用于整理顺序,`reverse()` 用于倒置。 - **示例代码**: ```javascript let arr = [10, 2, 8]; arr.sort(); // 排序:arr变为[10, 2, 8](需注意默认行为!) arr.reverse(); // 反转:arr变为[8, 2, 10] ``` #### 8. **转(转换)** - **方法**: - `toString()`:将数组转换为字符串(**不变原数组**)。 - **记忆口诀**: “转字符串”——`toString()` 用于输出或日志。 - **示例代码**: ```javascript let arr = [2, 4, 6]; let str = arr.toString(); // 转换:str为"2,4,6" ``` ### 记忆技巧总结 - **口诀整合**: 记住“截拼复排转”八个字,每个字对应一类方法: - “”:unshift/push(前)。 - “”:shift/pop(前)。 - “”:splice(灵活修改)。 - “截”:slice(只读截取)。 - “拼”:concat(合并数组)。 - “复”:slice/concat(复制数组)。 - “排”:sort/reverse(排序反转)。 - “转”:toString(转字符串)。 - **实践建议**: 多写代码练习,例如从数组操作小项目开始。注意,这些方法中,`splice()`、`push()`等会修改数组,而`slice()`、`concat()`等不会修改数组(引用[3][^4])。在实际开发中,根据需求选择合适方法,例如高效时用`push/pop`,复杂修改时用`splice`[^1]。 ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值