关于数组的整理 工作中常用

208 阅读16分钟

操作数组的增删改

push、unshift、pop、shift

var arr =['b']
arr.push('c') //往数组后存入  [ 'b', 'c' ]
arr.unshift('a') //往数组前存入  [ 'a', 'b', 'c' ]
arr.pop(); //删掉数组最后面一个 [ 'a', 'b' ]
arr.shift();//删掉数组最前面一个 [ 'b' ]

slice与 splice 的差别

slice :不会改变原数组

var arr = ['a','b','c']
let newarr0 = arr.slice(0,1); // newarr0:[ 'a' ] 
let newarr1 = arr.slice(0,2); // newarr1:[ 'a', 'b' ]  
let newarr2 = arr.slice(1,2); // newarr2:[ 'a' ] [ 'b' ] 
console.log(arr) //[ 'a', 'b', 'c' ]

splice: 会改变原数组

var brr = ['a','b','c']
let newbrr0 = brr.splice(0,2,'b') // newbrr0: [ 'a', 'b' ] , brr: [ 'b', 'c' ]

var crr = ['a','b','c']
let newcrr0 = crr.splice(0,1,'b') // newcrr0: [ 'a' ] , crr: [ 'b', 'b', 'c' ]

// 常用于删除

var drr = ['a','b','c']
drr.splice(1,1)
console.log(drr)// ['a','c']

数组的遍历

forEach

forEach 是Array中基本的一个遍历方法。

const arr = [1,2,3]
arr.forEach((item, index, array) => {
    console.log(item, index, array)
})

// output
1 0 [1,2,3]
2 1 [1,2,3]
3 2 [1,2,3]

forEach 方法中到callback有三个参数:

  • 数组当前项
  • 对应数组到索引
  • 数组本身

forEach 接受一个必须到回调函数参数,还可以接受一个可选到上下文参数(改变回调函数里面到this指向)。如果没传入第二参数,则指向window,严格模式为undefined 比如:

const arr = [1,2,3]
const obj = {name: angela}

arr.forEach((item, index, array) => {
    console.log(item, index, array, this)
}, obj)

//output
1 0 [1, 2, 3] {name: 'angela'}
2 1 [1, 2, 3] {name: 'angela'}
3 2 [1, 2, 3] {name: 'angela'}

map

map方法是将原来对数组按照一定对规则映射出一个新的数组再返回。

// callback参数
[].map((value, index, array) => {
    // ...
})

数值求平方例子:

const data = [1,2,3]
const array = data.map(item => {
    return item * item
})
console.log(array)

//output
  [1, 4, 9]

如果callback没有return 则会输出undefiend

const data = [1,2,3]
const array = data.map(item => {
    item * item
})
console.log(array)

//output
[undefiend, undefiend, undefiend]

for of 和 for in

可以查看数组实例的 entries(),keys() 和 values()

for..of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是,它可以正确响应break、continue和return语句 for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用for-in循环(这也是它的本职工作)或内建的Object.keys()方法:

for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

遍历map对象时适合用解构,例如:

for (var [key, value] of phoneBookMap) {
  console.log(key + "'s phone number is: " + value);
}

当你为对象添加myObject.toString()方法后,就可以将对象转化为字符串,同样地,当你向任意对象添加myObjectSymbol.iterator方法,就可以遍历这个对象了。 举个例子,假设你正在使用jQuery,尽管你非常钟情于里面的.each()方法,但你还是想让jQuery对象也支持for-of循环,你可以这样做:

jQuery.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];

所有拥有Symbol.iterator的对象被称为可迭代的。在接下来的文章中你会发现,可迭代对象的概念几乎贯穿于整门语言之中,不仅是for-of循环,还有Map和Set构造函数、解构赋值,以及新的展开操作符。

for...of的步骤: for-of循环首先调用集合的Symbol.iterator方法,紧接着返回一个新的迭代器对象。迭代器对象可以是任意具有.next()方法的对象;for-of循环将重复调用这个方法,每次循环调用一次。举个例子,这段代码是我能想出来的最简单的迭代器:

