JS中的数组 Js

2021-11-01 约 1195 字 阅读时长3 分钟

js中的数组

基本操作

js
 1let arr=[1,2,3,4,5,6,7,8,9,0]        //定义数组
 2
 3arr.push(123)   //追加元素到数组末尾 +1
 4
 5arr.pop()        //取出数组末尾元素,数组长度 -1
 6arr.shift()        //取出数组首部元素,数组长度 -1
 7
 8arr.indexOf(5)    //返回数组中首次出现该元素的索引,未匹配返回 -1
 9arr.includes(3)    //判断数组中是否包含某个元素,返回 true/false
10
11//splice(a,b,...)  a为位置,b为删除几个元素,...为添加的元素;返回值为删除元素构成的数组
12arr.splice(1,0,12,13)  //在arr数组第二位元素,删除0个元素,并插入12,13
13
14// join 拼接数组中所有元素,返回字符串
15arr.join(".")

常用方法

js
 1let list = [
 2            { name: "zs3", data: "20200110", age: 10 },
 3            { name: "zs6", data: "20200113", age: 13 },
 4            { name: "zs2", data: "20200109", age: 9 },
 5            { name: "zs8", data: "20200115", age: 15 },
 6            { name: "zs4", data: "20200111", age: 11 },
 7            { name: "zs1", data: "20200108", age: 8 },
 8            { name: "zs7", data: "20200114", age: 14 },
 9            { name: "zs5", data: "20200112", age: 12 }
10        ]

sort()

数组排序,sort(compareFunction);compareFunction排序顺序的函数,该函数应返回负值、零值或正值,具体取决于参数

sort()函数会更改原数

js
1// compareFunction 排序顺序的函数,该函数应返回负值、零值或正值
2array.sort(sortfunction)    //语法
3
4list.sort((a, b) => {
5    return a.data-b.data   //从小到大
6})

filter()

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

filter()不会更改原数组

js
 1/* 
 2   array.filter(function(currentValue,index,arr), thisValue)
 3   index		可选 当前元素的索引值
 4   arr			可选 当前元素属于的数组对象
 5   thisValue	可选  传入时,回调函数内this的指向,省略了thisValue,或者无效值,那么回调函数的 this 为全局对象
 6*/
 7array.filter(function(currentValue,index,arr), thisValue)  //语法
 8
 9// filter 过滤满足条件数组元素,返回age<15的元素
10list.filter(e=>{
11    return e.age<15
12})

map()

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值

map()不会更改原数组

js
1array.map(function(currentValue,index,arr), thisValue)   //语法
2
3//新数组中每项元素都是原数组每项元素的2倍
4listInt.map(e=>{
5   return e*2
6})

forEach()

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数

js
1array.forEach(function(currentValue, index, arr), thisValue)     //语法
2
3// forEach 遍历数组,无返回值
4list.forEach(e=>{
5    console.log(e)
6})

find()

查找数组中符合条件的元素

js
 1array.find(function(currentValue, index, arr),thisValue)    //语法,返回首次匹配到的元素
 2
 3// find 第一个满足条件的元素,没有返回undefind
 4list.find(e=>{
 5    return e.age===12
 6})
 7
 8
 9array.findIndex(function(currentValue, index, arr), thisValue)   //语法,返回首次匹配到元素的索引
10//返回第一个满足条件元素索引,没有返回 -1
11list.findIndex(e=>{
12    return e.age===12
13})

reduce()

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,聚合函数

js
 1/*
 2  聚合 reduce的使用,所有的 invoiceAmount 的值求和
 3  total	必需。初始值, 或者计算结束后的返回值
 4  currentValue	必需。当前元素
 5  currentIndex	可选。当前元素的索引
 6  arr	可选。当前元素所属的数组对象
 7*/
 8array.reduce(function(total, currentValue, currentIndex, arr), initialValue)    //语法
 9
10//list数组中,所有对象age之和,从0开始累加
11list.reduce((res,item)=>{return res+item.age},0)

对象数组分组

js
 1//对象数组,根据某个属性进行分组
 2function groupBy(arrValue,field){
 3    //所有属性的数组
 4    let fieldArr=arrValue.map(e => { return e[field] })
 5    //去重
 6    fieldArr=Array.from(new Set(fieldArr))
 7    //去除无效属性值
 8    fieldArr=fieldArr.filter(e => { if (e) { return e } })
 9    let resultObj={}
10    //根据属性分组聚合
11    for(let i=0;i<fieldArr.length;i++){
12        let fieldItem=fieldArr[i]
13        //通过属性过滤,并写入对象,对象的键为属性,值为 该属性相等的元素 的数组
14        resultObj[fieldItem]=arrValue.filter(e=>{
15            if(e[field]===fieldItem){
16                return e
17            }
18        })
19    }
20    return resultObj
21}
使用滚轮缩放
按住拖动