2018/2/2 21:30:13当前位置推荐好文程序员浏览文章

学习任何编程语言,数组都是绕不过去的坎,每个编程语言都在其标准库里面内置了功能强大的Array对象。通过参考阮一峰教程和MDN,我把数组常见的方法以及一些误区总结如下,内容较多,而且会继续补充,希望这一篇文章可以把数组的知识一网打尽。

1. 数组的简单概念

1.1 数组是什么呢?

编程总要和数据打交道,常见的普通的数据由基本数据类型可以定义,一些具有多重属性、内容的数据就需要复杂的数据类型去定义,也就是对象来定义,数组也是对象的一种。

  • 为了方便理解,我们可以认为数组是具有一定顺序的复杂数据的组合(与对象的无序区别),每个位置对应一个索引,索引从0开始,具有length属性,而且length属性是可变的

1.2 数组如何定义

  • 第一种方法是通过Array构造函数来定义(该方法并不常用)
var arr1 = new Array(3)undefinedarr1(3) [empty × 3]    length: 3    __proto__: Array(0)

以上是控制台打印结果,构造了一个长度为3的、每个元素为空的数组。


以上的写法有个小bug
虽然元素为空,但是正常来说,索引应该存在的,但是事实是 索引竟然不存在

arr1[0]undefinedarr1[1]undefinedarr1[2]undefined0 in arr1false1 in arr1false2 in arr1

索引0、1、2处是undefined,完全合理,但是索引不存在,很奇怪


而且new不写也是一样的结果。

var arr2 = Array(3)undefinedarr2(3) [empty × 3]    length: 3    __proto__: Array(0)
  • 但是采用构造函数的这种方法容易产生一些歧义,不同的参数个数,会产生不同的结果。
