JS中14个数组的高级操作（推荐阅读）

我们在日常开发过程中，时常会用到对数组的操作。不管是在ES5还是ES6中，都有很多操作数组的方法，如果我们掌握了这些方法的熟练使用，那开发过程别提多爽了。

1. 数组扁平化

高级操作

var arr1 = [1,2,3,[4,5,[6,7,8]]]
var arr_1 = arr1.flat(Infinity)

常规操作：利用递归和数组合并方法 concat实现扁平。

function flatten(arr) {
  while(arr.some(item=>Array.isArray(item))) {
    arr = [].concat(...arr);
  }
  return arr;
}

2. 去重

高级操作（两种方法）

var arr1 = [1,2,3,3]
arr_1 = [...new Set(arr1)]

var arr1 = [1,2,3,3]
arr_1 = Array.from(
  new Set(arr1)
)

Array.from() 可以将类数组转换为数组，类数组包括但又不限于 Set/ Map，还有包括可遍历的对象。

Set 是ES6提供的新的数据结构，Set对象不是数组， 可以用来保存对象或者基本类型， 所有保存的值都是唯一的。这也就是我们要使用这一特性，实现去重。

常规操作

function distinct(arr) {
  let resule = [], i, j;
  for (i = 0; i < arr.length; i++) {
    for (j = i+1; j < arr.length; j++) {
      if(arr[i] === arr[j]){
        j = ++i
      }
    }
    resule.push(arr[i])
  }

  return resule
}

3. 排序

高级操作

var arr1 = [1,2,4,3,8,5]
arr1.sort()  //升序

var arr1 = [1,2,4,3,8,5]
arr1.sort((a, b) => b - a) //降序

常规操作

选择排序：

function sortFun(arr) { // 选择排序
  let i, j;
  for (i = 0; i < arr.length; i++) {
    for (j = i+1; j < arr.length; j++) {
      if(arr[i] < arr[j]){
        [arr[i], arr[j]] = [arr[j], arr[i]]
      }
    } 
  }
  return arr
}

冒泡排序：

function bubleSort(arr) { //冒泡排序
  let i, j;
  for (i = arr.length-1; i > 2; i--) {
    for (j = 0; j < i; j++) {
      if(arr[i] > arr[j]){
        [arr[i], arr[j]] = [arr[j], arr[i]]
      }
    }
  }
  return arr
}

4. 最大值、最小值

高级操作

var arr1 = [1,2,4,3,8,5]
Math.max(...arr1)
Math.min(...arr1)

Math.max() 方法可返回两个指定的数中带有较大的值的那个数

var arr1 = [1,2,4,3,8,5]
arr1.reduce((prev, cur, curIndex, arr) => {
  return Math.max(prev,cur);
  //return Math.min(prev,cur);
})

常规操作： 先排序，再取最大/最小值。

5. 求和

高级操作

arr1.reduce((prev, cur, curIndex, arr) => {
  return prev + cur
})

常规操作

function sumFun(arr){
  let sum = 0, i;
  for (i = 0; i < arr.length; i++) {
    sum += arr[i]
  }
  return sum
}

6. 合并

高级操作

var arr1 = [1,2,3,4]
var arr2 = [5,6,7,8]
arr1.concat(arr2)

[...arr1,...arr2]

常规操作

var arr1 = [1,2,3,4]
var arr2 = [5,6,7,8]
arr2.forEach(item => {
  arr1.push(item)
})

7. 判断是否包含值

高级操作

var arr1 = [1,2,3,4]
arr1.includes(1) // true 或 false

var arr1 = [1,2,3,4]
arr1.indexOf(0) // 该元素在数组内的位置 或者 -1

var arr1 = [1,2,3,4]
arr1.find((item) => item === 1) //返回该元素 或者 undefined

var arr1 = [1,2,3,4]
arr1.findIndex((item) => item === 1) //返回该元素所在位置 或者 -1

常规操作

arr1.some(item => {
  return item === 0
})
//返回true 或者 false

8. 类数组转换

高级操作

Array.prototype.slice.call(arguments) //arguments是类数组(伪数组)
Array.prototype.slice.apply(arguments)
Array.from(arguments)
[...arguments]

类数组：表示有length属性,但是不具备数组的方法
call,apply：是改变slice里面的this指向arguments,所以arguments也可调用数组的方法
Array.from是将类似数组或可迭代对象创建为数组
...是将类数组扩展为字符串,再定义为数组

常规操作

Array.prototype.slice = function(start,end){  
      var result = new Array();  
      start = start || 0;  
      end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键  
      for(var i = start; i < end; i++){  
           result.push(this[i]);  
      }  
      return result;  
 }

9. 每一项设置值

高级操作

var arr1 = [1,2,3,4]
arr1.fill('1') //["1", "1", "1", "1"]

fill() 方法用于将一个固定值替换数组的元素，是ES6新增的方法

array.fill(value, start, end)

参数说明value必需。要填充的值start可选。开始填充位置。end可选。停止填充位置 (默认为 array.length)

常规操作

var arr1 = [1,2,3,4]
arr1.map(() => '1') //["1", "1", "1", "1"]

10. 每一项是否满足

var arr1 = [1,2,3,4]
arr1.every(item => {
  return item > 0
} //true

11. 有一项满足

var arr1 = [1,2,3,4]
arr1.some(item => {
  return item > 4
} //false

12. 过滤数组

var arr1 = [1,2,3,4]
arr1.filter(item => {
  return item > 2
} //[3, 4]

filter() 是ES5的api，返回满足添加的项的数组。

13. 对象和数组的转换

var obj = {
  name: '张三',
  age: '12'
}

Object.keys()

Object.keys(obj) // ["name", "age"]

Object.values()

Object.values(obj) // ["张三", "12"]

Object.entries()

Object.entries(obj) //[[name,'张三'],[age,12]]

14. 对象转换为数组

var obj = {
  name: '张三',
  age: '12'
}

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    let obj_ = {}
    obj_[key] = obj[key]
    arr.push(obj_)
  }
}

console.log(arr); // [{name: '张三'}, {age: '12}]

转载：https://zhuanlan.zhihu.com/p/86995438