js中的Array数组方法

创建数组的方法

• 通过字面量创建

  let arr = [1,2,4]
  

• 通过类创建

  let arr = new Array(3) // 返回一个数组长度为3的空数组 =>[empty × 3]
  

目录

splice方法
slice方法
join方法
concat方法
filter方法
some方法
map方法
sort方法
indexOf方法
find方法
forEach方法
reduce方法
reverse方法
flat方法
fill方法

Array类私有方法

• splice方法

/*    
*     方法:splice(start,deleteCount,item1,item2...)   
*     功能：可实现数组项的删除、插入、替换
*     返回值：由被删除的元素组成的一个数组，如果没有被删除则返回空数组
*     参数：start:删除或插入或替换的起始位置
*                deleteCount（可选）:删除或插入或替换的数量。若忽略，
*                     则从start开始后边都会被删除
*                item1（可选）:删除或插入或替换的值
*/

let arr = [1,2,3,4,5]
let ary = arr.splice(1,2) // 从数组下标1开始删除2个元素
console.log(arr,ary) //arr:[1,4,5]   ary:[2,3]
ary = arr.splice(1,2,2,3)// 从数组下标1开始替换2个元素为2，3
console.log(arr,ary) //arr:[1,2,3]   ary:[4,5]
ary = arr.splice(3,0,4,5)// 从数组下标3开始增加2个元素4，5
console.log(arr,ary) //arr:[1,2,3,4,5]   ary:[]

• slice方法

/*    方法:slice(start,end)
*     功能：浅拷贝数组中的某段数据(浅拷贝说明如果是引用类型数据则拷贝的是引用地址)
*     返回值：返回一个浅拷贝了某段数据的新数组
*     参数：start(可选):起始位，对应数组下标（包含该位）
*                end(可选):结束位，数组下标（不包含该位）
*/

let arr = [1,2,3,4,{name:'good'}]
let ary = arr.slice(1,2) // 从数组下标1浅拷贝到数组下标2前
console.log(arr,ary) //arr:[1,2,3,4,{name:'good'}]   ary:[2]
ary = arr.slice()// 浅拷贝整个数组
console.log(arr,ary) //arr:[1,2,3,4,{name:'good'}]   ary:[1,2,3,4,{name:'good'}]
ary = arr.slice(3)// 从数组下标3开始浅拷贝
console.log(arr,ary) //arr:[1,2,3,4,{name:'good'}]   ary:[4,{name:'good'}]
ary[0] = 100
ary[1].name = 'bad'
console.log(arr,ary) //arr:[1,2,3,4,{name:'bad'}]   ary:[100,{name:'bad'}]

• join方法

/*    方法:join(separator)
*     功能：用分隔符将数组中的每一项连接起来形成字符串
*     返回值：返回一个用分隔符连接起来的字符串
*     参数：separator(可选):分隔符（为空时，默认为’，‘）
*/

let arr = [1,2,3,4]
let ary = arr.join() // 用默认逗号分隔符将数组中的每一项连接起来形成字符串
console.log(arr,ary) //arr:[1,2,3,4]   ary:"1,2,3,4"
ary = arr.join("")// 将数组中的每一项连接起来形成字符串
console.log(arr,ary) //arr:[1,2,3,4]   ary:“1234”
ary = arr.join('good')// 用'good'将数组中的每一项连接起来形成字符串
console.log(arr,ary) //arr:[1,2,3,4]   ary:"1good2good3good4"
arr = [1,2,3,undefined,4,null]
ary = arr.join() // 如果数组元素为undefined或null，都返回空
console.log(arr,ary) //arr:[1,2,3,undefined,4,null]  ary:"1,2,3,,4,"
ary = arr.join("") // 如果数组元素为undefined或null，都返回空
console.log(arr,ary) //arr:[1,2,3,undefined,4,null]  ary:"1234"

• concat方法

/*    方法:concat(val1,val2....)
*     功能：合并一个或多个数组，返回新的数组，原数组不会被改变。数组元素若是引用类型，也为浅拷贝
*     返回值：返回一个新的数组（浅拷贝）
*     参数：val(可选):数组
*/

