JavaScript数组API总结

秒速五厘米 2023-10-04 16:07 55阅读 0赞

> **本文 首先对数组常用方法进行分类，具体使用方法会在分类后整理。**

## 分类： ##

#### 1.修改原数组的 ####

> **pop()、push()、reverse()、shift()、unshift()、sort()、splice()、**splite() …

#### 2.不会修改原数组的 ####

> **concat()、join()、slice()、**filter() 、reduce() …

> #### 3.es6新增的如map（）、find（）、findIndex（）、filter（）、every（）、some （）会不会改变原数组？？？ ####
> 
> 1、用forEach、map函数对**引用类型**的数组元素的**属性值**进行了修改，原数组也会跟着改变。即可能是数组、对象、函数（函数是引用类型）。
> 
> forEach里的回调函数对**引用类型**的数组元素的**属性**有修改操作。他们的特点大多需遍历数组
> 
> 2、如果你不希望原数组在上述情况下被改变的解决办法：  
>     对操作数组进行深拷贝。用拷贝的对象调用数组处理方法，原数组就不会改变了。

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70][] ##

## 二 详细介绍 ##

1.**删除数组末尾的元素 pop()**

var last = fruits.pop(); // remove Orange (from the end)
    // last: "Orange"; fruits: ["Apple", "Banana"];

2**删除数组最前面（头部）的元素 shift()**

var first = fruits.shift(); // remove Apple from the front
    // first: "Apple"; fruits: ["Banana"];

3 **添加元素到数组的末尾** push()

var newLength = fruits.push('Orange');
    // newLength:3; fruits: ["Apple", "Banana", "Orange"]

4**添加元素到数组的头部**

var newLength = fruits.unshift('Strawberry') // add to the front
    // ["Strawberry", "Banana"];

5 forEach() 遍历数组

// 遍历：forEach
    		let arr = ['张飞', '关羽', '赵云', '张辽', '曹仁', '许褚'];
    
    		// ECMAScript5：forEach
    		// arr.forEach( function (item, index, o) {
    		// 	// 第一个参数：item，代表当前项
    		// 	// 第二个参数：index，代表当前项索引值
    		// 	// 第三个参数：o，代表当前数组本身
    		// 	console.log( item, index, o );
    		// } );

6 find：遍历查找，返回第一个满足条件的元素

// find：遍历查找，返回第一个满足条件的元素
    		// let re = [6, 2, 7, 4, 5, 9].find( function (item, index, o) {
    
    		// 	// console.log( item, index, o );
    		// 	return item > 6;
    
    		// } );
    		// console.log( re );

7 findIndex：遍历查找，返回第一个满足条件的元素的索引值

// findIndex：遍历查找，返回第一个满足条件的元素的索引值
    		// let re = [6, 2, 7, 4, 5, 9].findIndex( function (item, index) {
    		// 	return item > 6;
    		// } );
    
    		// console.log( re );

8 some：遍历查找，如果有满足条件有一个就会返回true，否则就是false

// some：遍历查找，如果有满足条件有一个就会返回true，否则就是false
    		// let re = [6, 2, 7, 4, 5, 9].some( function (item, index) {
    
    		// 	return item > 6;
    
    		// } );
    		// console.log( re );
    
    // array.some() - 检查数组中是否有元素满足条件。某一元素为true，则为true，否则返回false
    // 用于检测数组中是否有满足条件的元素。
    // some如果遇到 true 就不再执行了。如果都为 false 返回false。不会改变原数组。
    // some 英语翻译为一些，所以some方法 只要其中一个为true 就会返回true的。some:一真即真
    let result1 = users.some(item => item.age > 20);
    console.info(result1); // true

9 every：遍历查找，每个元素都满足条件则返回true，否则就是false

