JS操作数组的常用API

曾经终败给现在 2022-11-19 12:40 166阅读 0赞

**目录**

concat()方法

join()方法

slice()方法

splice()方法

pop()方法

push()方法

shift()方法

unshift()方法

reverse()方法

sort()方法

toString()方法

valueOf()方法

indexOf()方法

lastIndexOf()方法

includes()方法

every()方法

some() 方法

filter() 方法

forEach()方法

map() 方法

reduce() 方法

flat()方法

--------------------

### **concat()方法** ###

用于把两个或多个数组合并成一个数组，数组的索引会按照合并数组的顺序重新排序。**返回一个新数组**，是将参数添加到原数组中构成的。不会改变原数组。

//concat()方法。用于把两个或多个数组合并成一个数组，数组的索引会按照合并数组的顺序重新排序
    var myArray2 = [3, 5, 2];
    var myOtherArray = [1,9,6];
    console.log(myArray2.concat(myOtherArray));	//[3, 5, 2, 1, 9, 6]
    console.log(myArray2);			//[3, 5, 2]
    console.log(myOtherArray);	//[1, 9, 6]

### **join()方法** ###

主要用于将数组内的元素使用字符拼接成一个字符串，不传拼接字符参数，默认使用逗号。**返回一个字符串**，不会改变原数组。

//join()方法。主要用于将数组内的元素使用字符拼接成一个字符串，可传拼接字符参数
    var myArray3 = ['hello', 'world', '!', 10, 200];
    console.log(myArray3.join()); //"hello,world,!,10,200"
    //以空格或！！为拼接字符，或无拼接字符
    console.log(myArray3.join(" "));	//"hello world ! 10 200"
    console.log(myArray3.join("!!"));	//"hello!!world!!!!!10!!200"
    console.log(myArray3.join(""));		//"helloworld!10200"
    console.log(myArray3);	//["hello", "world", "!", 10, 200]

### **slice()方法** ###

能够基于当前数组中的一或多个项创建一个新数组，slice()方法可以接受一或两个参数，即要返回项的起始和结束位置，在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项，例如slice(3)，则从下标为3的元素开始提取。如果有两个参数，该方法**返回起始和结束位置之间的项，但不包括结束位置的项**。不会改变原数组。

//slice()方法。用于从数组中提取所需要的元素，传入的参数是提取元素开始位置
    var myArray6 = [1, 2, 3, 4, 5, 6];
    console.log(myArray6.slice(1, 4));		//可传1或2个参数，不传参就提取完整的数组[2, 3, 4]
    console.log(myArray6);	//[1, 2, 3, 4, 5, 6]

### **splice()方法** ###

splice()方法需要传入2个以上的参数，第一个参数是索引开始的位置，第二个参数是删除元素的数量，第三个参数是在开始索引的位置插入的元素（可以为多个元素）。

*  删除：可以删除任意数量的项，指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0, 2)会删除数组中的前两项
 *  插入：可以向指定位置插入任意数量的项，提供3个参数：起始位置、0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入任意多个项。例如，splice(2, 0, 'a', 'b')会从当前数组的位置2开始插入字符串"a"和"b"
 *  替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice(2, 1, 'a', 'b')会删除当前数组位置2的项，然后再从位置2开始插入字符串"a"和"b"

splice()方法始终都会**返回一个数组，该数组中包含从原始数组中删除的项（如果没有删除任何项，则返回一个空数组）**。改变原数组。

//splice()方法。splice()方法需要传2个以上的参数，第一个参数是索引开始的位置，第二个参数是删除元素的数量，第三个参数是在开始索引的位置插入的元素（可以为多个元素）
    var myArray7 = [0, 7, 8, 5];
    console.log(myArray7.splice(1, 2, 1, 2, 3, 4))	//[7, 8]
    console.log(myArray7);	//[0, 1, 2, 3, 4, 5]

### **pop()方法** ###

删除原数组最后一项，并**返回删除元素的值；如果数组为空则返回undefined**。改变原数组。

