前言

作为一个资深的前端各种数组的操作(包括数组对象的操作)非常的频繁在加上各种 es5+的新方法更是好用

1. 关于一个程序员的表单

突然在某个群里看到程序猿给妹纸写一个假吧意思很浪漫的颜色随机的代码求优化

var strs = ''
for (var i = 1; i <= 952; i++) {
  strs += `,想你的第${i}天`
}
var style = []
for (var i = 1; i <= 952; i++) {
  var color = '',
    colorStr = 'abcdef1234567890'.split('')
  for (var j = 0; j < 6; j++) {
    color += colorStr[Math.floor(Math.random() * 16)]
  }
  style.push(`color:#${color}`)
}

var newstrs = strs.split(',').map(item => {
  return `%c${item}`
})
console.log(`%c${newstrs}`, ...style)

然后人家一行代码,我就恶补了好多知识点，阿西吧

a = new Array(951).fill()
console.log(
  a.map((_, i) => `%c想你的${i + 1}天`).join(', '),
  ...a.map(
    _ =>
      'color:#' +
      Math.random()
        .toString(16)
        .substr(2, 6)
  )
)

然后大佬们开始各种秀，作为小白的我已经悄咪咪的拿小本本记下来了

new Array(951).fill().map((item, i) => `想你的${i}天`)

Array.from({ length: 100 }).map((item, i) => `想你的${i + 1}天`)

Array.from({length: 10}).map((_,i) => i) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.from(Array(10).keys()) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

[...Array(10).keys()] //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array(5).fill().map(new Function().call, Number) //[0, 1, 2, 3, 4]

2. Array.fill()

具体地址 MDN Array.fill

/**
 * @params value 填充的值
 * @params start 填充起始位置 默认为0
 * @params end   填充末尾位置(但不包含) 默认为this.length
 */
Array.fill(value, [start, end]) // 填充的value 数组的起始位置start 末尾位置end(不包含end)

  [(1, 2, 3, 4, 5)].fill(0, 2, 4) // [1,2,0,0,5]

new Array(5).fill() // [undefined, undefined, undefined, undefined, undefined]

3. Array.from()

具体地址 MDN Array.from

/**
 * @params arrayLike 想要转换成数组的伪数组对象或可迭代对象(Map,Set对象的值)。
 * @params mapFn 新数组中的每个元素会执行该回调函数。
 * @params thisArg   执行回调函数 mapFn 时 this 对象。
 */
Array.from(arrayLike, [mapFn, thisArg]) // 伪数组or可迭代的对象转换成数组

Array.from([1, 2, 3, 4, 5], x => x * x) // [1,4,9,16,25]

Array.from({ length: 5 }, (_, i) => i + 1) // [1, 2, 3, 4,5]

Array.from(new Set([1, 2, 3, 4, 2, 5, 6, 3, 6])) // [1, 2, 3, 4, 5, 6]

4. Array.reduce()

具体地址 MDN Array.reduce

/**
 * @params callback 对数组每个元素处理的回调函数(prev,current,currentIndex,array)
 * @params initValue 回调函数的初始值 若没有则使用数组的第一个元素
 */
Array.reduce(callback, [initValue]) // 伪数组or可迭代的对象转换成数组

    /**
     * callback(prev,current,index,array) initValue
     * initValue有初始值时 prev = initValue index = 0
     * initValue没有值时 prev = array[0] index = 1
     */

  [1, 2, 3, 4, 5].reduce(function(prev, current, index, array) {
    return prev + current
  })

| prev | current | index | array |返回值 |
| 1(数组第一个值)| 2(数组第二个值) | 1(无初始值为 1) | [1,2,3,4,5] |3 |
| 3 | 3 | 2 | [1,2,3,4,5] |6 |
| 6 | 4 | 3 | [1,2,3,4,5] |10 |
| 10 | 5 | 4 | [1,2,3,4,5] |15 |

1
2
3

[1, 2, 3, 4, 5].reduce(function(prev, current, index, array) {
   return prev + current
 },10)