var zeroesForeverIterator = {
  [Symbol.iterator]: function () {
    return this;
  },
  next: function () {
    return {done: false, value: 0};
  }
};

数组的过滤 和 查找

filter和includes结合 (过滤数组)


const arr1 = [{ id: 1, name: '老大' }, { id: 2, name: '老二' }];
const arr2 = [{ id: 1, name: '老大' }, { id: 3, name: '老三' }];
 
// 获取到arr1的所有id集合
let arr1Ids = arr1.map(item => item.id);
 
// 过滤arr2中不包含arr1相同的id数组。
const result = arr2.filter(item => !arr1Ids.includes(item.id));
console.log(result)
// [ { id: 3, name: '老三' } ]

filter和some结合 (过滤数组)


let arr1=[{id:1,name:'老大'},{id:2,name:'老二'}] 
let arr2=[{id:1,name:'老大'},{id:3,name:'老三'},{id:4,name:'老四'},{id:5,name:'老五'},] 
 
let add=arr2.filter(item=>!arr1.some(ele=>ele.id===item.id)) 
console.log(add)
// [ { id: 3, name: '老三' },
//   { id: 4, name: '老四' },
//   { id: 5, name: '老五' } ]

filter

filter 相当于过滤后返回新的数组。(true则通过,false不通过)

const arr = [1, 2, 3]

let arr1 = arr.filter((item, index, array) => {
    return item
})

//output
[1, 2, 3]


let arr2 = arr.filter((item, index, array) => {
    return item>=2
})

//output
[2, 3]

includes

let arr1Ids = [1,2,3]
console.log(arr1Ids.includes(1))
//true

some

some方法只要数组中的某个值,符合就true,反之false。

function big(item, index, array) {
    return item >= 4
}

const count = [1, 2, 3]
const count2 = [1, 2, 3, 4]
count.some(big)  // output false
count2.some(big)  // output true

console.log(count.some(ele=>ele ==1))//true
console.log(count.some(ele=>ele ==5))//false

every

every和some类似,但是是所有的值都符合才true,否则为false

function big(item, index, array) {
    return item >= 3
}

const count = [2, 3, 4].every(big)  // output false
const count2 = [3, 4, 5].every(big) // output true

indexOf

indexOf说白了就是找那个元素在不在数组里面,第几个是不是它

array.indexOf(searchElement, fromIndex)

返回整数索引值,如果没有(严格匹配),返回-1, fromIndex参数可选,如果没有或者格式不对,使用默认值0

例子:

const data = [2, 5, 7, 3, 5]

console.log(data.indexOf(1))
// -1

console.log(data.indexOf(2))
// 0

console.log(data.indexOf(5))
// 1

console.log(data.indexOf(5, 2))
// 4

lastIndexOf

lastIndexOf 方法与 indexOf 方法类似。只是从末尾开始查找,且fromIndex默认值为-1

find / findIndex

find 方法把所有的数组成员执行回调函数,直到找到一个为true的时候返回该成员。否则返回undefiend

const value = [1, 5, 10 ,15].find((el, index, array) => {
    return el > 9
})

console.log(value) // 10

const value2 = [1, 5, 10 ,15].find((el, index, array) => {
    return el > 20
})

console.log(value2) // undefiend

findIndex 与find是类似的,只不过它返回的是索引,如果都不符合,那么返回-1

const value = [1, 5, 10 ,15].findIndex((el, index, array) => {
    return el > 9
})

console.log(value) // 2

const value2 = [1, 5, 10 ,15].find((el, index, array) => {
    return el > 20
})

console.log(value2) // -1

数组的排序

在扩展里 sort

关于reduce的用法

可以去看另一篇文章<<JS数组reduce()方法详解及高级技巧>>

reduce 中文有 '减少', '约减'的意思

array.reduce(callback[, initialValue])

callback函数接受4个参数 (initialValue 参数可选 标示初始值)

  • 之前值 previous
  • 当前值 current
  • 索引值 index
  • 数组本身 array

计算总数

const sum = [1, 2, 3, 4].reduce((previous, current, index, array) => {
    return previous + current
})
console.log(sum)

// output
// 10

