数组的32场演唱会

最新推荐文章于 2022-01-20 17:44:41 发布

a545415

最新推荐文章于 2022-01-20 17:44:41 发布

阅读量226

点赞数

你有没有遇到过如下的场景。coding中当你要处理一个数组的时候，脑海里只浮现出了forEach；面试中，当面试官让你说说数组的方法的时候，脑海里只浮现出了forEach；做梦时当一个数组追杀你，你能想到的只有用forEach来抵抗。如果是，那么你一定要听一听今年数组举办的32场演唱会。只要听完了这32场演唱会，保证下次当你遇到数组的时候，闭着眼睛都能想出32种方法对付他们。另外，友情提示，结尾有彩蛋。

书归正传，数组是javascript中最常用的引用对象类型之一，在javascript的各种常用的数据结构中，诸如队列、栈，他们的基本实现方式用的就是数组，因此掌握数组的各项操作也就成为能否自如操控数据结构的要点。截止到ES8，数组目前共有32种方法，可大体分为如下几种:

数组的判断 1个方法
数组内容的判断 3个方法
数组内容的获取 4个方法
数组的构造 6个方法
数组的改造 9个方法
数组的循环遍历 4个方法
数组的累加 2个方法
数组转字符串 3个方法

数组的判断 1个方法

Array.isArray()

语法：Array.isArray(obj)
参数：需要检查的对象
返回：true，false

开唱：

判断数据类型的方法有几个比如使用typeof,instanceof，那么为什么还要有isArray方法呢？

首先说说typeof。众所周知，javascript有五个基本数据类型undefined,null,number,string,boolean,还有引用数据类型Object,Array,Function,Data,Date,RegExp等。typeof 运算符返回一个用来表示表达式数据类型的字符串，可能的字符串有："number"、"string"、"boolean"、"object"、"function" 和 "undefined"。这里面是没有Array的，无论引用的是什么类型的对象，它都返回 "object"，因此typeOf是不能用来判断数组的。那么instanceof呢？通常来讲，使用instanceof就是判断一个实例是否属于某种类型，这是基于javascript的原型继承机制的，然而在浏览器的环境中如果使用iframe，则可能出现多个不同的全局变量，从而无法发挥instanceof的作用，因此，Array.isArray()成功荣升为最靠谱的检测方法。但话说回来，其实它的的实现方式还是很简单的：

1 Array.isArray = function(arg) {
2 
3    return Object.prototype.toString.call(arg) === '[object Array]';
4 
5 };

需要特别指出的是，Array.isArray()方法是一个静态方法，只能通过Array对象来调用。

数组内容的判断 3个方法

Array.prototype.every()

语法：arr.every(callback[, thisArg])
参数：
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 断言数组内每个元素的callback函数
- thisArg 可选执行callback时作为this的值
返回：t断言数组的所有元素是否满足callback函数，是则返回true，否则返回false

Array.prototype.some()

语法：arr.some(callback[, thisArg])
参数：
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 断言数组内每个元素的callback函数
- thisArg 可选执行callback时作为this的值
返回：断言数组内是否有元素满足callback函数，是则返回true，否则返回false

Array.prototype.includes() ECMA7

语法：
- arr.includes(searchElement)
- arr.includes(searchElement, fromIndex)
参数：
- searchElement 需要查找的元素
- fromIndex 可选指定开始查询位置
返回：true，false

开唱：

如果你要对数组内容进行一些判断，可以先不要想着用forEach，优先思考一下上面三个是否可以满足你的需求。其中，every可以判断数组内的内容是否全部满足callback函数的条件，而some则可以判断数组内是否有内容满足callback函数的条件。举个栗子：

 1 function isBigEnough(element, index, array) {
 2 
 3      return element >= 10;
 4 
 5 }
 6 
 7  
 8 
 9 [12, 5, 8, 130, 44].every(isBigEnough);   // false
10 
11 [12, 5, 8, 130, 44].some(isBigEnough); // true