1.2.1 构造函数不写参数
var arr3 = new Arrayundefinedarr3[]    length:0    __proto__:Array(0

此时构造出空的数组,而且发现构造函数的()写不写都可以

1.2.2 构造函数写1个正整数参数

那这个正整数参数就是构造出来的数组的长度。

1.2.3 构造函数参数是一个非正整数(字符串、boolean、对象等其他值)
var arr = new Array(jjj)undefinedarr["jjj"]    0: "jjj"    length: 1    __proto__: Array(0)
var arr = new Array(false)undefinedarr[false]    0: false    length: 1    __proto__: Array(0)
var arr = new Array({0: 我是一个对象})undefinedarr[{…}]    0: {0: "我是一个对象"}    length: 1    __proto__: Array(0)

这个非正整数就是数组的内容

1.2.4 构造函数写多个参数
var arr4 = new Array(1, 2)undefinedarr4(2) [1, 2]    0: 1    1: 2    length: 2    __proto__: Array(0)

此时直接构造出0索引是元素1、1索引是元素2的数组对象。

var arr4 = new Array(aa, ff, 10, 0)undefinedarr4(4) ["aa", "ff", 10, 0]    0: "aa"    1: "ff"    2: 10    3: 0    length: 4    __proto__:Array(0)

即多参数时,所有参数都是返回的新数组的成员

1.2.5 构造函数参数是非正整数,报错
new Array(-1)VM376:1 Uncaught RangeError: Invalid array length    at <anonymous>:1:1(anonymous) @ VM376:1new Array(3.2)VM377:1 Uncaught RangeError: Invalid array length    at <anonymous>:1:1(anonymous) @ VM377:1
1.2.6 数组定义的正确方法

综上所述,其实实际中直接用字面量定义数组

var arr = [这样子, 定义, is, true, 1, {good: 我是数组索引为5的元素的值}]undefinedarr(6) ["这样子", "定义", "is", true, 1, {…}]    0: "这样子"    1: "定义"    2: "is"    3: true    4: 1    5: {good: "我是数组索引为5的元素的值"}    length: 6    __proto__:Array(0)

2. 数组的length属性解疑

如果你是初学者,一定要记住数组的length属性和里面有几个元素无关,爱几个元素几个元素,length并不是计数的作用。这是我自学是对数组长度最大的误解。
正确的理解是:数组的length属性等于最大正整数索引+1
而,数组的索引可以随便改变,那么length属性也是一个动态的值,可以变化。

var arr = []undefinedarr[]    length:0    __proto__:Array(0)arr[10] = 我是第10个元素,我前面没有元素,但是数组的长度绝对是11,你信不信"我是第10个元素,我前面没有元素,但是数组的长度绝对是11,你信不信"arr(11) [empty × 10, "我是第10个元素,我前面没有元素,但是数组的长度绝对是11,你信不信"]    10:"我是第10个元素,我前面没有元素,但是数组的长度绝对是11,你信不信"    length:11    __proto__:Array(0)

这个例子一开始是个空数组,长度是0,直接给他一个索引10,可以发现长度立马变为11。

arr[100] = 这次数组长度绝对是101"这次数组长度绝对是101"arr.length101

通过以上的例子,我们反向推理,把可以明白数组长度根本不连续,是动态变化的,即数组长度是可写的。唯一的不变真理是,它的长度永远等于最大索引+1。

2.1 把数组清空的方法

有以上知识可以知道数组长度可以人为改变,进而大胆的猜想,改变长度会不会把数组清空呢?

var arrDemo = [this, is, test]undefinedarrDemo(3) ["this", "is", "test"]    0: "this"    1: "is"    2: "test"    length: 3    __proto__: Array(0)arrDemo[length] = 22arrDemo(2) ["this", "is"]    0: "this"    1: "is"    length: 2    __proto__: Array(0)arrDemo[length] = 11arrDemo["this"]    0: "this"    length: 1    __proto__: Array(0)arrDemo[length] = 00arrDemo[]    length: 0    __proto__: Array(0)

把数组length设为0,证明可以清空数组。

2.2 有趣的一点

由于数组本质上是对象的一种,所以我们可以为数组添加属性,但是这不影响length属性的值。
一定不要有思维定式,以为添加几个新元素,长度就会加几个。

var arr = []undefinedarr[]    length:0    __proto__:Array(0)arr[add] = 我加一个新元素,长度绝对还是0"我加一个新元素,长度绝对还是0"arr[add: "我加一个新元素,长度绝对还是0"]    add: "我加一个新元素,长度绝对还是0"    length:0    __proto__:Array(0)arr[add1] = 我又加一个新元素,长度绝对还是0"我又加一个新元素,长度绝对还是0"arr[add: "我加一个新元素,长度绝对还是0", add1: "我又加一个新元素,长度绝对还是0"]    add: "我加一个新元素,长度绝对还是0"    add1: "我又加一个新元素,长度绝对还是0"    length: 0    __proto__:Array(0)

通过这个例子,一开始元素长度为0,只要你没添加一个正整数的索引,无论你添加多少其他元素,长度永远不会变化。

  • 注意:方括号运算符里面一定要用引号,我总是手抖忘了加。

3. 伪数组(array-like object)

如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为“类似数组的对象”

var obj = {    0: a,    1: b,    2: c,    length: 3,}undefinedobj{0: "a", 1: "b", 2: "c", length: 3}    0: "a"    1: "b"    2: "c"    length: 3    __proto__: Objectobj[0]"a"obj[2]"c"

上面的对象,看着结构特别像但是绝对不是数组。
因为proto指向的就不是Array的prototype,没有指向Array的共有属性,再怎么想也只是模仿,本质不同。不具备数组的其他方法(第四部分将要列举的方法)。

3.1 数组的本质

由伪数组的问题引出真正的数组应该具备什么特点

数组.png
proto必须指向数组的公有属性才是真正的数组对象。

4. 数组实例的常见简单的方法(可以无参或者参数很简单)

4.1 判断数组还是对象

var arr = [a]undefinedArray.isArray(arr)truevar obj = {    0: a,    1: b,    2: c,    length: 3,}undefinedArray.isArray(obj)false

Array.isArray()方法可以判断是不是数组对象,以前学过的instanceOf也可以判断。

arr instanceof Arraytrueobj instanceof Arrayfalse

所以现在有两个方法可以区分是数组还是对象了。

4.2 valueOf(),toString()

  • valueOf()返回数组本身
var arr = [a, b]undefinedarr.valueOf()(2) ["a", "b"]arr.toString()"a,b"
  • toString()返回数组的字符串形式

4.3 push()

var arr = [a, b]undefinedarr.push(f)3arr(3) ["a", "b", "f"]

向数组的末尾添加元素,返回添加成功后的数组的长度
会改变原数组

4.4 pop()

arr.pop()"f"arr(2) ["a", "b"]

删除数组的最后一个元素,并返回删除的这个元素。

[].pop() // undefined
  • 注意:对空数组使用pop方法,不会报错,而是返回undefined。
    这个方法会改变原数组

push() 和pop()方法一起使用可以模拟栈的数据结构


4.5 join()

以某种形式把数组的所有成员以字符串的形式返回

arr(2) ["a", "b"]arr.join(-)"a-b"

以上是以中划线的形式连接起来

arr.join()"a,b"

如果没有规定格式,则以逗号分隔

var arr = [a, rr, null, undefined]undefinedarr(4) ["a", "rr", null, undefined]arr.join()"a,rr,,"
  • 注意:如果字符串中有null和undefined的,会被转成空字符串。
    该方法不会改变原数组

4.6 concat()

是一个专业合并数组的方法。

var arr = [a, rr, null, undefined]undefinedarr.concat([rrr])(5) ["a", "rr", null, undefined, "rrr"]arr(4) ["a", "rr", null, undefined]

把一个新数组添加到旧数组的后面,返回生成的新数组。
不会改变原数组

4.7 shift()

删除数组的第一个元素,并返回删除的那个元素

arr(4) ["a", "rr", null, undefined]arr.shift()"a"arr(3) ["rr", null, undefined]

会改变原数组


push()与shift()方法结合,可以模拟队列的数据结构


4.8 unshift()

在数组的第一个位置添加元素,并返回添加新元素后的数组长度

arr(3) ["rr", null, undefined]arr.unshift(ffff)4arr(4) ["ffff", "rr", null, undefined]

和shift()方法的作用正好相反。
一定会改变原数组

4.9 reverse()

反转数组,返回反转后的数组

arr(4) ["ffff", "rr", null, undefined]arr.reverse()(4) [undefined, null, "rr", "ffff"]arr(4) [undefined, null, "rr", "ffff"]

会改变原数组

4.10 slice()

提取原数组的一部分,返回一个新的数组

arr(4) [undefined, null, "rr", "ffff"]arr.slice(1,3)(2) [null, "rr"]arr.slice()(4) [undefined, null, "rr", "ffff"]arr.slice(1)(3) [null, "rr", "ffff"]arr(4) [undefined, null, "rr", "ffff"]

arr.slice(1,3)从索引为1的位置开始截取,到索引3停止,但是不包括索引3。
arr.slice()无参是原数组的拷贝
arr.slice(1)从索引为1的位置开始截取,到末尾。

var a = [a, b, c];a.slice(-2) // ["b", "c"]a.slice(-2, -1) // ["b"]

如果slice方法的参数是负数,则表示倒数计算的位置。
上面代码中,-2表示倒数计算的第二个位置,-1表示倒数计算的第一个位置。


slice()方法可以吧伪数组变成真的数组


不会改变原数组

4.11 splice()

删除原数组的一部分成员,返回被删的元素。

arr(4) [undefined, null, "rr", "ffff"]arr.splice(1, 3)(3) [null, "rr", "ffff"]arr[undefined]

arr.splice(1,3),从索引1开始删除,删3个元素!!!
一定要注意和slice区分:splice的第一个参数是删除的起始位置,第二个参数是被删除的元素个数。如果后面还有更多的参数,则表示这些就是要被插入数组的新元素。

var arr = [1, aaa, ff, aff, 1]undefinedarr.splice(1, 3, wu, 999)(3) ["aaa", "ff", "aff"]arr(4) ["1", "wu", 999, 1]

arr.splice(1, 3, wu, 999),从索引1开始删了3个元素,有加上两个元素,wu和999
同样的负数表示倒数第几个位置
会改变原数组
splice()有两个变式

  • 变式1:我只是想单纯的插入一个元素
var a = [1, 1, 1];a.splice(1, 0, 2) // []a // [1, 2, 1, 1]

把第二个参数设为0,就可以在第2个位置插入一个元素了

  • 变式2:我只给一个参数,就是拆分数组,为两个新数组
a(5) [1, 1, 1111, 1, 10]a.splice(2)(3) [1111, 1, 10]a(2) [1, 1]

a.splice(2)从第三个索引处拆分这个数组。

4.12 indexOf(),lastIndexOf()

var arr = [a, f, f, 1]undefinedarr(4) ["a", "f", "f", 1]    0: "a"    1: "f"    2: "f"    3: 1    length: 4    __proto__: Array(0)arr.indexOf(1)3arr.indexOf(f, 3)-1arr.lastIndexOf(f)2

indexOf(),返回括号里面 的元素第一次出现的位置。
如果有两个参数则是表示搜索的位置从第二个参数开始。
如果找不到该元素,则返回-1。
lastIndexOf()返回括号里面的元素最后一次出现的位置。

  • 一个MDN的实战例子:获得数组里面某个元素出现的所有位置(利用循环和返回值-1的特点)
var arr = [a, 0, a, b, a];var arrTemp = []; //空数组用来存储目标元素出现的所有索引var element = a;var index = arr.indexOf(element);while(index != -1){    arrTemp.push(index);    index = arr.indexOf(element, index + 1);}console.log(arrTemp);(3) [0, 2, 4] //a出现在0、2、4索引位置处

注意:这里有个例外
数组里面包含NaN时无法判断

var arr = [a, f, f, NaN]undefinedarr(4) ["a", "f", "f", NaN]    0: "a"    1: "f"    2: "f"    3: NaN    length: 4    __proto__: Array(0)arr.indexOf(NaN)-1arr.lastIndexOf(NaN)-1

arr数组的第四个位置是NaN,但是无法获得索引。
因为indexOf(),lastIndexOf()是严格按照===操作符来检测的,而NaN是唯一的不与自身相等的值。

NaN === NaNfalse1 === 1truea === atrue

奇葩啊,NaN与自己都不相等


5. 数组实例的常见复杂的方法(参数是另一个函数)

5.1 sort()

下面MDN的解释非常棒

sort() 方法在适当的位置对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var fruit = [cherries, apples, bananas];fruit.sort(); // [apples, bananas, cherries]var scores = [1, 10, 21, 2]; scores.sort(); // [1, 10, 2, 21]// 注意10在2之前,// 因为在 Unicode 指针顺序中"10"在"2"之前var things = [word, Word, 1 Word, 2 Words];things.sort(); // [1 Word, 2 Words, Word, word]// 在Unicode中, 数字在大写字母之前,// 大写字母在小写字母之前.

上述代码两点注意

  • 第一点是
    上述代码中的第二部分的[1, 10, 2, 21]是因为
    10的Unicode编码是\u0031\u0030,2的Unicode编码是\u0032,所以10排在2的前面
  • 第二点是上述代码中的第三部分的[1 Word, 2 Words, Word, word]是因为
    Word的Unicode编码是\u0026\u0023\u0033\u0039\u003b\u0057\u006f\u0072\u0064\u0026\u0023\u0033\u0039\u003b
    word的Unicode编码是\u0026\u0023\u0033\u0039\u003b\u0077\u006f\u0072\u0064\u0026\u0023\u0033\u0039\u003b
    所以 Word排在word前面。
    各种编码查询站长工具
    sort方法明显的会改变原数组啊
  • 我们通常不想使用默认的升序排列,sort方法可以传入函数来改变顺序。
    MDN的语法是arr.sort(compareFunction)
    compareFunction这个函数用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。
    compareFunction这个函数基本的规则是传入两个参数
function compareNumbers(a, b) {  return a - b;}
a,b参数比较代表的意思
compareFunction(a, b) < 0a在b之前
compareFunction(a, b) > 0b在a之前
var a = [1, 20, 30, -7]undefineda(4) [1, 20, 30, -7]a.sort(function(a,b){return b-a})(4) [30, 20, 1, -7]

降序排列。

  • 也可以根据具体需求来根据属性来排列
var students = [小明,小红,小花]; var scores = { 小明: 59, 小红: 99, 小花: 80 }; students.sort(function(a, b){    return scores[b] - scores[a]});(3) ["小红", "小花", "小明"]

以上是把三个学生根据成绩从大到小排列的

5.2 map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
不影响原数组。

var arr = [aa, bb, cc]arr.map(function(value){    return value = value + "f"})(3) ["aaf", "bbf", "ccf"]arr(3) ["aa", "bb", "cc"]

以上代码中map()方法里面传入的函数是一个把数组每个值都加上一个f。
每个元素末尾都加上一个f,然后返回这个新的数组,原数组没有任何变化的。
我初学的时候,看到上述代码反正很懵逼,这玩意咋出来的这个结果呢。琢磨了很久,还是觉得MDN的解释明白,只不过需要看个3、4遍就能明白了。
语法规范是:

let new_array = arr.map(function callback(currentValue, index, array) {     // Return element for new_array }[, thisArg])

callback
生成新数组元素的函数,使用三个参数:
currentValue
callback 的第一个参数,数组中正在处理的当前元素。
index
callback 的第二个参数,数组中正在处理的当前元素的索引。
array
callback 的第三个参数,map 方法被调用的数组。
thisArg
可选的。执行 callback 函数时 使用的this 值。
返回值
一个新数组,每个元素都是回调函数的结果。

[1, 2, 3].map(function(currentValue, index, arr){    return currentValueindex})(3) [0, 2, 6]

其实callback 的第三个参数可以不写,也知道调用的到底是哪个Array。

[1, 2, 3].map(function(currentValue, index){    return currentValueindex})(3) [0, 2, 6]

当你用map()方法的时候,callback 函数会被自动传入三个参数:数组的每一个元素,元素索引,原数组本身。既然原数组本身可以省略,那么由剩下的两个特点我们发散一下,会想到前面我们讲过,伪数组(比如字符串)也具备这两个特点会不会也能用map()方法呢,接下来做个实验。
哈哈哈哈,愚蠢的人类,你想的美,怎么可能直接使用呢,必须把伪数组转换一下的。

  • 第一种转换方法
var upper = function (str){    return str.toUpperCase();};[].map.call(abc, upper)(3) ["A", "B", "C"]

以上是通过map函数的call方法间接使用

  • 第二种转换方法
abc.split().map(upper)(3) ["A", "B", "C"]

abc.split()把字符串转成数组["a", "b", "c"]


至此,字符串和数组相互转化的方法,都学到了,总结如下。

  • 数组转字符串 三种方法
[1, 3, 4].toString()"1,3,4"[1, 3, 4] + "1,3,4"[1, 3, 4].join()"1,3,4"
  • 字符串转数组 一种方法
abxc.split()(4) ["a", "b", "x", "c"]

在map()的最后,要注意数组的空位问题。
我们先看一个map()处理含有空位的数组的奇怪现象

var f = function(n){ return n + 1 };undefined[1, , 2].map(f) (3) [2, empty, 3][1, undefined, 2].map(f)(3) [2, NaN, 3][1, null, 2].map(f)(3) [2, 1, 3]

可以发现[1, , 2].map(f)空位未执行map()。map方法不会跳过undefined和null,但是会跳过空位。

null + 1 = 1true + 1 = 2false + 1 = 1//好奇怪
  • 用一个更直观的例子来证明map方法会跳过空位
Array(2).map(function (){  console.log(enter...);  return 1;})(2) [empty × 2]    length: 2    __proto__: Array(0)

本文一开始就讲了Array[2]始构造了长度为2的空数组,没有打印出enter,说明未执行map()方法。

使用 map 方法处理数组时,数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中:原数组中新增加的元素将不会被 callback 访问到;若已经存在的元素被改变或删除了,则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值;而被删除的元素将不会被访问到。


以上引入了数组的空位(hole)概念,那什么才是数组的空位呢
var a= [1, , 2] 中间就是一个空位

var a= [1, , 2]undefineda(3) [1, empty, 2]    0: 1    2: 2    length: 3    __proto__: Array(0)a[1]undefined

可以看到,空位计入数组长度,空位可读取,但是是undefined。
delete命令可以删除数组内的一个元素

a(3) [1, empty, 2]a[0]truea(3) [empty × 2, 2]    2: 2    length: 3    __proto__: Array(0)

delete命令删除成功,返回true,但是length不变,说明空位可以被读取到,所以用delete命令无法清空数组。目前把数组清空的唯一方法就是把length属性改为0。
换句话说length属性不能过滤空位
当使用length属性进行数组遍历时,一定要非常小心。

数组的某个位置是空位,与某个位置是undefined,是不一样的。
为什么不一样呢。

  • 如果是空位,使用数组的forEach方法(接下来重点研究)、for...in结构、以及Object.keys方法进行遍历,空位都会被跳过。
var a = [1, , , 5]undefineda(4) [1, empty × 2, 5]    0: 1    3: 5    length: 4    __proto__: Array(0)//只打印出了已经存在具体数值的1和5a.forEach(function(x){console.log(x)})15undefined//只有0索引和3索引for (var i in a) {  console.log(i);}03undefined//只有0索引和3索引Object.keys(a)(2) ["0", "3"]    0: "0"    1: "3"    length: 2    __proto__: Array(0)
  • 如果是undefined,使用数组的forEach方法(接下来重点研究)、for...in结构、以及Object.keys方法进行遍历,不会被跳过。
var a = [undefined, undefined, undefined];a.forEach(function (x, i) {  console.log(i + .  + x);});// 0. undefined// 1. undefined// 2. undefinedfor (var i in a) {  console.log(i);}// 0// 1// 2Object.keys(a)// [0, 1, 2]

上面的对比可以知道,空位就是数组没有这个元素,所以不会被遍历到,而undefined则表示数组有这个元素,值是undefined,所以遍历不会跳过。


5.3 forEach()

该方法与map()类似,都是使数组的每个元素执行一个函数。与map()的最大区别是没有返回值,而map()返回一个新的数组。forEach()只关心数据的操作,而不关心返回值。forEach()方法传入的函数,实际上是有3个值。
MDN的语法规范

array.forEach(callback(currentValue, index, array){    //do something}, this)array.forEach(callback[, thisArg])

参数列表的含义与map()方法的每个参数含义相同。
callback()函数的array参数,通常省略,自己要脑补上。

//x就是数组的每一个元素,i是每一个元素的索引arr.forEach(function(x, i){    console.log(i + :  + x)})0: 11: 22: 3

谁去调用的forEach()方法,那么callback()里面的array就会自动传入那个数组,但是是隐藏的。和我一样的初学者,都曾怀疑过,哪里传进来的数组呢,最好的答案都在MDN的callback()函数的语法规则里面,具体的细节分析和map()的分析一样。

  • 注意: 用forEach()方法遍历数组,无法再某个条件时停止遍历,此时应该用普通的for循环
var arr1 = [1, 2, 3]undefinedfor (let i = 0; i < arr1.length; i++){    if(arr1[i] === 2){break;}    console.log(i)}0

上面代码中,执行到数组的第二个成员时,就会中断执行。forEach方法做不到这一点。

  • 与map()方法一样,forEach方法会跳过数组的空位。而不会跳过undefined和null。
var log = function (n) { console.log(n + 1);};[1, undefined, 2].forEach(log)// 2// NaN// 3[1, null, 2].forEach(log)// 2// 1// 3[1, , 2].forEach(log)// 2// 3
  • 当然了,forEach方法也可以用于类似数组的对象和字符串。
var obj = {  0: 1,  a: hello,  length: 1}Array.prototype.forEach.call(obj, function (value, i) {  console.log( i + : + value);});// 0:1var str = hello;Array.prototype.forEach.call(str, function (value, i) {  console.log( i + : + value);});// 0:h// 1:e// 2:l// 3:l// 4:o

对象和字符串使用foreach一定要用Array.prototype.forEach.call()的。

forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()) ,之后的元素将被跳过

ε=(´ο`)))唉,上面这段话啊,可以看出forEach()和map()函数如此的相似啊。

  • 举一个MDN上面的例子,一旦数组被修改了,遍历不受你的影响
var words = ["one", "two", "three", "four"];words.forEach(function(word) {  console.log(word);  if (word === "two") {    words.push(aaa);  }});onetwothreefour

我们发现遍历出了原来的所有元素,在forEach()开始之后的添加的aaa并不会遍历到。
不过MDN的例子比我的难度大多了啊。

var words = ["one", "two", "three", "four"];words.forEach(function(word) {  console.log(word);  if (word === "two") {    words.shift();  }});// one// two// four

当到达包含值"two"的项时,整个数组的第一个项被移除了,这导致所有剩下的项上移一个位置。因为元素 "four"现在在原数组的第三个位置,three跑到了第二个位置,而此时要去遍历第三个位置,所以不会打印three。

5.4 filter()

filter方法的参数是一个函数,所有数组成员依次执行该函数,返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。
通俗的理解就是过滤器。callback()函数与以上两个一样,也是传入三个参数。
第一个参数是当前数组成员的值,这个是必须的。

var arr = [1, 3, 5, 7]undefinedarr.filter(function(value){return value>5})[7]arr.filter(function(value){return value>1})(3) [3, 5, 7]

可以理解为给filter()传入的函数一个规则,满足规则的才能返回。

5.5 reduce()

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。
以上是MDN的解释,挺难理解字面意思的。直接用实例来理解吧。

  • 累加求和
var arr = [1, 3, 10, 6] undefinedarr.reduce(function(preSum, ele){    return preSum + ele;})20

reduce()函数传入一个函数作为参数,函数里面传入两个参数,preSum默认是数组的第一个元素,每次都把数组的两个元素相加并返回,ele就是每个数组元素。
你也快成规定起始的累加值

arr.reduce(function(preSum, ele){    return preSum + ele;}, 10)30

起始的累加值是10,那么加上数组的20就是30。

  • 用reduce表示map()
var arr = [1, 3, 4]undefinedarr.reduce(function(arr, n){    arr.push(n2)    return arr}, [])//[]空数组作为一个初始值(3) [2, 6, 8]

利用reduce()完成了map()一样的功能

  • 用reduce表示filter()
var arr = [1, 3, 4, 10, 30]undefinedarr.reduce(function(arr, n){    if(n>3){        arr.push(n)    }    return arr}, [])(3) [4, 10, 30]

如果原数组里面的值大于3,就放到新的数组里面。和filter()道理一样。

  • 计算数组里面技术的和
    var a = [1,2,3,4,5,6,7,8,9]
    计算所有奇数的和
var a = [1,2,3,4,5,6,7,8,9]a.reduce(function(sum, n){    if(n % 2 === 0){        return sum    } else{        return sum + n    }})25

先判断一下,再把奇数相加

5.6 几个方法组合使用

  • 计算数组的偶数和
    给定一个 数组 var a = [1,2,3,4,5,6,7,8,9]
  1. 获取所有偶数
  2. 得到所有偶数的平方
a.filter(function(n){  if (n %2 ===0){    return n  }}).map(function(n){  return nn})//[4,16,36,64]

先调用filter()获得所有偶数,再调用map()获得所有偶数平方和

5.7 some(),every()

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
传入的参数也是一个callback()函数,callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。其实一般只要发现时传入callback()函数,基本都是这些参数。

arr(5) [1, 3, 4, 10, 30, notNumber: "not a number"]    0: 1    1: 3    2: 4    3: 10    4: 30    notNumber: "not a number"    length: 5    __proto__: Array(0)arr.some(function(value, index){    return index > 5})falsearr.some(function(value, index){    return index > 3})true

some()方法的作用是只要数组中的某个元素满足传入的函数的要求就返回true

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

var arr = [1, 2, 3, 4, 5];arr.every(function (elem, index, arr) {  return elem >= 3;});// false

every()是要求数组的所有元素都满足传入的函数的要求才返回true

  • 注意:对于空数组,some方法返回false,every方法返回true,回调函数都不会执行。
function isEven(x) { return x % 2 === 0 }undefined[].every(isEven)true[].some(isEven)false

对上面的结果,我又有什么办法呢,只能选择背过呗。
这两个方法都不改变原数组

6. 上述数组的方法的使用总结

数组的上述方法种类繁多,不过有几个特点很明显,一些方法会改变原数组,一些方法不会改变原数组,我以这个细节把上述方法分类如下

6.1 改变原数组的方法

方法名字方法作用
push()在元素末尾添加元素,返回添加新元素后的数组长度
pop()删除数组末尾的元素,返回删除的那个元素。与push()方法一起模拟栈这个数据结构
shift()删除数组的第一个元素,返回删除的那个元素。与push()方法结合,模拟队列这个数列这个数据结构
unshift()在数组的起始位置添加新元素,返回添加新元素后的数组长度
reverse()把数组的每一个元素的位置互换,返回翻转后的数组
splice()根据方法传入的参数删除原数组的部分元素,返回被删除的元素。可以用来拆分数组
indexOf(),lastIndexOf()返回括号里面 的元素第一次出现和最后一次出现的位置。NaN元素无法获得位置
sort()默认按照数组元素的Unicode码点排序,可以自己传入函数,规定排序准则

6.2 不改变原数组的方法

方法名字方法作用
join()以某种形式把数组的所有元素以字符串的形式返回,默认以逗号分隔,返回生成的新数组
concat()专业合并数组,把新数组添加到旧数组的后面,返回生成的新数组
slice()根据方法传入的参数提取原数组的部分,返回提取的这个新数组也可以用来把伪数组变成真数组
map()必须传入一个callback()函数,数组的每一个元素执行这个函数,返回执行回调函数后的新数组。该方法会跳过空位
forEach()必须传入一个callback()函数,数组的每一个元素执行这个函数。没有返回值,无法终止循环
filter()必须传入一个callback()函数,数组的每一个元素执行这个函数,返回结果为true的成员组成一个新数组返回
reduce()对数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。具体理解看例子吧
some()只要数组中的某个元素满足传入的函数的要求就返回true
every()数组的所有元素都满足传入的函数的要求才返回true

正是因为以上的方法对原数组不造成影响,所以我们可以组合使用filter()、map()先过滤再匹配。

6.3 数组的遍历

对于有序无序的数据,我们有时候会希望获得所有的key或者value,数组对这个需求尤甚。
一般来说,数组的遍历有三种方法

  • for...in循环
var arr = [1, 3, 4, 10, 30]undefinedfor (var key in arr){    console.log(arr[key])}1341030
  • 切忌把arr[key]手抖写成了arr.key。因为arr.key等同于arr[key],很明显数组没有这个名字叫key的键。
    for...in循环有个弊端就是它会把非数字的索引也打印出来
arr(5) [1, 3, 4, 10, 30]arr.notNumber = not a number"not a number"arr(5) [1, 3, 4, 10, 30, notNumber: "not a number"]for (var key in arr){    console.log(key + : + arr[key])}0: 11: 32: 43: 104: 30notNumber: not a number

如果我们只关心数组的数字索引,用传统的下面的传统for循环

  • 传统for循环
arr(5) [1, 3, 4, 10, 30, notNumber: "not a number"]for (let i = 0; i < arr.length; i++){    console.log(i + : + arr[i])}0:11:32:43:104:30

这种方法其实是我们人为规定了只遍历数字索引,O(∩_∩)O哈哈~

  • forEach()循环
arr(5) [1, 3, 4, 10, 30, notNumber: "not a number"]arr.forEach(function(value, index){    console.log(index + : + value)})0:11:32:43:104:30

这种方法也不会遍历非数字的索引。

网友评论