JS中数组的常用方法

素颜马尾好姑娘i 2022-10-30 09:24 601阅读 0赞

# JavaScript中数组的常用方法 #

### 方法目录 ###

*  JavaScript中数组的常用方法
 *   *   *  1.\`push()\` 数组末尾添加元素
         *  2.\`unshit()\` 数组开始位置添加元素
         *  3.\`shift()\` 删除数组中的第一项
         *  4.\`pop()\` 删除数组中的最后一项
         *  5.\`splice()\` 数组的增删改
         *  6.\`slice()\` 查找两个索引中间的内容返回到新数组
         *  7.\`concat()\` 数组拼接
         *  8.\`toString()\` 数组转换为字符串
         *  9.\`join()\` 数组转换为字符串
         *  10.\`indexOf()/lastindexOf()\` 检测出某一项出现在数组中的第一次索引和最后一次的索引
         *  11.\`reverse()\` 反转数组
         *  12.\`sort()\` 数组排序
         *  13.\`forEach()\` 遍历数组执行回调函数没有返回值
         *  14.\`includes()\` 判断数组是否包含某一项的值
         *  15.\`map()\` 遍历数组执行回调函数返回新数组
         *  16.\`some()\` 所有元素进行判断，只要有一个满足就返回true
         *  17.\`find()\` 返回数组中满足函数的第一个元素值
         *  18.\`flat()\` 按照一个指定的深度遍历数组，最好是infinity
         *  19.\`fill()\` 用一个固定的值来填充数组，每个都一样
         *  20.\`filter()\` 判断数组满足条件的元素，返回新数组
         *  21.\`reduce()\` 对每一个元素执行函数，汇总成一个数
         *  22.\`from()\` 让一个类数组转化为数组
         *  23.\`isArray()\` 判断传递的参数是不是数组
         *  24.\`every() \` 所有元素进行判断都满足了，返回true
         *  25.\`findIndex()\` 返回数组中满足函数的第一个元素的索引，都不满足返回-1
         *  26.\`of()\` 创建数组
     *  JS字符串常用方法入口

**使用以下方法时，原数组发生改变**

### 1.`push()` 数组末尾添加元素 ###

可以传入多个参数，返回新增数组的长度。

### 2.`unshit()` 数组开始位置添加元素 ###

可以传入多个参数,返回新增数组的长度

### 3.`shift()` 删除数组中的第一项 ###

返回删除的元素

### 4.`pop()` 删除数组中的最后一项 ###

返回删除的元素

### 5.`splice()` 数组的增删改 ###

*  参数传递如下：

\[删除：（n,m） 都是数字，从索引n开始删除m个元素（m不写，直接删除到末尾）\]  
\[修改：(n,m,x) 从索引n开始删除m个元素，用x占据删除的部分\]  
\[增加：(n,0,x) 从索引n开始，一个都不删除，把x放到索引n的前面\]

**把删除的元素用新的数组储存起来返回**

**使用以下方法时，原数组不会发生改变**

### 6.`slice()` 查找两个索引中间的内容返回到新数组 ###

\[(n,m) n和m都是数字，从n开始找到m，不包含m （m不写就是直接找到尾部） \]  
\[把找到的元素以一个新数组的形式返回 \]

### 7.`concat()` 数组拼接 ###

\[ 可以传入多个任意类型的值\]  
\[ 返回转换后的字符串，每一项使用逗号分隔（原数组不变）\]

### 8.`toString()` 数组转换为字符串 ###

\[ 把数组转换成字符串，没有参数\]  
\[ 返回转换后的字符串，每一项用逗号隔开，（原数组不变）\]

### 9.`join()` 数组转换为字符串 ###

\[传入指定的分隔符作为参数（字符串格式） \]  
\[返回转换后的字符串（原来数组不变）\]

### 10.`indexOf()/lastindexOf()` 检测出某一项出现在数组中的第一次索引和最后一次的索引 ###

\[ 参数：要检查的内容\]  
\[ 返回这一项出现的位置索引值，如果数组中没有这一项，返回-1\]

### 11.`reverse()` 反转数组 ###

\[将数组倒过来排列，返回排列后的新数组，原数组发生改变\]

### 12.`sort()` 数组排序 ###

\[ 可以用来对数组中的元素进行排序，影响原来数组，按照Unicode编码进行排序\]  
\[也可以指定排序规则：可以在该方法中添加一个回调函数来指定排序规则，回调函数中需要两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数，浏览器会更具回调函数的返回值来决定元素的排序；升序排列：返回a-b；降序排列：返回b-a\]

### 13.`forEach()` 遍历数组执行回调函数没有返回值 ###

\[遍历数组中的每一项，参数为一个回调函数 (item,index)=>\{ console.log(item,index) \} \]  
\[ 原来数组保持不变\]

### 14.`includes()` 判断数组是否包含某一项的值 ###

\[ 用来判断一个数组是否包含一个指定的值，包含返回true，不包含返回false\]  
\[参数：valueToFind:需要查找的元素值（必须）；fromIndex：从该索引处开始查找元素，该值如果是负值，则按升序从数组尾部开始查询，默认为0\]

### 15.`map()` 遍历数组执行回调函数返回新数组 ###

map() 方法返回一个新数组，数组中的元素为，原始数组元素调用函数处理后的值。  
map()方法按照原始数组元素的顺序依次处理元素。  
**注：map()不会对空数组进行检测；map()不会改变原始数组**

参数：
    
    function(currentValue,index,arr){}	回调函数，数组中的每个元素都会执行这个函数，必须
    
    		currentValue	当前元素的值，必须
    
    		index，当前元素的索引，可选
    
    		arr，	当前元素属于的数组对象，可选
    
    thisValue	对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
     					如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
    
    返回值： 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

array.map(function(currentValue,index,arr), thisValue)

### 16.`some()` 所有元素进行判断，只要有一个满足就返回true ###

some() 方法用于检测数组中的元素是否满足指定条件  
some() 方法会一次执行数组 中的每个元素，  
如果有一个元素满足条件，则表达式返回true，剩余的元素不会再执行检测  
如果没有满足条件的元素，则返回false  
**注：some() 不会对空数组进行检测；some() 不改变原数组**

array.some(function(currentValue,index,arr),thisValue)

### 17.`find()` 返回数组中满足函数的第一个元素值 ###

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined

参数：
    callback(element,index,arr){}	在数组每一项上执行的函数，接收3个参数：
    			element	当前遍历到的元素 	必须
    			index		当前遍历到的索引	可选
    			arr			数组本身					可选
    thisArg		执行回调时用作this的对象

arr.find(callback, thisArg)

### 18.`flat()` 按照一个指定的深度遍历数组，最好是infinity ###

flat() 方法会按照一个可指定的深度地柜遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

参数：
    depth	指定要提取嵌套数组的结构深度，默认值为1	可选
    					Infinity	展开任意深度的嵌套数组
    返回值：
    	一个包含将，数组与子数组中所有元素的新数组。

var newArray = arr.flat(depth)

### 19.`fill()` 用一个固定的值来填充数组，每个都一样 ###

> fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素
> 
> 参数：
> 
>  value 用来填充数组元素的值
> 
>  start 起始索引，默认值为0 可选
> 
>  end 终止索引，默认只为array.length
> 
> 返回值：修改后的数组

### 20.`filter()` 判断数组满足条件的元素，返回新数组 ###

filter() 方法穿件一个新数组，其包含通过所提供函数实现的测试的所有元素

参数：
    callback(element,index,array)	用来测试数组中的每个元素的函数。返回true表示通过测试，保留该元素，false则不保留。接3个参数
    			element 		数组中当前正在处理的元素。 	
    			index可选 		正在处理的元素在数组中的索引。 	
    			array可选 		调用了 filter 的数组本身。
    thisArg可选 	执行 callback 时，用于 this 的值。

返回值： 一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

var newArray = arr.filter(callback(element, index, array){ }, thisArg)
    
     //示例： 
    
    function isBigEnough(element) {   
    
    	return element >= 10; 
    
    } 
    
    var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]

### 21.`reduce()` 对每一个元素执行函数，汇总成一个数 ###

reduce() 方法对数组中的每个元素执行一个提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

参数：
     callback(accumulator,currentValue,currentIndex,array) 	执行数组中每个值的函数，包含四个参数： 	
    
    					accumulator 		累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue 
    
    					currentValue 		数组中正在处理的元素。 	
    
    					currentIndex可选 		数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，																		否则为1。 	
    
    					array可选 		调用reduce()的数组 
    
    initialValue可选 	作为第一次调用 callback函数时的第一个参数的值。如果没有提供初始值，则将使用数组中的														第一个元素。在没有初始值的空数组上调用 reduce 将报错。

返回值： 函数累计处理的结果

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue]) 
    
    //示例： 
    
    var sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {   
    
    	return accumulator + currentValue;
    
     }, 0); // 和为 6

### 22.`from()` 让一个类数组转化为数组 ###

> Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例
> 
> 参数：
> 
>  arrayLike 想要转换成数组的伪数组对象或可迭代对象。
> 
>  mapFn (可选参数) 如果指定了该参数，新数组中的每个元素会执行该回调函数。
> 
>  thisArg (可选参数) 可选参数，执行回调函数 mapFn 时 this 对象。
> 
> 返回值： 一个新的数组实例

Array.from(arrayLike, mapFn, thisArg)

### 23.`isArray()` 判断传递的参数是不是数组 ###

> isArray() 用于确定传递的值是否是一个数组
> 
> 参数：
> 
>  obj 需要检测的值。
> 
> 返回值： 如果对象是 Array，则为true; 否则为false。

//示例： 
    
    Array.isArray([]);//true 
    
    Array.isArray([1]);//true 
    
    Array.isArray(new Array());//true

### 24.`every()` 所有元素进行判断都满足了，返回true ###

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。 注意：若收到一个空数组，此法在一切情况下都会返回 true。

参数： callback 	用来测试每个元素的函数，它可以接收三个参数： 	
    
    					element 		于测试的当前值。 	
    
    					index可选 		用于测试的当前值的索引。 	
    
    					array可选 		调用 every 的当前数组。 
    
    		thisArg 	执行 callback 时使用的 this 值。

返回值 ：如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

arr.every(callback, thisArg) 
    
     function isBigEnough(element, index, array) {   
    
    	return element >= 10; 
    
    } 
    
    [12, 5, 8, 130, 44].every(isBigEnough);   // false 
    
    [12, 54, 18, 130, 44].every(isBigEnough); // true

### 25.`findIndex()` 返回数组中满足函数的第一个元素的索引，都不满足返回-1 ###

参数： callback 	针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数: 	
    				element 		当前元素。 	
    				index 		当前元素的索引。 	
    				array 		调用findIndex的数组

返回值： 数组中通过提供测试函数的第一个元素的索引。否则，返回-1

arr.findIndex(callback[, thisArg])
    
    function isPrime(element, index, array) {   
    
    	var start = 2; 
    
     	while (start <= Math.sqrt(element)) {     
    
    	if (element % start++ < 1) {       
    
    	return false;    
    
    		}  
    	}  
        return element > 1; 
    } 
    console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found 
    console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

### 26.`of()` 创建数组 ###

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

参数： elementN 任意个参数，将按顺序成为返回数组中的元素

返回值： 新的数组实例

当调用 new Array( )构造器时，根据传入参数的类型与数量的不同，实际上会导致一些不同的结果

let arr=new Array(2)//创建长度为2的数组  
let arr=new Array(1,2)//创建一个长度为2并且值为1，2的数组

当使用单个数值参数来调用 Array 构造器时，数组的长度属性会被设置为该参数。 如果使用多个参数(无论是否为数值类型)来调用，这些参数也会成为目标数组的项。数组的这种行为既混乱又有风险，因为有时可能不会留意所传参数的类型。

Array.of( )方法总会创建一个包含所有传入参数的数组，而不管参数的数量与类型：

let items = Array.of(1, 2);
    console.log(items.length); // 2
    console.log(items[0]); // 1
    console.log(items[1]); // 2
    items = Array.of(2);
    console.log(items.length); // 1
    console.log(items[0]); // 2

## JS字符串常用方法入口 ##

[JavaScript中字符串的常用方法][JavaScript]

[JavaScript]: https://blog.csdn.net/ZS74520/article/details/113838182