而includes方法则可以查找是否具体存在某一个元素，或者从某个具体的位置开始是否存在某个元素。但值得注意的是，includes方法是ECMA7中的标准，在使用之前需要确定运行环境是否支持此项方法。

1 var a = [1, 2, 3];
2 
3 a.includes(2); // true
4 
5 a.includes(2, 1); // true
6 
7 a.includes(2, 2); // false
8 
9 a.includes(4); // false

数组内容的获取 4个方法

Array.prototype.find() ECMA6

语法：arr.find(callback[, thisArg])
参数：
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 对数组内每个值执行的方法
- thisArg 可选执行callback时作为this的值
返回：第一个满足callback条件的值

Array.prototype.findIndex() ECMA6

语法：arr.findIndex(callback[, thisArg])
参数：
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 对数组内每个值执行的方法
- thisArg 可选执行callback时作为this的值
返回：满足callback条件的位置，没有则返回-1

Array.prototype.indexOf()

语法：arr.indexOf(searchElement[, fromIndex])
参数：
- searchElement 需要查找的元素
- fromIndex 可选指定查询位置
返回：查到的第一个元素在数组内的位置，没有返回-1

Array.prototype.lastIndexOf()

语法：arr.lastIndexOf(searchElement[, fromIndex])
参数：
- searchElement 需要查找的元素
- fromIndex 可选指定查询位置
返回：查到的最后一个元素在数组内的位置，没有返回-1

开唱：

这一组方法和数组内容判断的一组有些相似，只不过，数组内容判断的方法返回的都是true或者false，而这一组方法都会返回具体的值。 find方法会返回满足你条件的第一个元素，而findIndex会返回满足你条件的第一个元素的位置。而indexOf、lastIndexOf方法则和includes方法很相似，只不过前两个返回的是具体的位置，includes返回的是布尔值。举个栗子：

 1 function isBigEnough(element) {
 2 
 3  return element >= 15;
 4 
 5 }
 6 
 7  
 8 
 9 console.log([12, 5, 8, 130, 5, 44].find(isBigEnough)); // 130
10 
11 console.log([12, 5, 8, 130, 5, 44].findIndex(isBigEnough)); // 3
12 
13 console.log([12, 5, 8, 130, 5, 44].indexOf(5)); // 1
14 
15 console.log([12, 5, 8, 130, 5, 44].lastIndexOf(5)); // 4
16 
17 console.log([12, 5, 8, 130, 5, 44].some(isBigEnough)); // true
18 
19 console.log([12, 5, 8, 130, 5, 44].every(isBigEnough)); // false
20 
21 console.log([12, 5, 8, 130, 5, 44].includes(5,4)); // true

数组的构造 6个方法

Array.from() ECMA6

语法：Array.from(arrayLike[, mapFn[, thisArg]])
参数：
- arrayLike 具有长度属性和有序元素的对象
- mapFn 可选对参数arrayLike执行的map函数
- thisArg 可选执行mapFn时作为this的值
返回：一个新的数组实例

Array.of() ECMA6

语法：Array.of(element0[, element1[, ...[, elementN]]])
参数：elementN 生成数组的元素
返回：一个新的数组实例

Array.prototype.concat()

语法：ar newarray = oldarray.concat(value1[, value2[, ...[, valueN]]])
参数：valueN 搭伙到原数组中的元素或数组
返回：一个新的数组实例

Array.prototype.filter()

语法：var newArray = arr.filter(callback[, thisArg])
参数：
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 断言数组的每个元素是否满足callback函数，返回true则保留元素，返回false则删除元素
- thisArg 可选执行callback时作为this的值
返回：一个新的数组实例

Array.prototype.map()

语法：var newArray = arr.filter(callback[, thisArg])
参数：
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 遍历原数组元素生成新数组元素的函数
- thisArg 可选执行callback时作为this的值
返回：一个新的数组实例

Array.prototype.slice()

语法：
- arr.slice()
- arr.slice(begin)
- arr.slice(begin, end)
参数：
- begin 可选浅拷贝的初始位置
- end 可选浅拷贝的结束位置
返回：一个新的数组实例