// every：遍历查找，每个元素都满足条件则返回true，否则就是false
    		// let re = [6, 2, 7, 4, 5, 9].every( function (item, index) {
    		// 	return item > 6;
    		// } );
    		// console.log( re );
    // array.every() - 检查数组中是否所有元素都满足条件。某一个为false，则返回false，否则返回true
    // 用于检测数组中所有元素是否都满足该条件。
    // every如果遇到 false 就不在执行了。如果都为 true 返回true。不会改变原数组。
    // every 英语翻译为所有，所以every方法 必须所有都返回true才会返回true，哪怕有一个false，就会返回false。every:一假即假
    let result2 = users.every(item => item.age > 20);
    console.info(result2); // false

10 filter：遍历筛选，筛选出满足条件的元素返回新的数组

// filter：遍历筛选，筛选出满足条件的元素返回新的数组
    		// let re = [6, 2, 7, 4, 5, 9].filter( function (item, index) {
    
    		// 	return item > 6;
    
    		// } );
    
    		// console.log( re );

11 map：遍历数组，让每个元素执行一边回调函数把所有结果放到新数组返回

// map：遍历数组，让每个元素执行一边回调函数把所有结果放到新数组返回
    		let re = [6, 2, 7, 4, 5, 9].map( function (item, index) {
    
    			return item * item;
    
    		} );
    
    		console.log( re );
    // array.map() - 对数组中的每一个元素进行操作。返回每一个元素执行后的结果
    // 用于处理数组中的数据。产生新数组，不会改变原数组。foreach这是对原有数组进行操作，没有返回值。
    // map()方法创建了一个新数组，但新数组并不是在遍历完array1后才被赋值的，而是每遍历一次就得到一个值。
    // forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。
    // map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

12 sort：数组排序

// sort：数组排序
    		
    		// let arr = [23, 66, 123, 33, 7, 46];
    
    		// console.log( arr.sort() );
    		// let re = arr.sort( function (a, b) { return a - b; } );// 从小到大排序
    		// console.log( re );
    
    		// console.log( arr.sort( function (a, b) { return b - a; }) );

13 reverse：翻转数组顺序

//  reverse：翻转数组顺序
    		// let arr = ['a', 'b', 'c'];

14 join：用指定内容连接数组成为字符串

// join：用指定内容连接数组成为字符串
    		// let arr = ['张三', '李四', '尼古拉斯'];
    		// let re = arr.join('');

15 indexOf：查找首次出现的索引位置，找不到就会返回-1

lastIndexOf：查找尾次出现的索引位置，找不到就是-1

let arr = ['a', 'b', 'c', 'd', 'a', 'b', 'c'];
    		// 查找数组中是否具有c
    
    		// indexOf：查找首次出现的索引位置，找不到就会返回-1
    		// let re = arr.indexOf('m');
    		// lastIndexOf：查找尾次出现的索引位置，找不到就是-1
    		// let re = arr.lastIndexOf('m');

16 concat：拼接数组

// concat：拼接数组
    		let re = arr.concat([1, 2, 3], ['11', 22, 33], 'aa', 'bb', 'cc');
    
    		console.log( re )

17 Array.from();：把伪数组转换为真数组

// Array.from();：把伪数组转换为真数组
    		// 注意：要想使用这个方法，那么伪数组必须有length，否则转换不了
    		
    		// let o = {
    		// 	0 : 'aa',
    		// 	1 : 'bb',
    		// 	2 : 'cc',
    		// 	3 : 'dd',
    		// 	length : 4
    		// }
    
    		// // 把伪数组转换为真数组
    		// let arr = Array.from(o);
    
    		// console.log(arr);

18 reduce（）方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(prev, current, currentIndex, arr), initialValue)
    
    prev：函数传进来的初始值或上一次回调的返回值
    current：数组中当前处理的元素值
    currentIndex：当前元素索引
    arr：当前元素所属的数组本身
    initialValue：传给函数的初始值
    
           const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
           const sum = arr.reduce(function (prev, current) {
             return prev+current
           }, 0)
           console.log(sum) //55

19 slice（）方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

stringObject.slice(start,end)
    
    
    String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。
    
    还要注意的是，String.slice() 与 Array.slice() 相似。

![2021061020070692.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210610192920338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdoYW95aW5nYW5k,size_16,color_FFFFFF,t_70
[2021061020070692.png]: https://img-blog.csdnimg.cn/2021061020070692.png