数组的操作

join()

将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。不改变原数组

push()

可以接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度改变原数组

unshift()

可以接收任意数量的参数,把它们逐个添加到数组开始,并返回修改后数组的长度改变原数组

pop()

移除数组最后一项,减少数组的 length 值,然后返回移除的项改变原数组

shift()

移除数组第一项,减少数组的 length 值,然后返回移除的项改变原数组

reverse()

方法用于颠倒数组中元素的顺序,然后返回改变的原来的数组。改变原数组

sort()

按升序排列数组项——即最小的值位于最前面,最大的值排在最后面。
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。改变原数组
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。
如:arr.sort((a,b)=>a-b);为升序排列。

concat()

将参数添加到原数组中。这个方法会先创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新构建的数组。不改变原数组
传入的不是数组,则直接把参数添加到数组后面,如果传入的是数组,则将数组中的各个项添加到数组中。如果传入的是一个二维数组

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]

slice()

返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下, slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项(含头不含尾);参数可以为负数,如-2,(例如-2),如果为负值则起始计算方式为(str.length-2),不改变原数组

splice()

很强大的数组方法,它有很多种用法,可以实现删除、插入和替换。

  • 删除:可以删除任意数量的项,只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如, splice(0,2)会删除数组中的前两项。返回被切除的元素的数组,原数组被改变,为切除后剩下的元素
  • 插入:可以向指定位置插入任意数量的项,只需提供 3 个参数:起始位置、 0(要删除的项数)和要插入的项。例如,splice(2,0,4,6)会从当前数组的位置 2 开始插入4和6。返回值为空数组,因为切除的个数为0,改变原数组
  • 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如,splice (2,1,4,6)会删除当前数组位置 2 的项,然后再从位置 2 开始插入4和6。返回被切除的元素的数组,改变原数组
    splice()方法始终都会返回一个数组,该数组中包含从原始数组中删除的项,如果没有删除任何项,则返回一个空数组。

fill()

fill(value, start, end)使用给定value填充数组,从索引start开始end结束,不包含end,可以为负值,如果是负值,从末尾开始计数,改变原数组

flat()

将二维数组变为一维数组,不改变原数组
var newArray = arr.flat(depth),参数说明:depth,可选,指定嵌套数组中的结构深度,默认值为1;若depthInfinity`展开所有嵌套数组。
flat()方法会移除数组中的空项。但undefined、null仍会保留。

flatMap()

相当于map与flat的结合,不改变原数组

indexOf()

接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。返回值为索引或-1

lastIndexOf()

接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的末尾开始向前查找。返回值为索引或-1

reduce()和 reduceRight()

这两个方法都会实现迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。

传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项

下面代码用reduce()实现数组求和,数组一开始加了一个初始值10。

var values = [1,2,3,4,5];
var sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;      //也就是说prev + cur为迭代后函数里的参数prev
},10);
console.log(sum); //25

every()

判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
参数为函数。返回值为boolean

some()

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
参数为函数。返回值为boolean

find():返回通过测试的数组的第一个元素的值

语法:array.find(function(value, index, arr),thisValue)
value:必须,代表当前元素,其他三个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数内this的值,一般用this值,如果这个参数为空,通常undefined会传递给this值

findIndex():返回通过测试的数组的第一个元素的值的索引

语法:array.find(function(value, index, arr),thisValue)
返回值:返回符合测试条件的第一个数组元素的值的索引,如果没有符合条件的则返回undefined。

filter():创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

语法:array.filter(function(value, index, arr),thisValue)
value:必须,代表当前元素,其他三个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回数组,包含了符合条件的所有元素,如果没有符合条件的则返回空数组。

map():返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,map()方法按照原始数组元素顺序依次处理元素

语法:array.map(function(value, index, arr),thisValue)
value:必须,代表当前元素,其他三个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值

返回值:返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

forEach():用于调用数组每个元素,并将元素传递给回调函数(注意没有办法跳出或终止forEach语句,除非抛出异常)

语法:array.forEach(function(value, index, arr),thisValue)
value:必须,代表当前元素,其他三个参数都是可选,index代表当前索引值,arr代表当前的数组,thisValue代表传递给函数的值,一般用this值,如果这个参数为空,undefined会传递给this值
返回值:undefined

从上面的内容我们可以看出,上面的四个语法以及参数的意义是一样的,而且都不会对空数组进行检测,也不会改变原始数组
find()方法主要用来返回数组中符合条件的第一个元素(没有的话,返回undefined)
filter()方法主要用来筛选数组中符合条件的所有元素,并且放在一个新数组中,如果没有,返回一个空数组
map()方法主要用来对数组中的元素调用函数进行处理,并且把处理结果放在一个新数组中返回(如果没有返回值,新数组中的每一个元素都为undefined)
forEach()方法也是用于对数组中的每一个元素执行一次回调函数,但它没有返回值(或者说它的返回值为undefined,即便我们在回调函数中写了return语句,返回值依然为undefined)

copyWithin()

copyWithin(target, start, end)将数组从start到end索引的元素(不包含end)复制到target开始的索引位置,改变原数组

// Base
let a = [1, 2, 3, 4, 5]
let result = a.copyWithin(0, 3, 5)  
console.log(result)                 // [4, 5, 3, 4, 5]
console.log(a)                      // [4, 5, 3, 4, 5]  索引3到5的元素为4和5,复制到从0开始的位置,替换掉了1和2

// More
a = [1, 2, 3, 4, 5]
console.log(a.copyWithin(2))        // [1, 2, 1, 2, 3]  参数只有一个时,start默认为0,end默认为数组长度-1

toLocaleString()

将数组中的每个元素使用各自的toLocaleString()转换后用,拼接,不改变原数组

let a = [1, new Date(), 'a', {m: 1}]
let result = a.toLocaleString()
console.log(result)   // '1,2018/10/3 下午9:23:59,a,[object Object]'
console.log(a)        // [1, Wed Oct 03 2018 21:23:59 GMT+0800 (中国标准时间), "a", {m: 1}]

迭代器对象

entries()

返回一个新的Array迭代器对象,可用for...of遍历(不改变原数组)

keys()

返回一个新的Array迭代器对象,可用for...of遍历(不改变原数组)

values()

返回一个新的迭代器(不改变原数组)

解析数据成树形结构的方法

const comments = [
            { id: 1, parent_id: null },
            { id: 6, parent_id: null },
            { id: 7, parent_id: null },
            { id: 2, parent_id: 6 },
            { id: 2, parent_id: 7 },
            { id: 3, parent_id: 7 },
            { id: 4, parent_id: 7 },
            { id: 2, parent_id: 1 },
            { id: 3, parent_id: 1 },
            { id: 4, parent_id: 2 },
            { id: 5, parent_id: 4 }
        ];
        const nest = (items, id = null, link = 'parent_id') =>
            items
                .filter(item => item[link] === id)
                .map(item => ({ ...item, children: nest(items, item.id) }));

你可能感兴趣的:(数组的操作)