JavaScript 之 数组方法的总结

一、创建数组的两种方式

1、内置构造函数创建;

let arr = new Array("apple","banner");

2、字面量的方式创建

let arr = ["apple","banner"]; 

  
  

二、数组(array)中常用的几种方法

1、利用数组方法创建数组

Array.of()方法：区别于内置构造函数创建数组的方式（new是可以省略的），所以当使用Array()的参数只有一个时，代表的是创建该数组的length
  功能：创建数组；
  参数：数据
  返回值：创建的数组；
具体示例如下：

console.log(Array.of(1, 2, 3)); // [ 1, 2, 3 ]
console.log(Array.of(4)); // [ 4 ]
console.log(Array(5)); // [ <5 empty items> ]
console.log(Array(1, 2, 3, 4)); // [ 1, 2, 3, 4 ]

  

2、判断数据是否为数组 — isArray()

Array.isArray(array)方法：
  功能：判断数据是否为数组；
  参数：需要判断的数组；
  返回值：布尔值；
具体示例如下：

let arr = [1, 2, 3, 4];
console.log(Array.isArray(arr)); // true
let str = 'aaa';
console.log(Array.isArray(str)); // false
let obj = {
    
    
    name: 'aaa',
    sex: 'bbb',
}
console.log(Array.isArray(obj)); // false

  

3、往数组的末尾添加数据 — push()

array.push()方法：
  功能：往原数组的末尾逐一添加任意数量的数据；
  参数：添加的数据；
  返回值：返回新的长度。
具体示例如下：

let arr = [1, 2];
arr.push(3, 4);
console.log(arr);  // [ 1, 2, 3, 4 ]
console.log(arr.length);  // 4  等价于直接打印 console.log(arr.push(3, 4));

  

4、往数组的开头添加数据 — unshift()

array.unshift()方法：
  功能：往原数组的开头逐一添加任意数量的数据；
  参数：添加的数据；
  返回值：返回新的长度。
具体示例如下：

let arr = [1, 2];
arr.unshift(-1, 0);
console.log(arr);  // [ -1, 0, 1, 2 ]
console.log(arr.length);  // 4   等价于直接打印 console.log(arr.unshift(-1, 0));

  

5、给数组添加数据形成一个新的数组 — concat()

array.concat()方法：
  功能：给数组添加数据形成一个新的数组；
  参数：数组或者数组项；
  返回值：新的数组；
具体示例如下：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6]; 
console.log(arr1.concat(arr2)); // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr1.concat(7)); // [ 1, 2, 3, 7 ]
console.log(arr1.concat('aaa')); // [ 1, 2, 3, 'aaa' ]  
console.log(arr1.concat(8, [10, 11, 12])); // [ 1, 2, 3, 8, 10, 11, 12 ]

  

6、删除数组的最末尾的一项数据 — pop()

array.pop()方法：
  功能：删除数组的最末尾的一项数据；
  参数：无；
  返回值：删除的数据。
具体示例如下：

let arr = [1, 2, 3, 4];
// arr.pop();
console.log(arr.pop()); // 4
console.log(arr); // [ 1, 2, 3 ]
console.log(arr.length); // 3

  

7、删除数组的第一项数据 — shift()

array.shift()方法：
  功能：删除数组的第一项数据；
  参数：无；
  返回值：删除的数据。
具体示例如下：

let arr = [1, 2, 3, 4];
// arr.shift();
console.log(arr.shift()); // 1
console.log(arr); // [ 2, 3, 4 ]
console.log(arr.length); // 3

  

8、颠倒数组中数据的顺序 — reverse()

array.reverse()方法：
  功能：颠倒数组中数据的顺序；
  参数：无；
  返回值：颠倒数据后的数组。
具体示例如下：

let arr = [1, 5, 3, 7];
// arr.reverse();
console.log(arr.reverse()); // [ 7, 3, 5, 1 ]
console.log(arr); // [ 7, 3, 5, 1 ]

let arr1 = [1, 'a', 's', 3];
console.log(arr1.reverse()); // [ 3, 's', 'a', 1 ]
console.log(arr1); // [ 3, 's', 'a', 1 ]

  

