数组Array常用方法

---

1、数组常用方法

序号	方法（函数）	版本	功能描述	是否改变原数组
1	map()	ES5	此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组	N
2	forEach()	ES5	此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分	N
3	filter()	ES5	此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回	N
4	every()	ES5	此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false	N
5	some()	ES5	此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false	N
6	reduce()	ES5	此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型	N
7	push()	ES5-	此方法是在数组的后面添加新加元素，此方法改变了数组的长度	Y
8	pop()	ES5-	此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度	Y
9	shift()	ES5-	此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度	Y
10	unshift()	ES5-	此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度	Y
11	isArray()	ES5+	判断一个对象是不是数组，返回的是布尔值	N
12	concat()	ES5-	此方法是一个可以将多个数组拼接成一个数组	N
13	toString()	ES5-	此方法将数组转换成字符串，类似于没有参数的 join() 方法。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。不会改变原数组	N
14	join()	ES5-	此方法将数组转为字符串并返回转化的字符串数据，不会改变原来的数组	N
15	splice()	ES5-	Array.splice(开始位置， 删除的个数，元素) ，万能方法，可以实现增删改	Y
16	slice()	ES5-	此方法截取指定位置的数组，并且返回截取的数组，不会改变原数组	N
17	reverse()	ES5-	此方法将数组的数据进行反转，并且返回反转后的数组，会改变原数组	Y
18	sort()	ES5-	此方法对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组，会改变原来的数组	Y
19	valueOf()	ES5-	此方法返回数组的原始值（一般情况下其实就是数组自身），一般由js在后台调用，并不显式的出现在代码中	N
20	IndexOf()	ES5	此方法根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引	N
21	lastIndexOf()	ES5	此方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索	N
22	reduceRight()	ES5	此方法与 reduce 类似，从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值	N
23	includes()	ES6	此方法方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false	N
24	flat()	ES6	此方法方法用来实现数组扁平化	Y

---

2、数组常用方法相关链接

1. 知乎
2. CSDN

---

3、数组常用方法案例

3.1、Array.map()

Array.map()，此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(x => x*2);
// arr = [1, 2, 3, 4, 5] 原数组保持不变
// newArr = [2, 4, 6, 8, 10] 返回新数组

---

3.2、Array.forEach()

Array.forEach()，此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分。

let arr = [1, 2, 3, 4, 5];
num.forEach(x => x*2);
// arr = [1, 2, 3, 4, 5] 数组改变,注意和map区分

---

3.3、Array.filter()

Array.filter()，此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回。

let arr = [1, 2, 3, 4, 5];
const isBigEnough = value => value >= 3;
let newArr = arr.filter(isBigEnough);
// newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

---

3.4、Array.every()

Array.every()，此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false。

let arr = [1, 2, 3, 4, 5];
const isLessThan4 = value => value < 4;
const isLessThan6 = value => value < 6;
arr.every(isLessThan4); // false
arr.every(isLessThan6); // true

---

3.5、Array.some()

Array.some()，此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false。

let arr= [1, 2, 3, 4, 5];
const isLessThan4 = value => value < 4;
const isLessThan6 = value => value > 6;
arr.some(isLessThan4); // true
arr.some(isLessThan6); // false

---

3.6、Array.reduce()

Array.reduce()，此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型。

let arr = [1, 2, 3, 4, 5];
const add = (a, b) => a + b;
let sum = arr.reduce(add);
// sum = 15  相当于累加的效果
// 与之相对应的还有一个 Array.reduceRight() 方法，
// 区别是这个是从右向左操作的

---

3.7、Array.push()

Array.push()，此方法是在数组的后面添加新加元素，此方法改变了数组的长度。

var str1 = [12,2,"hello"];
var str2 = [43,2,"test"];
console.log(str1.push("你好"));           // 4
console.log(str2.push("hello","world")); // 5
console.log(str1);                       // [12, 2, "hello","你好"]
console.log(str2);                       // [43, 2, "test","hello", "world"]

---

3.8、Array.pop()

Array.pop()，此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度。

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

---

3.9、Array.shift()

Array.shift()，此方法删除数组第一个元素，并返回数组，此方法改变了数组的长度。

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

---

3.10、Array.unshift()

Array.unshift()，此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度。

var str1 = [12,2,"hello"];
var str2 = [43,2,"test"];
console.log(str1.unshift("你好")); 			// 4
console.log(str2.unshift("hello","world")); // 5
console.log(str1); 							// ["你好", 12, 2, "hello"]
console.log(str2); 							// ["hello", "world", 43, 2, "test"]

---

