Array的常用方法整理,原生以及lodash拓展

Array和是JavaScript中最常用的对象,整理一些Array常用的方法包括原生和lodash拓展

一、原生

1.1 Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

concat()的作用是连接多个数组成为一个新的数组。好处是可以很方便的组合多个数组,同时不改变原数组生成新的数组。

1.2 Array.prototype.every() 和 Array.prototype.some()

every每个都通过检测,some是否有一个通过了检测
主要是用来检测空值或者异常值

1.3 Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

用来填补new Array()生成的空数组的默认值,例如生成一个长度为10每个元素都是1的数组,或者生成一个1-10的数组。生成测试数据时候非常有用

var array1 = new Array(10).fill(1).map((el,index) =>el+=index)
console.log(array1)

1.4 Array.prototype.filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

用来过筛选符合要求的元素。不改变原数组,返回新数组。

1.5 Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

用来返回符合条件的第一个值跟filter类似但是只返回第一个满足条件的

1.6 Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

indexOf的一个扩展,可以定制查找条件。例如查找某一个属性。

var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) { 
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

1.7 Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

非常实用的一个数组扁平化方法,使用时候记得设定深度

1.8 Array.prototype.forEach()和Array.prototype.map()

两个最常用的算法。遍历数组对每个元素进行操作,forEach修改了原数组,如果不想修改就用map()

1.9 Array.prototype.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。

判断值是否存在的的优雅用法来了,再也不用indexOf()<0

1.10 Array.prototype.indexOf()

查找方法,太常用了不想解释了

1.11 Array.prototype.join()

join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

跟String.prototype.split()相反的操作,将数组里面的元素根据规则连成字符串

1.12 Array.prototype.shift()和Array.prototype.pop()

shift()删除第一个元素,pop()方法从数组中删除最后一个元素

1.13 Array.prototype.push()和unshift()

push()末尾插值,unshift()开头插值

1.14 Array.prototype.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

reducer 函数接收4个参数:

  • Accumulator (acc) (累计器)
  • Current Value (cur) (当前值)
  • Current Index (idx) (当前索引)
  • Source Array (src) (源数组)

reducer执行的时候会额外把上次执行的结果带到下一轮函数中。缓存了计算结果

1.15 Array.prototype.reverse()

将原数组反序并返回,该方法会改变原数组。

1.16 Array.prototype.slice()和Array.prototype.splice()

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

两个剪切数组的方法,slice()不改变原数组
splice()相当于同时插入和删除改变原数组。splice可以用来替换或者插入元素到指定位置

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

1.17 Array.prototype.sort()

sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

二、lodash的数组操作

lodash很多方法ES6原生都支持,相同的就不写了。

lodash的一个特点就是函数式,所以基本都不改变原数组

2.1 _.chunk

按指定长度切分数组

等分数组

_.chunk(['a', 'b', 'c', 'd','e'], 2);
// => [['a', 'b'], ['c', 'd'],['e']]

2.2 difference,differenceBy和differenceWith

三个筛选数组不同值的方法。

相同的地方:
都是传入两个数组,第一个数组参数作为被检查数组,将与第二个数组参数中相同的元素去除。生成一个新的数组。

_.difference([3, 2, 1], [4, 2]);
// => [3, 1]

differenceBy在difference上拓展了比较的关键字,用来检测一组对象中指定的字段。

_.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
// => [{ 'x': 2 }]

differenceWith加入了一个比较器可以自定义比较规则

var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
 
_.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
// => [{ 'x': 2, 'y': 1 }]

2.3 intersection,intersectionBy,intersectionWith

与difference相反,这一组三个方法寻找传入的二维数组元素相同的不分(可以理解为给定数组的交集)
_.intersection([2, 1], [4, 2], [1, 2]);

intersectionBy,intersectionWith与differenceBy和differenceWith用法一样拓展了关键字和比较规则

2.4 _.toPairs 和 _.fromPairs(pairs)

键值对pairs(一种二维数组)和对象互相转换,有时候处理数据时会遇到

_.fromPairs([['fred', 30], ['barney', 40]]);
// => { 'fred': 30, 'barney': 40 }
function Foo() {
  this.a = 1;
  this.b = 2;
}
 
Foo.prototype.c = 3;
 
_.toPairs(new Foo);
// => [['a', 1], ['b', 2]] (iteration order is not guaranteed)

2.5 _.nth(array, [n=0])

获取array数组的第n个元素。如果n为负数,则返回从数组结尾开始的第n个元素。

可以获得倒数第几个元素

var array = ['a', 'b', 'c', 'd'];
 
_.nth(array, 1);
// => 'b'
 
_.nth(array, -2);
// => 'c';

2.6 _.pull _.pullAll _.pullAllBy _.pullAllWith

一组过滤方法与difference类似,但会改变原数组

2.7 _.zip _.unzip 和 _.unzipWith

创建一个分组元素的数组,数组的第一个元素包含所有给定数组的第一个元素,数组的第二个元素包含所有给定数组的第二个元素,以此类推。

一组矩阵转制的方法,处理数据会经常用到

_.zip(['fred', 'barney'], [30, 40], [true, false]);
// => [['fred', 30, true], ['barney', 40, false]]

zip和unzip用法一样参数不同

unzipWith接受一方法指定重组值应该如何被组合

var zipped = _.zip([1, 2], [10, 20], [100, 200]);
// => [[1, 10, 100], [2, 20, 200]]
 
_.unzipWith(zipped, _.add);
// => [3, 30, 300]

三、lodash的集合操作

collection方法集更偏向于对数据的处理,类似sql或者python的numpy,

3.1 _.countBy()

统计方法

根据第二个参数来进行统计

_.countBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': 1, '6': 2 }
 
// The `_.property` iteratee shorthand.
_.countBy(['one', 'two', 'three'], 'length');
// => { '3': 2, '5': 1 }

3.2 _.groupBy()

根据字段分组

_.groupBy([6.1, 4.2, 6.3], Math.floor);
// => { '4': [4.2], '6': [6.1, 6.3] }
 
// The `_.property` iteratee shorthand.
_.groupBy(['one', 'two', 'three'], 'length');
// => { '3': ['one', 'two'], '5': ['three'] }

3.3 _.keyBy()

给对象创建一个key

var array = [
  { 'dir': 'left', 'code': 97 },
  { 'dir': 'right', 'code': 100 }
];
 
_.keyBy(array, function(o) {
  return String.fromCharCode(o.code);
});
// => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
 
_.keyBy(array, 'dir');
// => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }

3.4 _.sample(collection) _.sampleSize(collection, [n=1]) shuffle

一组创建随机数据的方法

sample随机一个

sampleSize随机n个

_.shuffle(collection) 数组乱序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript中,array对象是一种特殊的对象,用于存储和操作一组数据。以下是一些array对象的常用方法: 1. push():将一个或多个元素添加到数组的末尾,并返回新数组的长度。 2. pop():从数组的末尾移除并返回最后一个元素。 3. unshift():将一个或多个元素添加到数组的开头,并返回新数组的长度。 4. shift():从数组的开头移除并返回第一个元素。 5. concat():将两个数组连接起来,并返回一个新数组。 6. join():将数组的所有元素连接成一个字符串,并返回该字符串。 7. slice():从原始数组中截取指定范围的元素,并返回一个新数组。 8. splice():在指定索引位置插入或删除元素,并返回删除的元素。 9. indexOf():返回元素在数组中的第一个索引位置,如果不存在,则返回-1。 10. lastIndexOf():返回元素在数组中的最后一个索引位置,如果不存在,则返回-1。 11. forEach():对数组中的每个元素执行指定的操作。 12. map():对数组中的每个元素执行指定的操作,并返回一个新数组。 13. filter():返回满足指定条件的元素组成的新数组。 14. reduce():对数组中的所有元素执行指定的操作,返回一个累计结果。 15. sort():按照升序或降序对数组进行排序。 16. reverse():颠倒数组中元素的顺序。 17. length属性:获取数组的长度。 以上是一些array对象的常用方法,使用这些方法可以方便地对JavaScript中的数组进行操作和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值