开唱：

在这一组中都是可以返回一个新数组，同时不会改变原数组的方法，因此把它们归为数组的构造这一类，它们都可以构造出一个新的数组。

Array.from()，Array.of()是ES6中新增的方法。需要特别指出的是，Array.from()，Array.of()方法是静态方法，只能通过Array对象来调用。

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（ array-like object ）和可遍历（ iterable ）的对象（包括 ES6 新增的数据结构 Set 和Map ）。在此之前，我们习惯于使用Array.prototype.slice.call()这种方式，将类数组对象转换为数组，如今我们有了更加直接的方法。

1 function f() {
2 
3  return Array.from(arguments);
4 
5 }
6 
7 f(1, 2, 3);
8 
9 // [1, 2, 3]

Array.of()方法则更加简单，将若干参数元素组成一个新的数组。

1 Array.of(1);       // [1]
2 
3 Array.of(1, 2, 3); // [1, 2, 3]

Array.prototype.concat()方法，既可以用于将目标数组和参数数组连接成为一个新数组，也可以实现类似于将参数元素按顺序push进数组的效果。除了使用concat，也可以使用ES6中新增的扩展运算符（spread，也就是三个点...），实现合并数组的功能。

 1 var arr1 = ['a', 'b'];
 2 
 3 var arr2 = ['c'];
 4 
 5 var arr3 = ['d', 'e'];
 6 
 7  
 8 
 9 // ES5的合并数组
10 
11 arr1.concat(arr2, arr3);
12 
13 // [ 'a', 'b', 'c', 'd', 'e' ]
14 
15  
16 
17 // ES6的合并数组
18 
19 [...arr1, ...arr2, ...arr3]
20 
21 // [ 'a', 'b', 'c', 'd', 'e' ]

通过Array.prototype.filter()方法的命名就可以看出，它实现了一个类似于过滤器的效果。满足参数函数条件的元素将被过滤出来组成一个新的数组返回。

1 var myArr = [1,2,3,4,5];
2 
3 var result = myArr.filter(v=>v<3)
4 
5 console.log(result) //[ 1, 2 ]

Array.prototype.map()方法有些类似于forEach方法。不同的是，forEach方法只是单纯的循环遍历数组，而map可以将循环遍历后的结果组成一个新的数组返回。

1 var numbers = [1, 5, 10, 15];
2 
3 var doubles = numbers.map(x => x * 2);
4 
5 console.log(doubles) //[ 2, 10, 20, 30 ]

Array.prototype.slice()方法实现数组的截取功能，可以指定开始结束位置，截取相应位置内的元素组成新的数组。

1 var a = ['zero', 'one', 'two', 'three'];
2 
3 var sliced = a.slice(1, 3);
4 
5  
6 
7 console.log(a);      // ['zero', 'one', 'two', 'three']
8 
9 console.log(sliced); // ['one', 'two']

数组的改造

Array.prototype.copyWithin() ECMA6

语法：
- arr.copyWithin(target)
- arr.copyWithin(target, start)
- arr.copyWithin(target, start, end)
参数：
- target 拷贝到的目标位置
- start 可选拷贝内容起始位置
- end 可选拷贝内容结束位置

Array.prototype.fill() ECMA6

语法：
- arr.fill(value)
- arr.fill(value, start)
- arr.fill(value, start, end)
参数：
- value 填充数组的值
- start 可选填充起始位置
- end 可选填充结束位置

Array.prototype.pop()

语法：arr.pop()
返回：移除的元素

Array.prototype.push()

语法：arr.push([element1[, ...[, elementN]]])
参数：elementN 压如数组尾部的元素
返回：数组的长度

Array.prototype.shift()

语法：arr.shift()
返回：移除的元素

Array.prototype.unshift()

语法：arr.unshift([element1[, ...[, elementN]]])
参数：elementN 压如数组头部的元素
返回：数组的长度

Array.prototype.reverse()

语法：arr.reverse()
返回：相反的数组

Array.prototype.sort()