解析:

  1. initialValue不存在,所以pervious等于数组的第一个元素
  2. current 在第一次调用的时候就是2
// 初始设置
previous = initialValue = 1, current = 2

// 第一次迭代
previous = (1 + 2) = 3, current = 3

// 第二次迭代
previous = (3 + 3) = 6, current = 4

// 第三次迭代
previous = (6 + 4) = 10, current = undefiend (退出)

例子: 数组扁平化~

[[1,2],[3,4],[5,6]].flat(Infinity) 在浏览器中可用

const matrix = [[1,2],[3,4],[5,6]]

const flatten = matrix.reduce((pre, cur) => {
    return pre.concat(cur)
})

console.log(flatten)

// output
// [1,2,3,4,5,6]

去重

最好的实现:

var arr = [3, 2, 3, 1, 4,0,0, true, false, "3", "22", "2", 2]
function norepeat (arr) {
  var resArr = [];
  var obj = {};
  for (var i = 0, len = arr.length; i < len; i++) {
    console.log(typeof arr[i])
    if (!(obj[arr[i] + typeof arr[i]])) {
      resArr.push(arr[i]);
      obj[arr[i] + typeof arr[i]] = 1;
    }
  }
  return resArr;
}
var res = norepeat(arr);
console.log(res);

如果数组内是数字

set

 Array.from(new Set(array));

filter

let arr = [1,2,2,3,4,5,6];
let newArr = arr.filter((x,index,self)=>{self.indexOf(x) === index})
console.log(arr)

使用 new Map和filter

 var a = [
   {name:'1',id:'1'},{name:'1',id:'1'},
   {name:'3',id:'3'},{name:'4',id:'4'}
 ]
 var b = new Map()
 var res = a.filter((item)=>!b.has(item.id)&&b.set(item.id,true))
 console.log(res)

 function unique(arr){
     const res = new Map()
     return list.filter((a)=>!res.has(a.name)&&res.set(a.name,1))
 }

这里还可以进行优化,比如name属性我们可以通过item[val]的方式动态的改变~

数组扁平化

数组扁平化是指将一个多维数组变为一维数组

[1, [2, 3, [4, 5]]]  ------>    [1, 2, 3, 4, 5]

核心

遍历数组arr,若arr[i]为数组则递归遍历,直至arr[i]不为数组然后与之前的结果concat。

reduce

遍历数组每一项,若值为数组则递归遍历,否则concat

function flatten(arr){
  return arr.reduce((result,item)=>{
    return result.concat(Array.isArray(item) ? flatten(item):item)
  },[])
}

reduce是数组的一种方法,它接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce包含两个参数:回调函数,传给total的初始值

// 求数组的各项值相加的和: 
arr.reduce((total, item)=> {  // total为之前的计算结果,item为数组的各项值
    return total + item;
}, 0);

toString & split

调用数组的toString方法,将数组变为字符串 然后再用split 分割还原为数组

function flatten(arr) {
    return arr.toString().split(',').map(function(item) {
        return Number(item);
    })
} 

join & split

和上面的toString一样,join也可以将数组转换为对象

function flatten(arr) {
    return arr.join(',').split(',').map(function(item) {
        return parseInt(item);
    })
}

递归

递归的遍历每一项,若为数组则继续遍历,否则concat

function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

扩展运算符

es6的扩展运算符能将二维数组变为一维

[].concat(...[1, 2, 3, [4, 5]]);  // [1, 2, 3, 4, 5]

根据这个结果我们可以做一个遍历,若arr中含有数组则使用一次扩展运算符,直至没有为止

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

扩展

扩展运算符

扩展运算符(spread)是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

扩展运算符与正常的函数参数可以结合使用,非常灵活。

function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);

扩展运算符后面还可以放置表达式

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

注意,只有函数调用时,扩展运算符才可以放在圆括号中,否则会报错。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

替代函数的apply方法

// ES5 的写法
function f(x, y, z) {
  // ...
}
var args = [0, 1, 2];
f.apply(null, args);

// ES6的写法
function f(x, y, z) {
  // ...
}
let args = [0, 1, 2];
f(...args);

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

