美文网首页
一些js数组操作

一些js数组操作

作者: 码代码的小公举 | 来源:发表于2018-02-28 10:48 被阅读13次

虽然很基础,但是还是想总结一下,总有时候用到的时候想不起来需要文档帮助。
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)     //累减

相关文章

  • JS数组常用操作

    当我们想要做出一些JS的效果,很多都是要对数组进行一些操作,特别是学到JS后期的时候,发现很多之前JS数组基本的操...

  • js-数组的基本操作

    本文主要介绍js数组元素的一些基本操作,常用的一些方法 关键词:创建数组、新增数组元素、删除数组元素、将数组变成字...

  • 一些js数组操作

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

  • js笔记

    js数组 删除某个元素 js数组是否含有某个元素 判断value为undefined cookie操作

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • JS jsonArray操作

    JS jsonArray操作 js对数组对象的操作以及方法的使用 如何声明创建一个数组对象:var arr = n...

  • JS对象 & JSON & JS数组操作

    JS对象 & JSON & JS数组操作 JSON 格式(JavaScript Object Notation 的...

  • JS中的数组

    目的 了解数组的定义。 了解数组的一些操作,比如:删除,添加,修改等。 前言 学习了智能社的一些 js 课程,觉得...

  • js对象数组操作 数组操作

    var numbers = [1, 2, 3];var newNumbers1 = numbers.map(fun...

  • JS数组操作

    splice 用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数 开始索引 删除元...

网友评论

      本文标题:一些js数组操作

      本文链接:https://www.haomeiwen.com/subject/qzzvxftx.html