JS数组方法速查

1.数组去重

let arrs = [1,2,2,3,3,6,5,5];

// ES6
[...new Set(arr)] // [1,2,3,6,5]
// 此方法也能去除数组中重复的项:[...new Set('ababbc')].join('') // abc

// 其他方法
function uniq(array){
    let temp = [];
    let l = array.length;
    for(let i = 0; i < l; i++) {
        for(let j = i + 1; j < l; j++){
            if (array[i] === array[j]){
                i++;
                j = i;
            }
        }
        temp.push(array[i]);
    }
    return temp;
}
console.log(uniq(arrs)); // [1,2,3,6,5]

2.数组合并

let arr1 = [1,2,3]
let arr2 = [4,5,6]

// ES6
[...arr1, ...arr2] // [1, 2, 3, 4, 5, 6]


// 方法2:concat方法(挂载Array原型链上)
let c = a.concat(b);
console.log(c); // [1, 2, 3, 4, 5, 6]
console.log(a); // [1, 2, 3]  不改变本身
// 备注:看似concat似乎是 数组对象的深拷贝,其实,concat 只是对数组的第一层进行深拷贝

// 方法3:apply方法
Array.prototype.push.apply(a, b);
console.log(a); // [1, 2, 3, 4, 5, 6] 改变原目标数组
console.log(b); // [4, 5, 6]

3.数组排序(sort)

let objArr = [
  {name: 'test1', age: 20},
  {name: 'test1', age: 22},
  {name: 'test1', age: 21}
]

// 第一参数a, 第二参数b ---> a-b升序(从小到大);b-a降序(从大到小),原理就是 两数计算,如果返回的是负数,就保留前者(我可能说的不对,欢迎纠正)
objArr.sort((a, b) => {
  return a.age - b.age
}) 
// 结果会按照年龄从小到大的顺序排列



4.多维数组转一维数组(flat)

let arr = [1, [2], [[3], 4], 5];

// ES6 数组的flat()
arr.flat() // [1, 2, Array(1), 4, 5] 如果这样写的话只能展开二维数组,但是可以加参数Infinity,就是能展开多维数组
arr.flat(Infinity) // [1, 2, 3, 4, 5] 注意如果原数组有空位,flat()方法会跳过空位

// 其他方法
const deepFlatten = arr => [].concat(...arr.map(v => (Array.isArray(v) ? deepFlatten(v) : v)));
deepFlatten(arr); // [1,2,3,4,5]


// 执行效率验证(拓展)
// let start = new Date().getTime();
// console.log('reduceDimension: ', deepFlatten([1, [2], [[3], 4], 5]);
// console.log('耗时: ', new Date().getTime() - start); // *ms

// ES6 数组的flatMap() 方法大家可以自行查阅一下,拓展下自己的知识面

5.过滤数组(filter)

let json = [
  { id: 1, name: 'john', age: 24 },
  { id: 2, name: 'zkp', age: 21 },
  { id: 3, name: 'mike', age: 50 }
];

// ES6
json.filter( item => item.age > 22) // [{id: 1, name: 'john', age: 24}, { id: 3, name: 'mike', age: 50 }]

// ES5

6.判断数组中的项是否满足于某个条件(some,every)

let arr = [4, 2, 3]

// ES6 some方法(有符合)
arr.some( item => item > 1) // true
arr.some( item => item > 3) // true

// ES5 every(全符合)

arr.every(item => item > 1) // true
arr.every(item => item > 3) // false

// 注意:上面两个有不同哦,一个是有符合的判定,一个是全符合的判定

7.操作数组中的每一项,并使其按照一定的逻辑返回(map)

var potatos = [
  { id: '1001', weight: 50 },
  { id: '1002', weight: 80 },
  { id: '1003', weight: 120 },
  { id: '1004', weight: 40 }
]

// ES6写法
const fn = (arr, key) => arr.map(arr =>  arr[key])

fn(potatos, 'id') // ["1001", "1002", "1003", "1004"]
fn(potatos, 'weight') // [50, 80, 120, 40]

8.其他常用的ES6 Array方法

// forEach() 遍历数组

// pop() 删除数组中最后一个元素,并返回该元素的值。此方法更改数组的长度

// shift() 删除数组中第一个元素,并返回该元素的值。此方法更改数组的长度

// push() 将一个或多个元素添加到数组的末尾,并返回该数组的新长度

// unshift() 将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)

// Array.prototype.filter() 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素,不会改变原有值,如果没符合的返回[]
let arr = [1, 2, 3]
arr.filter( x => x > 1) // [2, 3]

// Array.prototype.join() 将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串
['Fire', 'Air', 'Water'].join() // "Fire,Air,Water"