// ES5的 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);

// ES6 的写法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);

// ES5
new (Date.bind.apply(Date, [null, 2015, 1, 1]))
// ES6
new Date(...[2015, 1, 1]);

复制数组

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

不过,这两种方法都是浅拷贝,使用的时候需要注意。

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

解构赋值

// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

// 例子
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 报错

字符串

[...'hello']
// [ "h", "e", "l", "l", "o" ]

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

实现了 Iterator 接口的对象

Number.prototype[Symbol.iterator] = function*() {
  let i = 0;
  let num = this.valueOf();
  while (i < num) {
    yield i++;
  }
}

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

上面代码中,先定义了Number对象的遍历器接口,扩展运算符将5自动转成Number实例以后,就会调用这个接口,就会返回自定义的结果。

let arrayLike = {
  '0': 'a',
  '1': 'b',
  '2': 'c',
  length: 3
};

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator 接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。

Map 和 Set 结构,Generator 函数

扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

Generator 函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。

const go = function*(){
  yield 1;
  yield 2;
  yield 3;
};

[...go()] // [1, 2, 3]

Array.from()

Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map 类数组对象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

实际应用中,常见的类似数组的对象是 DOM 操作返回的 NodeList 集合,以及函数内部的arguments对象。Array.from都可以将它们转为真正的数组。

// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

只要是部署了 Iterator 接口的数据结构,Array.from都能将其转为数组。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

如果参数是一个真正的数组,Array.from会返回一个一模一样的新数组。

Array.from([1, 2, 3])
// [1, 2, 3]

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

Array.from([1, 2, 3], (x) => x * x)

下面的例子是取出一组 DOM 节点的文本内容。

let spans = document.querySelectorAll('span.name');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from()
let names2 = Array.from(spans, s => s.textContent)

Array.of()

Array.of方法用于将一组值,转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

Array.of方法可以用下面的代码模拟实现。

function ArrayOf(){
  return [].slice.call(arguments);
}

copyWithin

数组实例的copyWithin()方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。也就是说,使用这个方法,会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

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

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 将2号位到数组结束,复制到0号位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 对于没有部署 TypedArray 的 copyWithin 方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

find() 和 findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

这两个方法都可以接受第二个参数,用来绑定回调函数的this对象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

这两个方法都可以发现NaN

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

数组实例的 fill()

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]

数组实例的 entries(),keys() 和 values()

ES6 提供三个新的方法——entries(),keys()和values()——用于遍历数组。它们都返回一个遍历器对象(详见《Iterator》一章),可以用for...of循环进行遍历,唯一的区别是keys()是对键名的遍历、values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

数组实例的 includes()

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4,但数组长度为3),则会重置为从0开始

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

数组实例的 flat(),flatMap()

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

浏览器中可用,node中不生效

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

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

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

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

flatMap

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

sort()

sort() 方法用于对数组的元素进行排序,并返回数组。语法:arrayObject.sort(sortby);参数sortby 可选,用来规定排序的顺序,但必须是函数。

例一:按照字母顺序排序

let arr =['tom','ani','love','sai','fei'].sort()
console.log(arr)
//[ 'ani', 'fei', 'love', 'sai', 'tom' ]

例二:按照字母顺序排序

let arr =['12','323','1000','50'].sort()
console.log(arr)
// [ '1000', '12', '323', '50' ]

例三:升序排序

function sortNum(a,b){
  return a-b
}
let arr =['12','323','1000','50'].sort(sortNum)
console.log(arr)
// [ '12', '50', '323', '1000' ]

例四:降序排序

function sortNum(a,b){
  return b-a
}
let arr =['12','323','1000','50'].sort(sortNum)
console.log(arr)

例五:按照数组对象中某个属性值进行排序

var arr1 = [
  {name:'张飞',age:34},
  {name:'关羽',age:30},
  {name:'刘备',age:60}
]

function campare(prop){
  return function(a,b){
    var value1 = a[prop];
    var value2 = b[prop];
    return value1 - value2 
  }
}

let result = arr1.sort(campare('age'))
console.log(result)
// [ { name: '关羽', age: 30 }, 
//   { name: '张飞', age: 34 }, 
//   { name: '刘备', age: 60 } ]