9、将数组中的数据按照升序或降序的顺序排列 — sort()

array.sort()方法：改变原数组；
  功能：注：默认只能按照字母表对数组进行首字母的排序（升序或者降序）；如果对于数字，默认只能排序个位数的，两位数以上需要给方法增加参数（增加一个排序函数）,
  参数：对字母进行排序时无参数（输入参数也无效）；对数字进行排序时参数为自定义的排序函数；
  返回值：排序后的数组。
具体示例如下：

// 1、当数据为字母时：
let arr = ['ab', 'bc', 'ac', 'de']
console.log(arr.sort()); // [ 'ab', 'ac', 'bc', 'de' ]
console.log(arr); // [ 'ab', 'ac', 'bc', 'de' ]
// function ascend(a, b){ // 升序函数
//     return a - b;
// }
// function decline(a, b){ // 降序函数
//     return b - a;
// }
// console.log(arr.sort(ascend)) // [ 'ab', 'bc', 'ac', 'de' ]
// console.log(arr.sort(decline)) // [ 'ab', 'bc', 'ac', 'de' ]
// console.log(arr); // [ 'ab', 'bc', 'ac', 'de' ]


// 2、当数据为数字时： 
let arr = [1, 4, 5, 6, 3, 2, 7, 9, 32, 44, 8]
function ascend(a, b){
    
     // 定义一个升序函数
    return a - b;
}
function decline(a, b){
    
     // 定义一个降序函数
    return b - a;
}
console.log(arr.sort(ascend)) // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 32, 44 ]
console.log(arr.sort(decline)) // [ 44, 32, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
console.log(arr);

// 3、当数据中既有数字也有字母时：
let arr = ['ab', 1, 5, 3, 'bc', 'ac',6, 4, 'de']
// console.log(arr.sort()); // [ 1, 3, 4, 5, 6, 'ab', 'ac', 'bc', 'de' ]
// console.log(arr); // [ 1, 3, 4, 5, 6, 'ab', 'ac', 'bc', 'de' ]
function ascend(a, b){
    
     // 升序函数
    return a - b;
}
function decline(a, b){
    
     // 降序函数
    return b - a;
}
console.log(arr.sort(ascend)) // [ 'ab', 1, 3, 5, 'bc', 'ac', 4, 6, 'de' ]
console.log(arr.sort(decline)) // [ 'ab', 5, 3, 1, 'bc', 'ac', 6, 4, 'de' ]
console.log(arr); // [ 'ab', 5, 3, 1, 'bc', 'ac', 6, 4, 'de' ]

array.sort()方法总结：当数组中的数据既有数字又有字母字符串时，给array.sort()方法增加自定义排序函数为参数，排序只能对数字有效，字母仍是无效的；不添加参数，数字默认排在字母字符串的前面。
  

10、截取数组 — slice()

array.slice()方法：
  功能：截取数组中的数据创建一个新的数组；
  参数：参数1 必须参数为截取位置的开始下标；
     参数2 可选参数为截取位置的结束下标；
  返回值：截取后的数组（不改变原数组）；
具体示例如下：

let arr = [1, 2, 3, 4, 5, 6]; 
console.log(arr.slice(2));  // [ 3, 4, 5, 6 ]    
console.log(arr.slice(2, 4)); // [ 3, 4 ]
console.log(arr); // [ 1, 2, 3, 4, 5, 6 ]

  

11、将数组用指定的分隔符连接并转换成字符串 — join()

array.join()方法：
  功能：将数组中的数据使用特定的连接符连接在一起转换一个字符串；
  参数：连接符；
  返回值：转换后的字符串；
具体示例如下：

let arr = [1, 2, 3, 4];
console.log(arr.join()); // 1,2,3,4
console.log(typeof arr.join()); // string

console.log(arr.join('-')); // 1-2-3-4
console.log(typeof arr.join('-')); // string

console.log(arr.join('')); // 1234
console.log(typeof arr.join('')); // string

console.log(arr.join(' + ')); // 1 + 2 + 3 + 4
console.log(typeof arr.join(' + ')); // string

  