### **push()方法** ###

将参数添加到原数组末尾，并**返回数组的长度**。改变原数组。

//pop()方法。删除数组中最后一个元素，push()向数组的末尾添加一个或多个元素
    var myArray4 = [];
    myArray4.push(5);				//[5]
    myArray4.push(2, 8, 45, 32);	//[5, 2, 8, 45, 32]
    console.log(myArray4.push(9));	//6
    console.log(myArray4);          //[5, 2, 8, 45, 32, 9]
    console.log(myArray4.pop());	//9				
    console.log(myArray4);	        //[5, 2, 8, 45, 32]
    myArray4.pop(8);
    console.log(myArray4);	        //无法传参，传参没用[5, 2, 8, 45]

### **shift()方法** ###

删除原数组第一项，并**返回删除元素的值；如果数组为空则返回undefined**。改变原数组。

//shift()方法。删除原数组第一项，并返回删除元素的值
    var myArray8 = [1, 2, 3, 4];
    var myArray9 = myArray8.shift();
    console.log(myArray8);	//[2, 3, 4]
    console.log(myArray9);	//1

### **unshift()方法** ###

将参数添加到原数组开头，并**返回数组的长度**。改变原数组。

//unshift()方法。将参数添加到原数组开头，并返回数组的长度
    var myArray10 = [1, 2, 3, 4];
    var myArray11 = myArray10.unshift(100, 22);
    console.log(myArray10);	//[100, 22, 1, 2, 3, 4]
    console.log(myArray11);	//6

### **reverse()方法** ###

这个方法主要用于反转数组元素，索引数组 reverse后会重新排序，**返回反转后的数组**。改变原数组。

//reverse()方法。这个方法主要用于反转数组元素，索引数组reverse后会重新排序
    var myArray5 = ['world', 5, 3, 8, 'hello'];
    console.log(myArray5.reverse());	//["hello", 8, 3, 5, "world"]
    console.log(myArray5);	//["hello", 8, 3, 5, "world"]

### **sort()方法** ###

按指定的参数对数组进行排序，当不带参数调用sort（）时，数组元素以字母表顺序排序（如有必要将临时转化为字符串进行比较），默认都是以字符串形式比较的，是按照ACSII码顺序进行比较的。**返回排序后的数组**。改变原数组。

//sort()方法，按指定的参数对数组进行排序
    var myArray12 = [2, 5, 1, 66, 8]
    console.log(myArray12.sort());	//[1, 2, 5, 66, 8]
    console.log(myArray12);			//[1, 2, 5, 66, 8]

如果想按照数值大小进行排序，该如何操作呢？这就用到了带参数的sort方法，参数可以是function，这样就能够按照自定义的方式排序了。《JavaScript权威指南》给出了一种简便的按照数值大小比较的方法：

var myArray13 = [365, 6, 81, 0, 9, 645];
    console.log(myArray13.sort(function(a, b){
    	return a - b;
    })); 		//[0, 6, 9, 81, 365, 645]

### **toString()方法 ** ###

toString() 方法可把数组转换为字符串，并返回结果，**返回由数组中每个值的字符串形式拼接而成的一个以逗号分割的字符串**。**注意：** 数组中的元素之间用逗号分隔。不会改变原数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits.toString());//Banana,Orange,Apple,Mango
    console.log(fruits);//["Banana", "Orange", "Apple", "Mango"]

### **valueOf()方法** ###

valueOf() 方法返回 Array 对象的原始值。**返回的还是数组**。一般就是返回自己。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

**注意：** valueOf() 方法不会改变原数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
    console.log(fruits.valueOf());	//["Banana", "Orange", "Apple", "Mango"]

### **indexOf()方法** ###

用法和字符串的indexOf()方法一模一样

### **lastIndexOf()方法 ** ###

用法和字符串的lastIndexOf()方法一模一样

### **includes()方法** ###

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。**返回值为true/false**。

**语法：**arr.includes(searchElement, fromIndex)

