一些js数组操作

虽然很基础，但是还是想总结一下，总有时候用到的时候想不起来需要文档帮助。
1.sort()它会改变原来的数组。

操作例子

但是sort()又是常用的数组操作，特别是一些管理系统当中，我说一个实际项目中的例子，我做过一个公告列表，后台给的列表的排序是置顶的排前，然后再是时间排序，然而我需要得到这个数组中时间最新的消息显示在系统顶部，排序是个简单有效的办法，但是不能改变列表排序。不重新排序的方法：

解决方法

不对原来的数组排序，[...arr]就形成了一个新的数组，和arr一致的数组。
2.push()改变原数组，unshift()改变原数，reverse()改变原数，concat()，push()是在数组末尾增加，unshift()在数组头部增加。又一个实际组合起来用的例子，日期组件：

数据

 

操作

这个例子比较复杂，包括了日期的各种巧妙用法，其实简单的对应数组来说可以这样理解：

日历数组简单化思想

当然如果不是在这个日历环境下，就截图里的数组和期望而言还可以又很多简单的方法，例如：

reverse() and concat()

可以看出reverse()改变了原来的数组，功能是反序，concat()功能拼接数组，不会改变原来数组。concat()可以拼接多个数组。
3.toString()，这个我也没有在实际项目中用到过。来看下例子。

toString()例子

可以看出不改变原来的数组，会展开数组中的数组，不会展开数组里的obj。
jion(), 和toString()相似。但是可以在每个元素后添加需要的元素。最常见的是日期格式的显示。

join()日期格式

对得到的字符串切片成数组再jion()连接的符号形成想要的格式是很常见的用法。
4.splice()改变原来的数组，slice()，这文档里都讲很清楚，有一点要注意都是，这两个操作都可以填负数，代表从尾部算起，但是尾部第一个是-1，头部第一个是0，容易愣一下。

splice()

可以看出它不仅改变了原来都数组还产生了“切片”，返回了即将被替代都部分。

slice()

可以看出它不改变原有数组，而是产生了一段切片，包括前一个下标不包括下一个下标，相当于截取[a,b)。
5.pop(),shift()。
!例子
改变原来的数组，会产生被删掉的元素的“切片”，当数组为空是不会报错。
总结一下：
改变原数组的是：sort()，push()，unshift()，splice()，reverse()，pop()，shift(), fill(),
再补一个数组去重：（es6）
var arr = [...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
得到的就是没有重复元素的数组了，注意的是[...new Set([2,"12",2,12,1,2,1,6,12,13,6,'我','我',{'a':1},{'a':1},{'a':2}])]这样的复杂数组中{}和[]是都代表不同的元素。得到：[2, "12", 12, 1, 6, 13, "我", {…}, {…}, {…}]。
fill():
a = Array(9).fill('1') //一个参数则全部填充！
a
(9) ["1", "1", "1", "1", "1", "1", "1", "1", "1"]
a.fill(2)
(9) [2, 2, 2, 2, 2, 2, 2, 2, 2]
a.fill(1,2)
(9) [2, 2, 1, 1, 1, 1, 1, 1, 1]
a.fill(3,3)
(9) [2, 2, 1, 3, 3, 3, 3, 3, 3]
a.fill(3,1,2)
(9) [2, 3, 1, 3, 3, 3, 3, 3, 3]
a.fill('3',1,2)
(9) [2, "3", 1, 3, 3, 3, 3, 3, 3]
a.fill('3',1,3)
(9) [2, "3", "3", 3, 3, 3, 3, 3, 3]
a.fill('4',1,1) //间隔0 则不会改变
(9) [2, "3", "3", 3, 3, 3, 3, 3, 3]
a.fill('4',1,5)
(9) [2, "4", "4", "4", "4", 3, 3, 3, 3]
fill(value,start,end)
区间：[start,end)
find() ：
a = [1,2,3]
(3) [1, 2, 3]
a.find(num => num === 1)
1
a.find(num => num === '1')
undefined //不存在则返回 undefined
a.findIndex(num => num === 1)
0
a.findIndex(num => num === 2)
1
a.findIndex(num => num === '2')
-1 //不存在则返回 -1
a.find(num => num === 2)
2
a.fill(2,1,4)
(3) [1, 2, 2]
a.findIndex(num => num === 2)
1 //存在则返回找到的第一个符合的元素的下标
a.find(num => num === 2)
2 //存在则返回本身

 

1. reduce()

a = [0,1,2].reduce((count,i) => count + i)   // 累加
a = [0,1,2].reduce((count,i) => count * i)   //累乘
a = [0,1,2].reduce((count,i) => count - i)     //累减

 

 更多内容: http://www.cswritehelp.com/contact/index.html