12、将数组转换成字符串 — toString()

array.toString()方法：
  功能：将数组转换成字符串；
  参数：无；
  返回值：转换后的字符串；
具体示例如下：

let arr = [1, 2, 3, 4, 5];
console.log(arr.toString()); // 1,2,3,4,5   类似 arr.join()方法没有参数时的情况
console.log(arr.join()); // 1,2,3,4,5
console.log(typeof arr.toString()); // string

  

13、改变数组，对原数组数据进行添加、删除、修改（强大的方法） — splice()

array.splice()方法：
  功能：改变数组，对原数组数据进行添加、删除、修改等数据操作；
  参数：参数1 起始索引；
     参数2 需要改变的数据个数；
     参数3 需要添加或修改给原数组的单个或者多个具体数据；
  返回值：改变的数据数组；
具体示例如下：

1、删除数组中某个索引位置的数据

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

2、给原数组中的某个索引位置增加数据

let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(5, 0, 7)); // []
console.log(arr); // [ 1, 2, 3, 4, 5, 7 ]

3、给原数组中某个索引位置的数据替换掉（先删除后添加）

let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 1, 'a')); // [ 3 ]
console.log(arr); // [ 1, 2, 'a', 4, 5 ]

4、把原数组的指定索引位置后的多个数据删除

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

5、替换多个数据（先删除多个数据后添加多个数据）

let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2, 3, 'aa', 10, 11, 12, 14)); // [ 3, 4, 5 ]
console.log(arr); // [ 1, 2, 'aa', 10, 11, 12, 14 ]

  

14、复制数组的数据形成新数组 — copyWithin()

array.copyWithin()方法：
  功能：复制数组中的数据形成新数组，且保持原数组的长度；
  参数：参数1 开始替换数据的索引位置；
     参数2 （可选）索引，从该索引位置开始复制；
     参数3 （可选）索引，到该索引位置停止复制（不含）；
  返回值：改变后的数组；
具体示例如下：
  特别注意：当索引为负数时，则从数组的最后一位开始从右往左算，且从-1开始；

let arr1 = [1, 2, 3, 4, 5];
console.log(arr1.copyWithin(-2)) // [1, 2, 3, 1, 2]
// 注：索引位置为-2开始用复制的数据替换原始数据；
// 当只有一个参数时，则表示从该索引位置开始用复制的数据替换原始数据；复制数据的开始位置也是该索引位置；

let arr2 = [1, 2, 3, 4, 5];
console.log(arr2.copyWithin(0, 3)) // [4, 5, 3, 4, 5]
// 注：索引为0的位置开始用复制的数据替换原始数据
//     3为复制数据的开始索引位置，也就是说复制4，5两个数据，然后从0的索引位置用已经复制的数据替换掉原始数据，
// 因为只复制了两个数据，所以也只是替换了两个数据，但保持原有数组的length长度，那么最终得到结果[4, 5, 3, 4, 5]

let arr3 = [1, 2, 3, 4, 5];
console.log(arr3.copyWithin(0, 3, 4)) // [4, 2, 3, 4, 5]
// 注：同理；0 为开始替换数据的索引位置，3为开始复制数据的索引位置，4为停止复制数据的结束位置（不含）；
// 那么，复制了索引位置3开始，索引位置4结束的数据（也就是数组中数据 4），然后从0开始替换掉，
// 因为只是复制了一个数据，所以替换的也只是一个数据，最终得到结果为  [4, 2, 3, 4, 5]

let arr4 = [1, 2, 3, 4, 5];
console.log(arr4.copyWithin(-2, -3, -1)) // [1, 2, 3, 3, 4]
// 同理可证

  

15、查询某数据第一次出现在该数组的下标 — indexOf()

array.indexOf()方法：
  功能：查询某数据第一次出现在该数组的下标；
  参数：参数1 查询的数据；
     参数2 查询的起始下标；
  返回值：查询到的数据所在下标；如果没找到则返回 -1；
具体示例如下：

let arr = [1, 2, 3, 4, 2, 5];
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(2, 2)); // 4  ：从下标2的索引位置开始查找
console.log(arr.indexOf(9)); // -1  ：没找到则返回 -1

  