let arr1 = [1,2,3]
let arr2 = [4,5,6,{name:'good'}]
let ary = arr1.concat(arr2) // 连接两个数组
console.log(arr1,ary) //arr1:[1,2,3]   ary:[1,2,3,4,5,6,{name:'good'}]
ary = arr1.concat(arr2) 
ary[6].name = 'bad'
console.log(arr2,ary) //arr2: [4,5,6,{name:'bad'}] ary:[1,2,3,4,5,6,{name:'bad'}]
ary = arr1.concat()
console.log(arr1,ary) //arr1:[1,2,3]   ary:[1,2,3] 

• filter方法

/*    方法:filter(callback(item,index,array))
*     功能：创建一个新数组，其包含满足所提供方法的元素
*     返回值：返回一个新的数组,满足提供的方法的元素
*     参数：callback:用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。
*/

let arr = [1,2,3]
let ary = arr.filter(item=>(){
  return item>1
}) // 过滤大于1的元素
console.log(arr,ary) //arr1:[1,2,3]   ary:[2,3]
arr = [1,2,3,[3,4]]
ary = arr.filter(item=>{
  return item>1
}) // 过滤大于1的元素
console.log(arr,ary) //arr: [1,2,3,[3,4]]  ary: [2,3]

• some方法

/*    方法:some(callback(item,index,array))
*     功能：测试数组是否至少满足一次所提供的函数
*     返回值：Boolean  =>至少满足一次则为true,反之为false
*     参数：callback:用来测试数组的每个元素的函数。
*/

let arr = [1,2,3]
let flag = arr.some(item=>{
  return item==2
}) // 是否存在’2‘这个元素
console.log(arr,flag) //arr:[1,2,3]   flag:true

• map方法

/*    方法:map(callback(item,index,array))
*     功能：用提供的方法遍历一遍数组，形成新数组
*     返回值：数组
*     参数：callback:遍历每个元素的方法
*/

let arr = [1,2,3]
let ary = arr.map(item=>{
  return item*2
}) // 给数组每位元素都乘以2
console.log(arr,ary) //arr:[1,2,3]   ary:[2,4,6]

• sort方法

/*    方法:sort(compareFunc(firstEl,secondEl))
*     功能：对数组进行排序并返回
*     返回值：排序后的数组，原地排序
*     参数（可选）：compareFunc(firstEl,secondEl)
*                firstEl: 数组的第二项a[1]
*                secondEl: 数组的第一项a[0]
*                如果compareFunc>0,那么firstEl排在secondEl之后
*                如果compareFunc=0,那么firstEl和secondEl的相对位置不变
*                如果compareFunc<0,那么firstEl排在secondEl之前
*/

let arr = [1,2,3]
arr.sort((firstEl,secondEl)=>{
  return secondEl - firstEl
}) // 实现数组从大到小排序
console.log(arr) // arr:[3,2,1]
arr = [1,2,3,34,31,4]
arr.sort()
console.log(arr) // arr:[1,2,3,31,34,4]

• indexOf方法

/*    方法:indexOf(searchEl,fromIndex)
*     功能：寻找索引
*     返回值：在数组中的索引位置
*     参数：
*                searchEl: 查找的元素值
*                fromIndex(可选): 开始查找的索引值
*/

let arr = [1,2,3]
let index = arr.indexOf(2) // 查找元素’2‘的索引值  
console.log(index) // index:1
arr = [1,2,3,34,31,4]
index = arr.indexOf(31,3)// 从索引值3开始寻找元素31
console.log(index) // index:4

• find方法

/*    方法:find(callback(item,index,array))
*     功能：找到第一个符合所提供的函数的条件，并返回该元素
*     返回值：符合条件的元素
*     参数：
*                item: 当前遍历到的元素
*                index(可选): 当前遍历到的索引
*                array(可选): 数组本身
*/

let arr = [1,2,3,4]
let element = arr.find(item=>{return item>2}) // 查找第一个大于2的元素
console.log(element) // element:3
// 需要注意它与filter的区别：find是找到第一个满足函数的元素，而filter是所有满足函数的元素

• forEach方法

