数组的常用方法总结

[1、 join()](javascript:;)

[2、 reverse()](javascript:;)

[3、sort()](javascript:;)

[4、concat()](javascript:;)

[5、slice()](javascript:;)

[6、splice()](javascript:;)

[7、push()和pop()](javascript:;)

[8、unshift()和shift](javascript:;)

[9、toString()和toLocaleString()](javascript:;)

[10、forEach()](javascript:;)

[11、map()](javascript:;)

[12、filter()](javascript:;)

[13、every()和some()](javascript:;)

[14、reduce()和reduceRight()](javascript:;)

[15、indexOf()和lastIndexOf()](javascript:;)

[16、Array.from()](javascript:;)

[17、Array.of()](javascript:;)

[18、copyWithin()](javascript:;)

[19、find()和findIndex()](javascript:;)

[20、fill()](javascript:;)

[21、entries()、keys()、values()](javascript:;)

[22、includes()](javascript:;)

1、 join()

功能:将数组中所有元素都转化为字符串并连接在一起。

输入: 分隔符,默认为逗号

输出:分隔符分割的字符串

1//  join(separator) 不传参,默认用逗号拼接2vararr=[1,2,3];
3vararr2[1,2,3];
4arr=arr.join();
5console.log(arr);//1,2,367
arr2=arr2.join(";");
8console.log(arr2);// 1;2;3

2、 reverse()

功能:将数组中的元素颠倒顺序。

输入:无

输出:逆序的数组

1// reverse() 将数组中的元素逆序输出2
vararr[1,2,3];
3arr=arr.reverse().join();
4console.log(arr);//3,2,1

3、sort()

功能:将数组中的元素

输入:比较函数或null。null时表示按照字母表顺序排序;传入带两个参数的比较函数时;第一个参数在前,则返回小于0的数值;第一个参数在后,则返回大于0的数组

输出:排序后数组

注意:改变了原数组

1// sort() 数组排序 默认按第一个字符排序

arr=arr.sort();
console.log(arr);
//  [1111, 22, 333, 5555, 666]
// 按数值大小排序 从小到大arr=arr.sort(function(a,b){returna-b;});
console.log(arr);//  [22, 333, 666, 1111, 5555]
//  // 按数值大小排序 从大到小arr=arr.sort(function(a,b){returnba;});
console.log(arr);//  [5555, 1111, 666, 333, 22]

4、concat()

功能:数组拼接的功能

输入:待拼接的元素;如果参数中有数组,则连接的是数组元素,而非数组本身;但是不支持递归,不修改调用的数组。

输出:拼接后的新数组

注意:新建的数组,原数组不改变。

1// concat() 数组拼接 如果参数中有数组,则连接的是数组元素,而非数组本身;但是不支持递归,不修改调用的数组

vararr[1,3,5,8,9];
console.log(arr.concat(4,7));// [1, 3, 5, 8, 9, 4, 7]
console.log(arr.concat([2,0]));// [1, 3, 5, 8, 9, 2, 0]
console.log(arr.concat(2,[7,[0,4]]));// [1, 3, 5, 8, 9, 2, 7, [0,4]]

5、slice()

功能:获取原数组的片段或子数组

输入:片段的开始和结束

输出:返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数,表示相对于数组中最后一个元素的位置。

注意:新建的数组,原数组不改变。

1// slice() 截取数组 返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数,表示相对于数组中最后一个元素的位置。如果只有一个参数,表示到数组末尾

vararr=[1,8,5,6,3];
console.log(arr.slice(1,3));// [8, 5]
console.log(arr.slice(1,-1));// [8, 5, 6]
console.log(arr.slice(1));// [8, 5, 6, 3]
console.log(arr.slice(-1));// [3]

6、splice()

功能:从数组中删除元素、插入元素到数组中或者同时完成这两种操作。

输入:第一个参数为指定插入或删除的起始位置,第二个参数为要删除的个数。之后的参数表示需要插入到数组中的元素

输出:返回一个由删除元素组成的数组。

注意:新建了一个数组,并修改了原数组

1// splice() 删除或插入数组元素 第一个参数为指定插入或删除的起始位置,第二个参数为要删除的个数。如果只有一个参数默认删除后面所有的。返回删除后的数组。

vararr[3,2,6,5,9];3console.log(arr.splice(1,3));// [2,6,5]
console.log(arr);// [3,9]
console.log(arr.splice(1));// [2,6,5,9]
console.log(arr);// [3]
console.log(arr.splice(2,0,'a','b'));// 3个参数表示添加元素, [] 返回删除元素的数组9console.log(arr);//[3, 2, "a", "b", 6, 5, 9]  将a,b添加到数组中

7、push()和pop()

功能:push从数组尾部添加一个或多个元素,并返回数组新的长度;pop返回最后一个元素

输入:push输入为插入的元素;pop输入为空

输出:push为新长度;pop为返回的数组元素

1// push() 在数组末尾添加一个或多个元素,并返回新数组长度2// pop() 从数组末尾删除1个元素(删且只删除1个), 并返回 被删除的元素

vararr=[2,4,9];
console.log(arr.push(5,3));// 5
console.log(arr);// [2, 4, 9, 5, 3]
console.log(arr.pop());// 3
console.log(arr);// [2, 4, 9, 5]

8、unshift()和shift

功能:类似push和pop,不同是从头部插入和删除,而非尾部

1// shift() 在数组开始添加一个或多个元素,并返回新数组长度2// unshift() 在数组开始删除一个元素(删且只删除1个),并返回 被删除的元素

