【前端自学(6)】数组相关

---

1 数组相关

• 去重

//Set
function unique (arr) {
  return [...new Set(arr)]
}

//在res里查找arr[i]的index,如果结果是-1,说明arr[i]是新元素,推入
function unique2 (arr) {
  let res = []
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) {
      res.push(arr[i])
    }
  }
  return res
}

//注意indexOf方法返回的是第一个item的下标,所以可以用filter来筛掉重复元素
function unique3 (arr) {
  let res = arr.filter(function (item, index, arr) {
    return arr.indexOf(item) === index
  });
  return res
}

//concat => sort => 设置一个seen变量 => 和unique3类似
function unique4 (arr) {
  let res = [];
  let sortedArray = arr.concat().sort(); //concat()的目的是为了创建一个新数组,注意这里的sort并不是从小到大排序
  let seen;
  for (let i = 0; i < sortedArray.length; i++) {
    if (!i || seen !== sortedArray[i]) {
      res.push(sortedArray[i]);
    }
    seen = sortedArray[i];
  }
  return res;
}

let arr = [3, 5, 1, 2, 10, 9, 1, 5, 7, 4, 8, 6, 6, 10]
console.log(unique(arr))
console.log(unique2(arr))
console.log(unique3(arr))
console.log(unique4(arr))
/*
[
  3, 5, 1, 2, 10,
  9, 7, 4, 8,  6
]
[
  3, 5, 1, 2, 10,
  9, 7, 4, 8,  6
]
[
  3, 5, 1, 2, 10,
  9, 7, 4, 8,  6
]
[
  1, 10, 2, 3, 4,
  5,  6, 7, 8, 9
]
*/

• 扁平化

//for递归
function flatten (arr) {
  var result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result.push(arr[i]);
    }
  }
  return result;
}

//reduce递归
function flatten2 (arr) {
  return arr.reduce(
    (prev, next) =>
      Array.isArray(next) ? prev.concat(flatten2(next)) : prev.concat(next),
    []
  );
}

//while和...
function flatten3 (arr) {
  while (arr.some(item => Array.isArray(item))) { //some就是存在
    arr = [].concat(...arr);
  }
  return arr;
}

let arr = [1, 2, 3, [4, [1, 5, 6], 5], 6, [1, 5]]
console.log(flatten(arr))
console.log(flatten2(arr));
console.log(flatten3(arr));
console.log(arr.flat(Infinity)) //es6自带的扁平化

• js基本数组操作复习

//js数组基本操作复习

//splice 改变数组本身
let arr = ['a', 'b', 'c', 'd']
let deleted = arr.splice(2, 1, 'e', 'f')
console.log(arr) //[ 'a', 'b', 'e', 'f', 'd' ]
console.log(deleted) //[ 'c' ]

//slice 不改变数组本身
let arr2 = ['a', 'b', 'c', 'd']
console.log(arr2.slice(0, 2)) //[ 'a', 'b' ] 
console.log(arr2) //[ 'a', 'b', 'c', 'd' ]

//unshift shift pop push
let arr3 = ['a', 'b', 'c', 'd']
arr3.push('e')
console.log(arr3) //[ 'a', 'b', 'c', 'd', 'e' ]
console.log(arr3.pop()) //e
console.log(arr3) //[ 'a', 'b', 'c', 'd' ]
arr3.unshift('f')
console.log(arr3) //[ 'f', 'a', 'b', 'c', 'd' ]
console.log(arr3.shift())  //f
console.log(arr3) //[ 'a', 'b', 'c', 'd' ]

//findIndex find indexOf lastindexOf
let arr4 = [1, 3, 5, 8, 5]
console.log(arr4.find(item => item > 4)) //5
console.log(arr4.findIndex(item => item > 4)) //2
console.log(arr4.find(item => item > 8)) //undifined
console.log(arr4.findIndex(item => item > 8)) //-1
console.log(arr4.indexOf(8)) //3
console.log(arr4.indexOf(9)) //-1
console.log(arr4.lastIndexOf(5)) //4

//includes filter map 
//写一个求交集的例子
let arr5 = [1, 4, 5, 6, 7, 2, 4, 3, 8, 4, 6, 2]
let arr6 = arr5.map((item) => {
  return item *= 2
})
let result1 = [...new Set(arr5)].filter(item => arr6.includes(item))
console.log(result1) //[ 4, 6, 2, 8 ]

//some every forEach join fill
let arr7 = [1, 2, 3, 4, 5]
let arr8 = []
console.log(arr7.every(item => item < 6)) //true
console.log(arr7.some(item => item > 4)) //true
arr7.forEach(item => {
  if (item === 4) {
    return
  }
  arr8.push(item)
});
console.log(arr8.join('=>')) //1=>2=>3=>5
console.log(arr8.fill(0, 2, 3)) //[ 1, 2, 0, 5 ] fill的区间是[2,3) 和slice一样

//reverse concat reduce reduceRight Array.isArray Array.from
let arr9 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
let arr10 = arr9.concat(10) //不能写arr10 = arr9.push(10) 这样写的话arr9和arr10指向同一个地址
console.log(arr9.reverse()) //[ 0, 9, 8, 7, 6, 5, 4, 3, 2, 1 ] 改变arr9本身
console.log(arr10) //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 10 ]
console.log(arr9.reduce((a, b) => a + b)) //45
console.log(arr9.reduceRight((a, b) => a + b)) //45
console.log(Array.isArray(arr9)) //true
let arr11 = Array.from('run')
console.log(arr11) //[ 'r', 'u', 'n' ]

//copyWithin keys values entries
let arr12 = ['a', 'b', 'c', 'd', 'e']
console.log(arr12.copyWithin(2, 0, 2)) //[ 'a', 'b', 'a', 'b', 'e' ]
for (let [key, value] of arr12.entries()) {
  console.log(key, value)
  // 0 a
  // 1 b
  // 2 a
  // 3 b
  // 4 e
}
let keys = arr12.keys()
let values = arr12.values()
console.log(keys.next()) //{ value: 0, done: false }
console.log(values.next()) //{ value: 'a', done: false }

//基本复制
let arr13 = [1, 2]
let arr14 = [...arr13]
console.log(arr14) //[ 1, 2 ]
arr14[1] = 0
console.log(arr13) //[ 1, 2 ]

//剩下的flat之类的自行查找对应数组手册

---

2 总结

以上就是js数组的基本操作