*  *searchElement：*必须。需要查找的元素值。
 *  *fromIndex：*可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索

如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

[1, 2, 3].includes(2);     // true
    [1, 2, 3].includes(4);     // false
    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    [1, 2, NaN].includes(NaN); // true

### **every()方法** ###

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。**返回值为true/false**。

every() 方法使用指定函数检测数组中的所有元素：

*  如果数组中检测到有一个元素不满足，则整个表达式返回 *false* ，且剩余的元素不会再进行检测。
 *  如果所有元素都满足条件，则返回 true。

**注意：** every() 不会对空数组进行检测。

**注意：** every() 不会改变原始数组。

**语法：**array.every(function(currentValue,index,arr), thisValue)

*  *function(currentValue,index,arr)：*必须。函数，数组中的每个元素都会执行这个函数
 *  *currentValue：*必须。当前元素的值
 *  *index：*可选。当前元素的索引值
 *  *arr：*可选。当前元素属于的数组对象
 *  *thisValue：*可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

//every()方法，每一项都调用函数进行判断，返回值是true或false，参数是一个方法
    var arr1 = [32, 33, 16, 40];
    var arr2 = [19, 58, 18, 36];
    function checkAdult(item) {
    	return item >= 18;
    }
    console.log(arr1.every(checkAdult));	//false
    console.log(arr2.every(checkAdult));	//true

### **some() 方法 ** ###

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。**返回值为true/false**。

some() 方法会依次执行数组的每个元素：

*  如果有一个元素满足条件，则表达式返回*true* , 剩余的元素不会再执行检测。
 *  如果没有满足条件的元素，则返回false。

**注意：** some() 不会对空数组进行检测。

**注意：** some() 不会改变原始数组。

**语法：**array.some(function(currentValue,index,arr),thisValue)

//some()方法，返回值是true或false，参数是一个方法
    var arr3 = [2, 3, 16, 10];
    var arr4 = [19, 58, 17, 36];
    function checkTrue(item) {
    	return item >= 18;
    }
    console.log(arr3.some(checkTrue));	//false
    console.log(arr4.some(checkTrue));	//true

### **filter() 方法** ###

filter() 方法**返回一个新数组**，新数组中的元素是通过检查指定数组中符合条件的所有元素。

**注意：** filter() 不会对空数组进行检测。

**注意：** filter() 不会改变原始数组。

**语法：**array.filter(function(currentValue,index,arr), thisValue)

*  *function(currentValue, index,arr)：*必须。函数，数组中的每个元素都会执行这个函数
 *  *currentValue：*必须。当前元素的值
 *  *index：*可选。当前元素的索引值
 *  *arr：*可选。当前元素属于的数组对象
 *  *thisValue：*可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"

//filter()方法，参数是一个方法，返回一个新数组，数组中的元素为原始数组元素调用函数处理后满足条件的值
    var arr5 = [2, 3, 16, 10];
    var arr6 = [19, 58, 17, 36];
    function checkTrue(item) {
    	return item >= 18;
    }
    console.log(arr5.filter(checkTrue));	//[]
    console.log(arr6.filter(checkTrue));	//[19, 58, 36]

### **forEach()方法** ###

forEach() 方法为每个数组元素调用一次函数（回调函数）。对数组中的每一项运行给定函数。**这个方法没有返回值**。**本质上与使用for循环迭代数组一样**。（实质上就是for循环的缩写）。

注释：该函数接受 3 个参数：

*  项目值
 *  项目索引
 *  数组本身

//forEach()方法，参数是一个方法，这个方法没有返回值，本质上与使用for循环迭代数组一样
    var arr7 = [1, 2, 3, 4];
    var txt = '';
    function doubleNum(item){
    	return item * 2;
    }
    function myFunction1(value) {
    	txt = txt + value; 
    }
    console.log(arr7.forEach(doubleNum));//undefined
    console.log(arr7);	//[1, 2, 3, 4]
    arr7.forEach(myFunction1);
    console.log(txt);	//1234