vararr=[8,3,5,6];
console.log(arr.unshift(9,2));// 6
console.log(arr);//[9, 2, 8, 3, 5, 6]
console.log(arr.shift());//9
console.log(arr);// [2, 8, 3, 5, 6]

9、toString()和toLocaleString()

功能:将数组的每个元素转化为字符串,并且输入用逗号分隔的字符串列表。功能类似join();

输入:无

输出:字符串

1// toString()和toLocaleString() 将数组的每个元素转化为字符串

vararr=['a','b','c','d','e'];
console.log(arr.toString());// a,b,c,d,e
console.log(arr.toLocaleString());// a,b,c,d,e

10、forEach()

功能:从头至尾遍历数组,为每个元素调用指定函数

输入:输入为一个待遍历函数,函数的参数依次为:数组元素、元素的索引、数组本身

输出:只是执行了遍历函数,无特定返回

1// forEach() 函数的参数依次为:数组元素、元素的索引、数组本身, 无返回

vararr=[1,2,3,4,5];
arr.forEach(function(v,i,arr){4arr[i]=v+1;5});
console.log(arr);//  [2, 3, 4, 5, 6]

11、map()

功能:调用的数组的每一个元素传递给指定的函数,并返回一个新数组

输入:和forEach一样

输出:执行完函数的新数组

注意:返回新数组,不修改原数组

1// map() 调用的数组的每一个元素传递给指定的函数,并返回一个新数组 ,不修改原数组```

vararr=[2,3,4,5,6];
varresult=arr.map(function(x){4returnx*x;5});
console.log(result);// [4, 9, 16, 25, 36]

12、filter()

功能:将数组元素执行特定函数,而返回一个子集。

输入:执行逻辑判断的函数,该函数返回true或false,参数类似forEach和map()

输出:如果执行输入函数返回值为true,则传递给判定函数的元素是这个子集的成员

1// filter() 过滤功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组

vararr=[1,3,5,6,8];
 varresult=arr.filter(function(x){returnx%2||x>6;5});
console.log(result);// [1,3,5,8]

13、every()和some()

功能:对数组元素进行指定函数的逻辑判断。

输入:特定函数

输出:true 或者false

1// every() 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

vararr=[3,7,9,1,5];
varresult=arr.every(function(x){returnx>3;});
console.log(result);// false//  some() 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
vararr=[5,2,3,8,9];
varresult=arr.some(function(x){11returnx<5;});
console.log(result);// true

14、reduce()和reduceRight()

功能:使用指定的函数将数组元素进行组合,生成单个值。

输入:两个参数,第一个是执行化简操作的函数。第二个(可选)的参数是一个传递给函数的初始值。

注意:执行化简的函数的第一个参数为目前为止化简操作累积的结果。

1// reduce() 两个参数:函数和递归的初始值。从数组的第一项开始,逐个遍历到最后2// reduceRight() 从数组的最后一项开始,向前遍历到第一项

vararr=[1,3,4,6,8,9];
varresult=arr.reduce(function(prev,cur,index,arr){//前一个值、当前值、项的索引和数组对象returnprev+cur;7},10);
console.log(result);// 41

15、indexOf()和lastIndexOf()

功能:搜索整个数组中具有给定值得元素,返回找到的第一个元素的索引或者如果没有找到就返回-1.lastIndexOf为反向搜索。 输入:元素的值。 输出:索引值

1// indexOf() 两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。没找到返回-1. 返回查找项的索引值2// lastIndexOf() 从数组的末尾开始向前查找。返回查找项的索引值(索引值永远是正序的索引值),没找到返回-1

vararr=[3,4,6,9,8];
console.log(arr.indexOf(6,1));//2
console.log(arr.indexOf(5));// -1
console.log(arr.lastIndexOf(4));// 1

16、Array.from()

功能:将两类对象转为真正的数组:类似数组的对象和可遍历的对象

输入:待转换的对象,第二个参数可选,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。

输出:数组

letarrayLike={2'0':'a',3'1':'b',4'2':'c',length:36};
letarr2=Array.from(arrayLike);// =>['a','b','c']

17、Array.of()

功能:将一组值,转换为数组。

输入:数组元素

输出:数组

Array.of(2,11,3)// =>[2,11,3]2Array.of(3)// =>[3]

18、copyWithin()

功能:在当前数组内部,将指定位置的成员复制到其他位置,返回当前数组。

输入:第一个参数(从该位置开始替换数据);第二个参数可选(从该位置开始读取数据,默认为0,负值表示倒数);第三个参数(到该位置前停止读取,默认为数组长度)

输出:返回当前替换后的数组。

注意:改变了当前数组

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

19、find()和findIndex()

功能:找到第一个符合条件的数组成员。

输入:回调函数,所有数组成员依次执行该函数,直到找到第一个返回值为true的成员。回调函数可以接受三个参数,依次为值,位置,原数组。

输出:find()返回找到的成员;findIndex()返回成员的位置。

1[1,5,10,15].find(function(value,index,arr){2returnvalue>9;3})// =>10

20、fill()

功能:使用给定的值,填充一个数组。

输入:第一个参数为待填充的值,第二和第三参数可选,分别表示填充的起始和结束位置(不包括)。

输出:填充后的数组

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

21、entries()、keys()、values()

功能:用于遍历数组,可以用for…of循环进行遍历。区别是keys()是对键名的遍历、values是对键值的遍历、entries()是对键值对的遍历。

输入:无

输出:遍历器对象

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

如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历。

22、includes()

功能:表示某个数组是否包含给定的值

输入:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。

输出:一个布尔值。

注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。

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