例六:根据参数来确定是升序还是降序

var arr1 = [
  {name:'张飞',age:34},
  {name:'关羽',age:30},
  {name:'刘备',age:60}
]

function sortBy(attr,rev){
  if(rev == undefined){
    rev = 1
  }else{
    rev = (rev)? 1:-1;
  }
  return function(a,b){
    a = a[attr];
    b = b[attr];
    if(a<b){
      return rev* -1;
    }
    if(a>b){
      return rev*1
    }
    return 0
  }
}

let result = arr1.sort(sortBy('age',true))
console.log(result)

// [ { name: '关羽', age: 30 }, 
//   { name: '张飞', age: 34 }, 
//   { name: '刘备', age: 60 } ]

let result2 = arr1.sort(sortBy('age',false))
console.log(result2)


// [ { name: '刘备', age: 60 }, 
//   { name: '张飞', age: 34 }, 
//   { name: '关羽', age: 30 } ]

帮同学处理数组内部嵌套 排序

let ary = res.data.list;

function campare(name){
  return function(a,b){
    let Aresult = a['platform_list'].filter(item=>item.name === name) ;//拿到 对面名称 例如亚马孙的数组
    let Bresult = a['platform_list'].filter(item=>item.name === name) ;

    // 对 order_num_arr.order_num_rate 进行排序
    
   return Aresult[0].order_num_arr.order_num_rate - Bresult[0].order_num_arr.order_num_rate
  }
}

let result = ary.sort(campare('亚马逊'))

数组处理封装方法

使用callback倒计时

const all_yzm = function(callback){
 const TIME_COUNT = 60;//默认倒计时
 let time = ''
 let timer = null;

 if(!timer){
   time = TIME_COUNT;
   timer = setInterval(() => {
     if(time>0 && time<=TIME_COUNT){
       time--;
     }else{
       clearInterval(timer)
       timer =null;
       time = '重新获取'
     }
     callback(time)
   }, 1000);
 }
}

all_yzm(function(time){
 console.log(time)
 // 还要赋值
})

const all_yzm2 = function(time){
 const TIME_COUNT = 60;//默认倒计时
 let timer = null;

 if(!timer){
   timer = setInterval(() => {
     if(time>0 && time<=TIME_COUNT){
       time--;
     }else{
       clearInterval(timer)
       timer =null;
       time = '重新获取'
     }
     console.log(time)
   }, 1000);
 }
}

// all_yzm(function(time){
//   console.log(time)
// })
all_yzm2(60)

一个数组插入另一个数组中


let Arr =[{a:1},{a:2},{a:3}];
let Brr =[{b:1},{b:2},{b:3}];         
function insert(index,arr1,arr2){
 console.time(1)
 let result = [...arr2.slice(0,index),...arr1,...arr2.slice(index)]
 console.timeEnd(1)
 return result
}


console.log(insert(1,Arr,Brr))
//1: 0.226ms
//[ { b: 1 }, { a: 1 }, { a: 2 }, { a: 3 }, { b: 2 }, { b: 3 } ]

数组中阶乘

var arr = []
function func(skuarr=[], i, list){
for (let j=0; j<list[i].length; j++) {
if (i<list.length-1) {
skuarr[i] = list[i][j]
func(skuarr, i+1, list)
} else {
// 拓展运算符合并数组
arr.push([...skuarr,list[i][j]])
}
}
return arr
}
const list = [
  ['黑色','红色','白色'],
  ['S','M'],
  ['好','差']
]
console.log(func([],0,list))

// [ [ '黑色', 'S', '好' ],
//   [ '黑色', 'S', '差' ],
//   [ '黑色', 'M', '差' ],
//   [ '红色', 'S', '好' ],
//   [ '红色', 'S', '差' ],
//   [ '红色', 'M', '好' ],
//   [ '红色', 'M', '差' ],
//   [ '白色', 'S', '好' ],
//   [ '白色', 'S', '差' ],
//   [ '白色', 'M', '好' ],
//   [ '白色', 'M', '差' ] ]