### **map() 方法** ###

map() 方法**返回一个新数组**，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

**注意：** map() 不会对空数组进行检测。

**注意：** map() 不会改变原始数组。

**语法：**array.map(function(currentValue,index,arr), thisValue)

//map()方法，参数是一个方法，返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
    var arr8 = [9, 16, 25, 36];
    console.log(arr8.map((item)=>{
    	return Math.sqrt(item);
    }));	//[3, 4, 5, 6]
    			
    function doubleNum(item){
    	return item * 2;
    }
    console.log(arr8.map(doubleNum));	//[18, 32, 50, 72]

### **reduce() 方法 ** ###

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

reduce() 可以作为一个高阶函数，用于函数的 compose。

**注意:** reduce() 对于空数组是不会执行回调函数的。

**语法：**array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

*  *function(total,currentValue, index,arr)：*必需。用于执行每个数组元素的函数。
 *  *total：*必需。初始值, 或者计算结束后的返回值。
 *  *currentValue：*必需。当前元素
 *  *currentIndex:*可选。当前元素的索引
 *  *arr:*可选。当前元素所属的数组对象。
 *  *initialValue:*可选。传递给函数的初始值

//reduce()方法
    var arr8 = [9, 16, 5, 3];
    function getSum(total, num) {
    	return total + num;
    }
    
    console.log(arr8.reduce(getSum));	//33

### **flat()方法 ** ###

Array.prototype.flat()

在Array的显示原型下有一个flat方法，可以将多维数组降维，**传的参数是多少就降多少维；若不传参数，默认就降低一维（5到4）；若传的参数是Infinity，就会降到一维数组（5到1）**。

// 传说中的五维数组
    var arr = [1, [2, 3, [4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]]];
    console.log(arr.flat(2));//[1, 2, 3, 4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]三维
    // console.log(arr.flat());//[1, 2, 3, [4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]]四维
    // console.log(arr.flat(Infinity));//[1, 2, 3, 4, 5, 11, 12, 13, 6, 7, 8, 9, 10]一维

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

// 传说中的五维数组
    var arr = [1, [2, 3, [4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]]];
    // console.log(arr.flat(2));//[1, 2, 3, 4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]三维
    console.log(arr.flat());//[1, 2, 3, [4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]]四维
    // console.log(arr.flat(Infinity));//[1, 2, 3, 4, 5, 11, 12, 13, 6, 7, 8, 9, 10]一维

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1][]

// 传说中的五维数组
    var arr = [1, [2, 3, [4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]]];
    // console.log(arr.flat(2));//[1, 2, 3, 4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]三维
    // console.log(arr.flat());//[1, 2, 3, [4, 5, [11, 12, 13], 6, [7, 8, [9, 10]]]]四维
    console.log(arr.flat(Infinity));//[1, 2, 3, 4, 5, 11, 12, 13, 6, 7, 8, 9, 10]一维

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2][]

综上所述，JS操作数组的API中不改变原始数组的方法有**concat()方法、****join()方法、slice()方法。其他方法都改变原数组！**

不会改变原来数组的有：  
concat()---连接两个或更多的数组，并返回结果。

every()---检测数组元素的每个元素是否都符合条件。

some()---检测数组元素中是否有元素符合指定条件。

filter()---检测数组元素，并返回符合条件所有元素的数组。

indexOf()---搜索数组中的元素，并返回它所在的位置。

join()---把数组的所有元素放入一个字符串。

toString()---把数组转换为字符串，并返回结果。

lastIndexOf()---返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map()---通过指定函数处理数组的每个元素，并返回处理后的数组。

slice()---选取数组的的一部分，并返回一个新数组。

valueOf()---返回数组对象的原始值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221119/1056446c3cc749c6a2c8c4b9387e2954.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 1]: /images/20221119/457643b426134fb380de1540bead822d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70 2]: /images/20221119/657e38c639b847f7888359efdb80347c.png