/*    方法:forEach(callback(item,index,array))
*     功能：使用函数遍历数组所有元素
*     返回值：undefined
*     参数：
*                item: 当前遍历到的元素
*                index(可选): 当前遍历到的索引
*                array(可选): 数组本身
*/

let arr = [1,2,3,4]
arr.forEach((item,index)=>{arr[index]+=item}) // 查找第一个大于2的元素
console.log(arr) // arr:[2,4,6,8]
// 需要注意它与map的区别：map是返回新数组，而forEach返回值是undefined

• reduce方法

/*    方法:reduce(callback(accumulator, currentValue,index,array),initialValue)
*     功能：所有数组元素执行一次callback函数,将其结果汇总成单个结果返回
*     返回值：函数累计的结果（也就是accumulator的值）
*     参数：
*                accumulator: 累计值
*                currentValue: 当前遍历到元素
*                index(可选): 当前遍历到的索引
*                array(可选): 数组本身
*                initialValue(可选): accumulator的初始值。若没有，则为数组中第一个元素
*/
// e.g.1:计算各元素重复出现次数
let arr = [1,2,2,3,3,3,5,4]
let count = arr.reduce((accumulator,currentVal)=>{
  if(currentVal in accumulator){
      accumulator[currentVal]++
  }else{
      accumulator[currentVal] = 1
  }
  return accumulator
},{}) 
console.log(arr) // count:{1: 1, 2: 2, 3: 3, 4: 1, 5: 1}

// e.g.2:按照属性进行统计
let people = [
    { name: 'Alice', age: 21 },
    { name: 'Max', age: 20 },
    { name: 'Jane', age: 20 }
  ]
function groupBy(property,objArray){
  return objArray.reduce((accu,val)=>{
      if(val[property] in accu){
          accu[val[property]].push(val)
      }else{
        accu[val[property]] = Array.of(val)
      }
    return accu
  },{})
}
let groupByAge = groupBy('age',people) 
// 输出如下：
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

// e.g.3:实现数组去重
let myArray = ['a', 'b', 'a', 'b', 'c', 'e', 'e', 'c', 'd', 'd', 'd', 'd']
let myOrderedArray = myArray.reduce((acc,val)=>{
    if(!acc.includes(val)){
      acc.push(val)
    }
    return acc
},[])
console.log(myOrderedArray) // ["a", "b", "c", "e", "d"]

• reverse方法

/*    方法:reverse()
*     功能：反转数组，即第一项变成最后一项，最后一项变为第一项
*     返回值：经反转后的原数组
*/

let arr = [1,2,3,4]
let reverseArr = arr.reverse() // 反转数组
console.log(arr,reverseArr ) // arr:[4,3,2,1]  reverseArr :[4,3,2,1] 

• flat方法

/*    方法:flat(depth)
*     功能：通过指定深度遍历各元素，并且将个元素组成新数组返回
*     返回值：经指定深度遍历各元素后组成的新数组
*     参数：
*           depth(可选)：指定要提取嵌套数组的结构深度，默认值为 1
*/

let arr = [1,2,3,[4,5,6]]
let flatArr= arr.flat() // 按照深度为1进行提取元素，并组成新数组
console.log(arr,flatArr) // arr:[1,2,3,[4,5,6]]  flatArr:[1,2,3,4,5,6]

// 使用 Infinity，可展开任意深度的嵌套数组
let arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]
arr.flat(Infinity) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

• fill方法

/*    方法:fill(val,start,end)
*     功能：填充数组，改变原数组
*     返回值：填充后的数组
*     参数：
*     val：要填充的值
*     start(可选)：要填充的起始位置
*     end(可选)：要填充的中止位置
*/

let arr = [1,2,3,4,5]
let fillArr= arr.fill(100,2,3) // 从数组下标2开始到数组下标3前，填充’100‘
console.log(arr,fillArr) // arr:[1,2,100,4,5]  flatArr:[1,2,100,4,5]
fillArr= arr.fill(100,2) // 从数组下标2开始填充’100‘
console.log(arr,fillArr) // arr:[1,2,100,100,100]  flatArr:[1,2,100,100,100]
fillArr= arr.fill(100) // 从头开始填充’100‘
console.log(arr,fillArr) // arr:[100,100,100,100,100]  flatArr:[100,100,100,100,100]