es6常用数组操作及技巧汇总

常用方法

1. array.concat(array1, array2,...arrayN);

合并多个数组,返回合并后的新数组,原数组没有变化。

const array = [1,2].concat(['a','b'], ['name']);

//[1,2,"a","b","name"]

2. array.every(callback[, thisArg]);

检测数组中的每一个元素是否都通过了callback测试,全部通过返回true,否则返回false。

// callback定义如下: element:当前元素值;index:当前元素下标; array:当前数组

functioncallback(element, index, array) {

// callback函数必须返回true或者false告知every是否通过测试

returntrue||false;

}

3. array.filter(callback[, thisArg]);

返回一个新数组,包含通过callback函数测试的所有元素。

// callback定义如下,三个参数: element:当前元素值;index:当前元素下标; array:当前数组

functioncallback(element, index, array) {

// callback函数必须返回true或者false,返回true保留该元素,false则不保留。

returntrue||false;

}

constfiltered = [1,2,3].filter(element => element >1);

// filtered: [2, 3];

4. array.find(callback[, thisArg]);

返回通过callback函数测试的第一个元素,否则返回undefined,callback函数定义同上。

constfinded=[1,2,3].find(element=>element>1);

//finded:2

如果你需要找到一个元素的位置或者一个元素是否存在于数组中,使用Array.prototype.indexOf() 或 Array.prototype.includes()。

5. array.findIndex(callback[, thisArg]);

返回通过callback函数测试的第一个元素的索引,否则返回-1,callback函数定义同上。

constfindIndex=[1,2,3].findIndex(element=>element>1);

//findIndex:1

6. array.includes(searchElement, fromIndex);

includes() 方法用来判断一个数组是否包含一个指定的值,返回 true或 false。searchElement:要查找的元素;fromIndex:开始查找的索引位置。

[1,2,3].includes(2,2);

//false

7. array.indexOf(searchElement[, fromIndex = 0]);

返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。searchElement:要查找的元素;fromIndex:开始查找的索引位置。

[2,9,7,8,9].indexOf(9);

//1

8. array.join(separator=',');

将数组中的元素通过separator连接成字符串,并返回该字符串,separator默认为","。

[1, 2, 3].join(';');

// "1;2;3"

9. array.map(callback[, thisArg]);

返回一个新数组,新数组中的每个元素都是调用callback函数后返回的结果。注意:如果没有return值,则新数组会插入一个undefined值。

array.map由于不具有过滤的功能,因此array调用map函数时,如果array中的数据并不是每一个都会return,则必须先filter,然后再map,即map调用时必须是对数组中的每一个元素都有效。

const maped = [{name:'aa',age:18}, {name:'bb',age:20}].map(item=>item.name +'c');

// maped: ['aac', 'bbc'];

10. array.pop() 与 array.shift();

pop为从数组中删除最后一个元素,并返回最后一个元素的值,原数组的最后一个元素被删除。数组为空时返回undefined。

[1,2,3].pop();

//3

shift删除数组的第一个元素,并返回第一个元素,原数组的第一个元素被删除。数组为空返回undefined。

constshifted = ['one','two','three'].shift();

//shifted:'one'

11. array.push(element1, element2, ....elementN) 与 array.unshift(element1, element2, ...elementN);

push是将一个或多个元素添加到数组的末尾,并返回新数组的长度; unshift将一个或多个元素添加到数组的开头,并返回新数组的长度。唯一的区别就是插入的位置不同。

constarr=[1,2,3];

constlength=arr.push(4,5);

//arr:[1,2,3,4,5];length:5

push和unshift方法具有通用性,通过call()或者apply()方法调用可以完成合并两个数组的操作。

const vegetables = ['parsnip','potato'];

const moreVegs = ['celery','beetroot'];

//将第二个数组融合进第一个数组

//相当于 vegetables.push('celery','beetroot');

Array.prototype.push.apply(vegetables, moreVegs);

或者

[].push.apply(vegetables, moreVegs);

//vegetables: ['parsnip','potato','celery','beetroot']

12. array.reduce(callback[, initialValue]);

对数组中的每个元素(从左到右)执行callback函数累加,将其减少为单个值。

consttotal = [0,1,2,3].reduce((sum, value) =>{

returnsum + value;

},0);

// total is 6

constflattened = [[0,1], [2,3], [4,5]].reduce((a, b) =>{

returna.concat(b);

}, []);

// flattened is [0, 1, 2, 3, 4, 5]

// initialValue累加器初始值, callback函数定义:

function callback(accumulator, currentValue, currentIndex, array) {

}

accumulator代表累加器的值,初始化时,如果initialValue有值,则accumulator初始化的值为initialValue,整个循环从第一个元素开始;initialValue无值,则accumulator初始化的

值为数组第一个元素的值,currentValue为数组第二个元素的值,整个循环从第二个元素开始。initialValue的数据类型可以是任意类型,不需要跟原数组内的元素值类型一致。

constnewArray = [{name:'aa',age:1}, {name:'bb',age:2}, {name:'cc',age:3}].reduce((arr, element) =>{

if(element.age >=2) {

    arr.push(element.name);

  }

returnarr;// 必须有return,因为return的返回值会被赋给新的累加器,否则累加器的值会为undefined。

}, []);

// newArray is ["bb", "cc"];

上面代码的同等写法:

constnewArray = [{name:'aa',age:1}, {name:'bb',age:2}, {name:'cc',age:3}].filter(element =>element.age >=2).map(item =>item.name);

// newArray is ["bb", "cc"];

对于reduce的特殊用法,其实类似于省略了一个变量初始化步骤,然后通过每次的callback的返回修改该变量,最后返回最终变量值的过程,类似于一个变量声明 + 一个forEach执行过程。

constnewArray = [];

[{name:'aa',age:1}, {name:'bb',age:2}, {name:'cc',age:3}].forEach(item =>{

if(item.age >=2) {

  newArray.push(item.name);

}

});

13. array.reverse();

将数组中元素的位置颠倒。

['one','two','three'].reverse();

//['three','two','one'],原数组被翻转

14. array.slice(begin, end)

返回一个新数组,包含原数组从begin 到 end(不包含end)索引位置的所有元素。

const newArray = ['zero','one','two','three'].slice(1,3);

//newArray:['one','two'];

15. array.some(callback[, thisArg]);

判断数组中是否包含可以通过callback测试的元素,与every不同的是,这里只要某一个元素通过测试,即返回true。callback定义同上。

[2,5,8,1,4].some(item=>item>6);

//true

16. array.sort([compareFunction]);

对数组中的元素进行排序,compareFunction不存在时,元素按照转换为的字符串的诸个字符的Unicode位点进行排序,慎用!请使用时一定要加compareFunction函数,而且该排序是不稳定的。

[1,8,5].sort((a, b) =>{

returna-b;// 从小到大排序

});

// [1, 5, 8]

17. array.splice(start[, deleteCount, item1, item2, ...]);

通过删除现有元素和/或添加新元素来更改一个数组的内容。start:指定修改的开始位置;deleteCount:从 start位置开始要删除的元素个数;item...:要添加进数组的元素,从start 位置开始。

返回值是由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

如果 deleteCount 大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。

const myFish = ['angel','clown','mandarin','sturgeon'];

const deleted = myFish.splice(2,0,'drum'); // 在索引为2的位置插入'drum'

// myFish 变为 ["angel","clown","drum","mandarin","sturgeon"],deleted为[]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353