// Array.prototype.slice() 取出任意元素, | 参数一:从哪开始,参数二(可选)结束位置,不选的话 就节选到最后了
[1, 2, 3].slice(0, 1) // [1]

// Array.prototype.splice() 删除任意元素,操作任意元素 | 参数一:从哪开始 | 参数二:操作元素的个数 | 参数三:插入元素的值...(可以写多个参数三)
[1, 2, 3].splice(0, 1) // 删除 [2, 3]

// Array.prototype.includes() 用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
[1, 2, 3].includes(1) // true

// Array.prototype.reverse() 颠倒数组
[1, 2, 3].reverse() // [3, 2, 1]

9.获得数组最大最小值


// 使用 Math 中的 max/min 方法
let arr = [22,13,6,55,30];

// ES6
Math.max(...arr); // 55
Math.min(...arr); // 6

// ES5
Math.max.apply(null, arr); // 55
Math.min.apply(null, arr); // 6

10.获取数组交集

// ES6 写法
const similarity = (arr1, arr2) => arr1.filter(v => arr2.includes(v));
similarity([1, 2, 3], [1, 2, 4]); // [1,2]

// ES5 写法
// function similarity(arr1, arr2) {
//   return arr2.filter(function(v) {
//     return arr1.includes(v)
//   })
// }

11.数组对象去重

let arr = [
  {id: 1, name: 'Jhon1'},
  {id: 2, name: 'sss'},
  {id: 3, name: 'Jhon2'},
  {id: 4, name: 'Jhon3'}
]

// ES6
const uniqueElementsBy = (arr, fn) =>arr.reduce((acc, v) => {if (!acc.some(x => fn(v, x))) acc.push(v);return acc;}, []);

// 下面的示例表示,去重依据是 id ,就是 id一样的,只留下一个
uniqueElementsBy(arr, (a, b) => a.id === b.id) // [{id: 1, name: 'Jhon1'}, {id: 2, name: 'sss'}]

12.数组乱序

function shuffle(arr) {
  let array = arr
  let index = array.length

  while (index) {
    index -= 1
    let randomInedx = Math.floor(Math.random() * index)
    let middleware = array[index]
    array[index] = array[randomInedx]
    array[randomInedx] = middleware
  }

  return array
}

let arr = [1,2,3,4,5]
shuffle(arr) // [3, 4, 2, 5, 1] 结果不定

13.检查数组中某元素出现的次数

function countOccurrences(arr, value) {
  return arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
}

let arr = [1,2,3,4,1,2,4]
countOccurrences(arr, 1) // 2

14.检查数组中的所有元素是否相等

const allEqual = arr => arr.every(val => val === arr[0]);

// 示例
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true

15.数组对象,求某一列属性的总和

var potatos = [
  { id: '1001', weight: 50 },
  { id: '1002', weight: 80 },
  { id: '1003', weight: 120 },
  { id: '1004', weight: 40 }
]

// ES6写法
const fn = (arr, key) => arr.reduce((sum, p) => { return p[key] + sum },0)

fn(potatos, 'weight') // 290
fn(potatos, 'id') // "10041003100210010" 字符串相加就是这个结果,如果有各自的需求,可以自己加上

16.分割数组,并操作每一项数组(函数)

/**
 * 数组分隔方法,并且可以传入一个处理函数,用来分隔之前处理数组的每一项
 * 
 * @category Array
 * @param {Array} array 需要处理的数组
 * @param {number} [size = 1] 每个数组区块的长度
 * @param {Function} [fn = item => item] 函数
 * @returns {Array} 返回一个包含拆分区块的新数组(相当于一个二维数组)。
 * @example
 *
 * chunk(['a', 'b', 'c', 'd'], 2)
 * // => [['a', 'b'], ['c', 'd']]
 *
 * chunk(['a', 'b', 'c', 'd'], 3)
 * // => [['a', 'b', 'c'], ['d']]
 *
 * chunk([1, 2, 3, 4], 3, item => item * 2)
 * // => [[2, 4, 6], [8]]
 */

function chunk(array, size = 1, fn = item => item) {
    
    array = array.map(fn)

    size = Math.max(size, 0) // 这一句就很妙,当传入值小于0的时候,置为0,大于0的时候,不写,但不知道性能怎么样
    const length = array == null ? 0 : array.length
    if (!length || size < 1) {
      return []
    }
    let index = 0
    let resIndex = 0
    const result = new Array(Math.ceil(length / size))
  
    while (index < length) {
      result[resIndex++] = array.slice(index, (index += size))
    }
    return result
}

你可能感兴趣的:(JS数组方法速查)