| prev | current | index | array |返回值 |
| 10(初始值) | 1(数组第一个值) | 0(有初始值为 0)| [1,2,3,4,5] |11 |
| 11 | 2 | 1 | [1,2,3,4,5] |13 |
| 13 | 3 | 2 | [1,2,3,4,5] |6 |
| 16 | 4 | 3 | [1,2,3,4,5] |20 |
| 20 | 5 | 4 | [1,2,3,4,5] |55 |

// 常用例子
//1.数组元素求和
[1,2,3,4,5].reduce((a,b) => a+b) // 15

//2.二维数组转化为一维数组
[[1,2],[3,4],[5,6]].reduce((a,b) => a.concat(b),[])

//3.计算数组中元素出现的次数
[1, 2, 3, 1, 2, 3, 4].reduce((items, item) => {
   if(item in items){
        items[item]++;
    }else{
        items[item] = 1;
    }
    return items;
},{}) //{1: 2, 2: 2, 3: 2, 4: 1}

// 4.数组去重①
[1,2,3,4,3,4,5,2].reduce((init,current)=>{
  if(init.length === 0 || init.indexOf(current) === -1){
    init.push(current)
  }
  return init
},[])

// 4.数组去②
[1,2,3,4,3,4,5,2].sort().reduce((init,current)=>{
  if(init.length === 0 || init[init.length -1 ] !=== current){
    init.push(current)
  }
  return init
},[])

5.常用的各种操作

// 1.对象数组中筛选出指定条件的某个字段数组
[{ select: true, value: 1 },{ select: false, value: 2 },{ select: true, value: 3 }]
.filter(item => item.select).map(item => item.value)

function test(arr) {
  var newArr = []
  arr.map(item => {
    if (item.select) {
      newArr.push(item.value)
    }
  })
  return newArr
}

// 2.拷贝一个新对象并且添加新的属性
var excelJson = (this.uploadPersonStatus = excelJson.map(v => {
  return {
    status: '待上传',
    ...v
  }
}))

// 3.衍生出来的就是数组去重 

// 1).使用es6的Set 
Array.from(new Set(arr))
[...new Set(arr)]

// 2).使用reduce indexOf
function unique(arr){
  if(!Array.isArray(arr)){
    console.log('type error')
    return false
  }
  arr.reduce((init,current) => {
    if(init.length === 0 || init.indexOf(current) === -1){
      init.push(current)
    }
    return pre
  },[])
}

// 3).使用forEach indexOf
function unique(arr){
  if(!Array.isArray(arr)){
    return false
  }
  var array = []
  arr.forEach((item,index) => {
    if(array.indexOf(item) === -1){
      array.push(item)
    }
  })
  return array
}

// 4).利用includes

function unique(arr){
  if(!Array.isArray(arr)){
    return false
  }
  var array = []
  arr.forEach((item,index) => {
    if(!array.includes(item)){
      array.push(item)
    }
  })
  return array
}

// 5).利用sort

function unique(arr){
  if(!Array.isArray(arr)){
    return false
  }
  var arr = arr.sort()
  var array = [arr[0]]
  for(let i = 1,j= arr.length;i<j;i++){
    if(arr[i] !== arr[i-1]){
      array.push(arr[i])
    }
  }
  return array
}

// 6). 利用filter
function unique(arr){
  if(!Array.isArray(arr)){
    return false
  }
  return arr.filter((item,index) => {return arr.indexOf(item,0) === index})
}



// 4.不使用for进行1-100输出

Array.from({ length: 5 }, (_, i) => i + 1) // [1, 2, 3, 4,5]

Array(5).fill().map((item,index) => index + 1) // [1, 2, 3, 4,5]

Array.apply(null, {length: 5}).map(Number.call, Number) // [0, 1, 2, 3, 4]

Array.from(Array(5).keys()) //  [0, 1, 2, 3, 4]

[...Array(5).keys()] //  [0, 1, 2, 3, 4]

Js中Array的各种操作