数组Array常用方法
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了数组Array常用方法相关的知识，希望对你有一定的参考价值。
目录
- 1、数组常用方法
- 数组常用方法相关链接
- 2、数组常用方法案例
- 2.1、Array.map()
- 2.2、Array.forEach()
- 2.3、Array.filter()
- 2.4、Array.every()
- 2.5、Array.some()
- 2.6、Array.reduce()
- 2.7、Array.push()
- 2.8、Array.pop()
- 2.9、Array.shift()
- 2.10、Array.unshift()
- 2.11、Array.isArray()
- 2.12、Array.concat()
- 2.13、Array.toString()
- 2.14、Array.join()
- 2.15、Array.splice()
- 2.16、Array.slice()
- 2.17、Array.reverse()
- 2.18、Array.sort()
- 2.19、Array.valueOf()
- 2.20、Array.IndexOf()
- 2.21、Array.lastIndexOf()
- 2.22、Array.reduceRight()
- 2.23、Array.includes()
- 数组常用方法案例相关链接
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 |
数组常用方法相关链接
2、数组常用方法案例
2.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] 返回新数组
2.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区分
2.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] 满足条件的元素返回为一个新的数组
2.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
2.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
2.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() 方法，
// 区别是这个是从右向左操作的
2.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"]
2.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
2.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
2.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"]
2.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
2.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]
2.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
2.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
2.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] 替换一个元素
2.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"]
2.17、Array.reverse()
Array.reverse()，此方法将数组的数据进行反转，并且返回反转后的数组，会改变原数组。
var str1 = [12,2,"hello"];
console.log(str1.reverse()); // ["hello", 2, 12]
console.log(str1); // ["hello", 2, 12]
2.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"]
2.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
2.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
2.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
2.22、Array.reduceRight()
Array.reduceRight()，此方法与 reduce 类似，从数组的最后一项开始，向前逐个遍历到第一位，迭代数组的所有项，然后构建一个最终返回的值。
// null
2.23、Array.includes()
Array.includes()，此方法方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
let site = ['runoob', 'google', 'taobao'];
console.log(site.includes('runoob')); // true
console.log(site.includes('baidu')); // false
数组常用方法案例相关链接
以上是关于数组Array常用方法的主要内容，如果未能解决你的问题，请参考以下文章