语法：
- array.sort()
- arr.sort(compareFunction)
参数：
- compareFunction 可选定义排序规则的函数
返回：一个新的数组实例

Array.prototype.splice()

语法：
- arr.splice(start)
- arr.splice(start, deleteCount)
- arr.splice(start, deleteCount, item1, item2, ...)
参数：
- start 开始改变数组的位置
- deleteCount 可选删除数组的数量
- itemN 可选插入数组的元素
返回：包含删除元素的数组

开唱：

Array.prototype.copyWithin()和Array.prototype.fill()是ES6中新增的方法。Array.prototype.copyWithin()实现了数组内的拷贝，可以选定拷贝数据来源的开始结束位置，以及替换目标开始位置。Array.prototype.fill()则会将指定位置的数组元素全部替换为指定的值。

 1 // 将3号位复制到0号位
 2 
 3 [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
 4 
 5 // [4, 2, 3, 4, 5]
 6 
 7  
 8 
 9 //从1号位开始，向原数组填充7，到2号位之前结束
10 
11 ['a', 'b', 'c'].fill(7, 1, 2)
12 
13 // ['a', 7, 'c']

这一组方法中，我们最熟悉的莫过于pop，push，shift，unshift这四个方法。其中pop，push是控制数组尾部元素进出的方法，而shift，unshift是控制数组头部元素进出的方法。通过上面的方法我们可以通过数组模拟实现栈和队列的效果。栈是先进后出，进栈使用push方法，出栈使用pop方法。队列是先进先出，进队列使用push方法，出队列使用shift方法。

Array.prototype.reverse()方法可得到一个反转的队列，但它在返回反转数组的同时，也改变的原数组的排列顺序，这一点是需要注意的，因此将它归入了数组的改造这一组当中。同样Array.prototype.sort()也是用于数组排序的一个方法，不传参数将根据元素的unicode进行排序，同样会改变原数组的排列顺序。

Array.prototype.splice()方法可以实现数组特定位置元素的插入，删除。

 1 var myArr = [1,2,3,4,5];
 2 
 3 // 删除3号位元素
 4 
 5 myArr.splice(2,1) //[ 1, 2, 4, 5 ]
 6 
 7 // 在第3号位元素的位置插入元素3
 8 
 9 myArr.splice(2,0,3) //[ 1, 2, 3, 4, 5 ]
10 
11 // 删除第4号位及后面的元素
12 
13 myArr.splice(3) //[ 1, 2, 3 ]
14 
15 // 第4号位元素位置插入元素4，5
16 
17 myArr.splice(3,0,4,5) //[ 1, 2, 3, 4, 5 ]

数组的遍历

Array.prototype.forEach()

语法：arr.forEach(function callback(currentValue, index, array) { //your iterator }[, thisArg]);
参数：
- currentValue 当前处理的元素
- index 当前元素的位置
- array 当前处理的数组
- callback 对每个元素遍历执行的方法
- thisArg 执行callback时的this值
返回：undefined

Array.prototype.keys() ECMA6

语法：arr.keys()
返回：数组迭代器对象

Array.prototype.values() ECMA6

语法：arr.values()
返回：数组迭代器对象

Array.prototype.entries() ECMA6

语法：arr.entries()
返回：数组迭代器对象

开唱：

相信大部分人对Array.prototype.forEach()这个数组方法并不陌生，它对数组元素遍历执行回调方法，这里不做过多介绍。Array.prototype.entries()，Array.prototype.keys()和Array.prototype.values()是ES6中新增的三个数组方法，用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

 1 for (let index of ['a', 'b'].keys()) {
 2 
 3  console.log(index);
 4 
 5 }
 6 
 7 // 0
 8 
 9 // 1
10 
11  
12 
13 for (let elem of ['a', 'b'].values()) {
14 
15  console.log(elem);
16 
17 }
18 
19 // 'a'
20 
21 // 'b'
22 
23  
24 
25 for (let [index, elem] of ['a', 'b'].entries()) {
26 
27  console.log(index, elem);
28 
29 }
30 
31 // 0 "a"
32 
33 // 1 "b"

数组的累加

Array.prototype.reduce()

语法：arr.reduce(callback[, initialValue])
参数：
- accumulator 累加值
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 累加器
- initialValue 可选初始值
返回：累加器最终计算结果

Array.prototype.reduceRight()

语法：arr.reduceRight(callback[, initialValue])
参数：
- accumulator 累加值
- currentValue 当前值
- currentIndex 当前值的位置
- array 所操作的数组
- callback 累加器
- initialValue 可选初始值
返回：累加器最终计算结果

开唱：

Array.prototype.reduce()和Array.prototype.reduceRight()方法都接收一个函数作为累加器，数组中的每个值（reduce从左到右，reduceRight从右到左）开始缩减，最终为一个值。相比与forEach、map等数组方法，reduce不必再另外定义一个变量存储最终计算结果，更加方便。另外，通过观察，不难发现一个规律，除了Array.prototype.reduce()和Array.prototype.reduceRight()方法，其他有callback回调参数的方法中，其callback回调函数中的参数都是包含三个参数的：当前值currentValue，当前值的位置currentIndex，所操作的数组array；而Array.prototype.reduce()和Array.prototype.reduceRight()方法则包含四个，多了一个累加值作为第一个参数。

1 var total = [0, 1, 2, 3].reduce(function(sum, value) {
2 
3  return sum + value;
4 
5 }, 0);
6 
7 // total is 6

数组转字符串

Array.prototype.toString()

语法：arr.toString()
返回：数组的字符串表示

Array.prototype.toLocaleString()

语法：
- arr.toLocaleString();
- arr.toLocaleString(locales);
- arr.toLocaleString(locales, options);
参数：
- locales BCP 47语言标签字符串
- options 可选配置参数对象
返回：数组的字符串表示

Array.prototype.join()

语法：
- arr.join()
- arr.join(separator)
参数：separator 可选分割符
返回：数组的字符串表示

开唱：

我们时常会遇到数组与字符串之间的转换。根据上面学到的知识，将字符串转换为数组，除了字符串的方法，我们还可以使用数组的Array.from()方法。而将数组转换为字符串，则可以使用上面的三个方法。其中Array.prototype.toString()方法可以将数组直接转换为字符串的表示形式。Array.prototype.toLocaleString()方法可以根据参数将数组的字符串表示本地化，但支持的情况并不是很好，因此不用过多考虑。Array.prototype.join()方法可以指定数组转换为字符串的分隔符。

1 var months = ['Jan', 'Feb', 'Mar', 'Apr'];
2 
3 months.toString(); // "Jan,Feb,Mar,Apr"
4 
5 months.join('-'); // "Jan-Feb-Mar-Apr"

那位说，听你说了这么多，也没见什么演唱会啊，那下面就让我们真正的唱一段。

判断是不是数组，isArray最靠谱。

按照条件来判断，every/some给答案

是否包含此元素，includes最快速。

find/findIndex很相似，按条件给第一个值。

indexOf/lastIndexOf也很强，有没有来在哪忙。

from和of，都能用来生数组。

concat当红娘，数组结婚她帮忙。

filter瘦身有一套，不想要的都不要。

map整容有实力，改头换面出新意。

slice就像买切糕，想切哪来就下刀。

自力更生很重要，copyWithin自己搞。

fill就像填大坑，想往哪扔往哪扔。

搬山摸金四兄弟，pop、push、shift、unshift不难记。

造反其实很容易，reverse一下看好戏。

sort排序有技巧，能小大来能大小。

splice要认识，能插能删有本事。

forEach最熟悉，有人说它是万能滴。

keys、values、entries，遍历数组新方式。

算总账，不要慌，reduce、reduceRight帮你忙。

toString，join变字符，toLocaleString不常用。

当里个当，当里个当，数组32方法，猥琐发育不要浪，嘿！不要浪！

如果你喜欢我们的文章，关注我们的公众号和我们互动吧。