16、查询某数据最后一次出现在该数组的下标 — lastIndexOf()

array.lastIndexOf()方法：
  功能：查询某数据最后一次出现在该数组的下标；
  参数：参数1 查询的数据；
     参数2 查询的起始下标；
  返回值：查询到的数据所在下标；如果没找到则返回 -1；
具体示例如下：
  注：此方法也可以理解为从后面开始往前面查找，从后往前查找到数据第一次出现的下标，当然下标是从前面开始往后算的，0 开头；

let arr = [1, 2, 3, 4, 2, 5];
console.log(arr.lastIndexOf(2)); // 4
console.log(arr.lastIndexOf(2, -4)); // 1
console.log(arr.lastIndexOf(2, 1)); // 1
console.log(arr.lastIndexOf(8)); // -1

  

17、查询该数组是否包含某个数据 — includes()

array.includes()方法：
  功能：查询该数组是否包含某个值
  参数：需要查询的数据；
  返回值：布尔值；
具体示例如下：

let arr = [ 1, 2, 3, 4, 5, 6 ];
console.log(arr.includes(3)); // true
console.log(arr.includes(7)); // false

  

18、循环数组的方法 — forEach()

array.forEach()方法：
  功能：循环遍历数组中的每个数据，并对数据进行运算，改变原数组；
  参数：回调函数；
     回调函数的参数：参数1 数组中的每一项数据；
             参数2 索引；
             参数3 数组
  返回值：无；
具体示例如下：

function fn(item, index, arr){
    
    
    arr[index] = item + 1; 
}
let arr = [1, 2, 3, 4, 5, 6]; 
let res = arr.forEach(fn);
console.log(res);     // 打印返回值 undefined 
console.log(arr);     // 打印原数组 [ 2, 3, 4, 5, 6, 7 ]

// 箭头函数改写代码如下
let arr = [1, 2, 3, 4, 5, 6];
arr.forEach((item, index) => arr[index] = item + 1);
console.log(arr); // [ 2, 3, 4, 5, 6, 7 ]

  

19、循环数组的方法 — map()

array.map()方法：
  功能：循环遍历数组中的每个数据，并对数据进行运算，不改变原数组，返回一个新数组；
  参数：回调函数；
     回调函数的参数：参数1 数组中的每一项数据；
             参数2 索引；
             参数3 数组
  返回值：新的数组；
具体示例如下：

function fn(item, index, arr){
    
    
    return item + 1; 
}
let arr = [1, 2, 3, 4, 5, 6]; 
let res = arr.map(fn);
console.log(res);     // 打印返回值 [ 2, 3, 4, 5, 6, 7 ]
console.log(arr);  // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]

// 箭头函数改写代码如下：
let arr = [1, 2, 3, 4, 5, 6]; 
let res = arr.map(item => item + 1);
console.log(res);  // 打印返回值 [ 2, 3, 4, 5, 6, 7 ]
console.log(arr);  // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]

  

20、循环数组的方法 — filter()

array.filter()方法：
  功能：检测数组数据，并返回符合条件的所有数据的新数组，不改变原数组；
  参数：回调函数；
     回调函数的参数：参数1 数组中的每一项数据；
             参数2 索引；
             参数3 数组
  返回值：新的数组；
具体示例如下：

function fn(item, index, arr){
    
    
	return item >= 3;
}
let arr = [1, 2, 3, 4, 5, 6]; 
let res = arr.filter(fn);
console.log(res);     // 打印返回值 [ 3, 4, 5, 6 ]
console.log(arr);    // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]


// 箭头函数改写代码如下：
let arr = [1, 2, 3, 4, 5, 6]; 
let res = arr.filter(item => item >= 3);
console.log(res);  // 打印返回值 [ 3, 4, 5, 6 ]
console.log(arr);  // 打印原数组 [ 1, 2, 3, 4, 5, 6 ]

  
  好的，以上就是本人对数组方法的一些简单理解，当然数组方法还有很多，后续会不断更新；
  
  如有不足之处，望大神们不吝指出，谢谢！