3.11、Array.isArray()

Array.isArray()，判断一个对象是不是数组，返回的是布尔值。

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

---

3.12、Array.concat()

Array.concat()，此方法是一个可以将多个数组拼接成一个数组。

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

---

3.13、Array.toString()

Array.toString()，此方法将数组转换成字符串，类似于没有参数的 join() 方法。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。不会改变原数组。

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

---

3.14、Array.join()

Array.join()，此方法将数组转为字符串并返回转化的字符串数据，不会改变原来的数组。

let arr = [1, 2, 3, 4, 5];
let str1 = arr.toString();
let str2 = arr.toString(',');
let str3 = arr.toString('##');
console.log(str1); // 12345
console.log(str2); // 1,2,3,4,5
console.log(str3); // 1##2##3##4##5

---

3.15、Array.splice()

Array.splice()，Array.splice(开始位置， 删除的个数，元素) ，万能方法，可以实现增删改。

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(2, 0 'haha');
let arr2 = arr.splice(2, 3);
let arr1 = arr.splice(2, 1 'haha');
console.log(arr1); // [1, 2, 'haha', 3, 4, 5] 新增一个元素
console.log(arr2); // [1, 2] 删除三个元素
console.log(arr3); // [1, 2, 'haha', 4, 5] 替换一个元素

---

3.16、Array.slice()

Array.slice()，此方法截取指定位置的数组，并且返回截取的数组，不会改变原数组。

var arr = ["T1","J1","L1","L2","M1"];
console.log(arr.slice(1,3));        // ["J1","L1"]
console.log(arr.slice(1));          // ["J1","L1","L2","M1"]
console.log(arr.slice(-4,-1));      // ["J1","L1","L2"]
console.log(arr.slice(-2));         // ["Lily","M1"]
console.log(arr.slice(1,-2));       // ["J1","L1"]
console.log(arr);                   // ["T1","J1","L1","L2","M1"]

---

3.17、Array.reverse()

Array.reverse()，此方法将数组的数据进行反转，并且返回反转后的数组，会改变原数组。

var str1 = [12,2,"hello"];
console.log(str1.reverse()); // ["hello", 2, 12]
console.log(str1); // ["hello", 2, 12]

---

3.18、Array.sort()

Array.sort()，此方法对数组内的数据进行排序(默认为升序)，并且返回排过序的新数组，会改变原来的数组。

var str1 = [12,2,43,5,2,5];
var str2 = [92,2,43,"hello",'zoom',5,2,5];
console.log(str1.sort()); // [12, 2, 2, 43, 5, 5]
console.log(str1); 	      // [12, 2, 2, 43, 5, 5]
console.log(str2.sort()); // [2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]
console.log(str2);        // [2, 2, 43, 5, 5, 92, "abc", "hello", "zoom"]

---

3.19、Array.valueOf()

Array.valueOf()，此方法返回数组的原始值（一般情况下其实就是数组自身），一般由js在后台调用，并不显式的出现在代码中。

var str = [1,2,3];
console.log(str.valueOf()); // [1,2,3]
console.log(str); // [1,2,3]
// 为了证明返回的是数组自身
console.log(str.valueOf() == str); // true

---

3.20、Array.IndexOf()

Array.IndexOf()，此方法根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1，找到了指定的数据返回该数据的索引。

var str = ["h","e","l","l","o"];
console.log(str.indexOf("l"));        // 2
console.log(str.indexOf("l",3));      // 3
console.log(str.indexOf("l",4));      // -1
console.log(str.indexOf("l",-1));     // -1
console.log(str.indexOf("l",-3));     // 2

---

3.21、Array.lastIndexOf()

Array.lastIndexOf()，此方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。

var str = ["h","e","l","l","o"];
console.log(str.lastIndexOf("l"));        //3
console.log(str.lastIndexOf("l",3));      //3
console.log(str.lastIndexOf("l",4));      //3
console.log(str.lastIndexOf("l",-1));     //3
console.log(str.lastIndexOf("l",-3));     //2

---

3.22、Array.reduceRight()

Array.reduceRight()，此方法与 reduce 类似，从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。

// null

---

3.23、Array.includes()

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

let site = ['runoob', 'google', 'taobao'];
console.log(site.includes('runoob')); // true 
console.log(site.includes('baidu')); // false

---

3.24、Array.flat()

Array.flat()，此方法方法用来实现数组扁平化

let site = [1, 2, [3, 4]];
console.log(arr1.flat());
// [1, 2, 3, 4]

---

4、数组常用方法案例相关链接

1. 知乎
2. 博客园