38.【javascript】最完整的数组方法汇总(2021-03-07)

1、concat()

用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。

语法 :array.concat(value1, value2, ..., valueN);

参数 :valueN - 要连接到结果数组的数组和/或值

返回值 :返回一个新数组

例:

var alpha = ["a", "b", "c"];

var numeric = [1, 2, 3];

var alphaNumeric = alpha.concat(numeric);

console.log("alphaNumeric : " + alphaNumeric );

输出:

alphaNumeric : a,b,c,1,2,3


2、join()

用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用’,'号分割,不改变原数组。

语法:array.join(separator);

参数:separator - 指定用于分隔数组的每个元素的字符串。如果省略,则使用逗号分隔数组元素。

返回值:连接所有数组元素后返回一个字符串。

例:

var arr = new Array("First","Second","Third");

var str = arr.join();console.log("str : " + str ); 

var str = arr.join(", ");

console.log("str : " + str ); 

var str = arr.join(" + ");

console.log("str : " + str );

输出:

str : First,Second,Third

str : First, Second, Third

str : First + Second + Third


3、push()

可向数组的末尾添加一个或多个元素,并返回新的长度。末尾添加,返回的是长度,会改变原数组。

语法:array.push(element1, ..., elementN);

参数:element1,...,elementN:要添加到数组末尾的元素。

返回值:返回新数组的长度。

例:

var numbers = new Array(1, 4, 9);

var length = numbers.push(10);

console.log("new numbers is : " + numbers ); 

length = numbers.push(20);

console.log("new numbers is : " + numbers );

输出

new numbers is : 1,4,9,10

new numbers is : 1,4,9,10,20

4、pop()

用于删除并返回数组的最后一个元素。返回最后一个元素,会改变原数组。

语法:array.pop();

返回值:从数组中返回已删除的元素。

var numbers = [1, 4, 9];

var element = numbers.pop();

console.log("element is : " + element ); 

var element = numbers.pop();

console.log("element is : " + element );

输出

element is : 9

element is : 4


5、shift()

用于把数组的第一个元素从其中删除,并返回第一个元素的值。返回第一个元素,改变原数组。

语法:array.shift();

返回值:返回已删除的数组的单个值。

var arr = [10, 1, 2, 3].shift();

console.log("Shifted value is : " + arr )

输出

Shifted value is : 10


6、unshift()

向数组的开头添加一个或更多元素,并返回新的长度。返回新长度,改变原数组。

语法:array.unshift( element1, ..., elementN );

参数:element1,...,elementN - 要添加到数组前面的元素

返回值:返回新数组的长度。它在IE浏览器中返回undefined

var arr = new Array("orange", "mango", "banana", "sugar");

var length = arr.unshift("water");

console.log("Returned array is : " + arr );

console.log("Length of the array is : " + length );

输出

Returned array is : water,orange,mango,banana,sugar

Length of the array is : 5


7、slice()

返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。返回选定的元素,该方法不会修改原数组。

语法:array.slice( begin [,end] );

参数:begin - 开始提取的从零开始的索引。作为负索引,start表示从序列末尾开始的偏移量。end - 结束提取的从零开始的索引。

返回值:根据传递的参数返回提取的数组。

var arr = ["orange", "mango", "banana", "sugar", "tea"];

console.log("arr.slice( 1, 2) : " + arr.slice( 1, 2) );

console.log("arr.slice( 1, 3) : " + arr.slice( 1, 3) );

输出

arr.slice( 1, 2) : mango

arr.slice( 1, 3) : mango,banana


8、splice()

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。splice() 方法会直接对数组进行修改。

语法:array.splice(index, howMany, [element1][, ..., elementN]);

参数:index - 开始更改数组的索引。howMany - 一个整数,指示要删除的旧数组元素的数量。如果howMany为0,则不删除任何元素。element1,...,elementN - 要添加到数组的元素。如果未指定任何元素,则splice只是从数组中删除元素。

返回值:根据传递的参数返回提取的数组。

var arr = ["orange", "mango", "banana", "sugar", "tea"]; 

var removed = arr.splice(2, 0, "water"); 

console.log("After adding 1: " + arr ); 

console.log("removed is: " + removed);

removed = arr.splice(3, 1); 

console.log("After adding 1: " + arr ); 

console.log("removed is: " + removed); 

在编译时,它将在JavaScript中生成相同的代码。

输出

After adding 1: orange,mango,water,banana,sugar,tea

removed is: 

After adding 1: orange,mango,water,sugar,tea

removed is: banana

9、sort 排序

按照 Unicode code 位置排序,默认升序

语法:array.sort( compareFunction );

参数:compareFunction - 指定定义排序顺序的函数。如果省略,则按字典顺序对数组进行排序。

返回值:返回已排序的数组。

var arr = new Array("orange", "mango", "banana", "sugar");

var sorted = arr.sort();

console.log("Returned string is : " + sorted );

输出

Returned string is : banana,mango,orange,sugar


10、reverse()

用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组

语法:array.reverse();

返回值:返回数组的反转单值。

var arr = [0, 1, 2, 3].reverse();

console.log("Reversed array is : " + arr );

输出

Reversed array is : 3,2,1,0


11、indexOf 和 lastIndexOf

(1)indexOf 返回第一次出现的指定值的调用String对象中的索引,从fromIndex开始搜索,如果未找到该值,则返回-1

语法:array.indexOf(searchElement[, fromIndex]);

参数:searchElement - 要在数组中定位的元素。fromIndex - 开始搜索的索引。默认为0,即将搜索整个数组。如果索引大于或等于数组的长度,则返回-1。

返回值:返回找到的元素的索引

(2)lastIndexOf()方法返回在数组中可以找到给定元素的最后一个索引,如果不存在则返回-1。从fromIndex开始向后搜索数组。

语法:array.lastIndexOf(searchElement[, fromIndex]);

参数:searchElement - 要在数组中定位的元素。fromIndex - 开始向后搜索的索引。默认为数组的长度,即将搜索整个数组。如果索引大于或等于数组的长度,则将搜索整个数组。如果是负数,则将其作为距离数组末尾的偏移量

返回值:返回上一个找到的元素的索引。

都接受两个参数:查找的值、查找起始位置

不存在,返回 -1 ;存在,返回位置。indexOf 是从前往后查找, lastIndexOf 是从后往前查找。

(1)例:var index = [12, 5, 8, 130, 44].indexOf(8);

console.log("index is : " + index )

输出:index is : 2

(2)例:var index = [12, 5, 8, 130, 44].lastIndexOf(8);

console.log("index is : " + index );

输出:index is : 2


12、every

对数组的每一项都运行给定的函数,每一项都返回 ture,则返回 true

句法:array.every(callback[, thisObject]);

参数:callback - 测试每个元素的函数。thisObject - 执行回调时用作此对象的对象。

返回值:如果此数组中的每个元素都满足提供的测试函数,则返回true。

function isBigEnough(element, index, array) {

  return (element >= 10);

}

var passed = [12, 5, 8, 130, 44].every(isBigEnough);

console.log("Test Value : " + passed );

输出:

Test Value : false


13、some

some()方法测试数组中的某个元素是否通过了由提供的函数实现的测试

语法:array.some(callback[, thisObject]);

参数:callback - 测试每个元素的函数。thisObject - 执行回调时用作此对象的对象。

返回值:如果某个元素通过了测试,则返回true,否则返回false。

function isBigEnough(element, index, array) {

  return (element >= 10);

}

var retval = [2, 5, 8, 1, 4].some(isBigEnough);

console.log("Returned value is : " + retval );

var retval = [12, 5, 8, 1, 4].some(isBigEnough);

console.log("Returned value is : " + retval );

输出

Returned value is : false

Returned value is : true


14、filter

创建一个新数组,其中包含所有传递由提供的函数实现的测试的元素。

语法:array.filter(callback[, thisObject]);

参数:callback - 测试每个元素的函数。thisObject - 执行回调时用作此对象的对象。

返回值:返回创建的数组。

function isBigEnough(element, index, array) {

  return (element >= 10);

}

var passed = [12, 5, 8, 130, 44].filter(isBigEnough);

console.log("Test Value : " + passed );

输出

Test Value :12,130,44


15、map

对数组的每一项都运行给定的函数,返回每次函数调用的结果组成一个新数组

语法:array.map(callback[, thisObject]);

参数:callback - 从当前元素生成新Array的元素的函数。thisObject - 执行回调时用作此对象的对象。

返回值:返回创建的数组。

var numbers = [1, 4, 9];

var roots = numbers.map(Math.sqrt);

console.log("roots is : " + roots );

输出

roots is : 1,2,3


16、forEach 数组遍历

语法:array.forEach(callback[, thisObject]);

参数:callback - 测试每个元素的函数。thisObject - 执行回调时用作此对象的对象。

返回值:返回创建的数组。

示例:

var nums = new Array(12,13,14,15) 

console.log("Printing original array......") 

nums.forEach(function(val,index) {

  console.log(val)

}) 

nums.reverse()  //reverses the array element

console.log("Printing Reversed array....") 

nums.forEach(function(val,index){

  console.log(val)

})

输出

Printing Original Array….

12

13

14

15

Printing Reversed array…

15

14

13

1

17.reduce

同时对数组的两个值(从左到右)应用函数,以将其减少为单个值

句法:array.reduce(callback[, initialValue]);

参数:callback - 要对数组中的每个值执行的函数。initialValue - 用作第一次调用回调的第一个参数的对象。

返回值:返回数组的减少的单个值。

var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });

console.log("total is : " + total );

输出

total is : 6


18.reduceRight

同时对数组的两个值(从右到左)应用函数,以将其减少为单个值

语法:array.reduceRight(callback[, initialValue]);

参数:callback - 要对数组中的每个值执行的函数。initialValue - 用作第一次调用回调的第一个参数的对象。

返回值:返回数组的右侧单个值。

var total = [0, 1, 2, 3].reduceRight(function(a, b){ return a + b; });

console.log("total is : " + total );

输出

total is : 6


19.toString

返回一个字符串,表示指定数组及其元素的源代码

语法:array.toString();

返回值:返回表示数组的字符串。

var arr = new Array("orange", "mango", "banana", "sugar");       

var str = arr.toString();

console.log("Returned string is : " + str );

输出

Returned string is : orange,mango,banana,sugar


ES6新增新操作数组的方法

1、find():

传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。

2、findIndex():

传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。

3、fill():

用新元素替换掉数组内的元素,可以指定替换下标范围。

4、from

将类似数组的对象(array-like object)和可遍历(iterable)的对象转为真正的数组

5、of

用于将一组值,转换为数组。这个方法的主要目的,是弥补数组构造函数 Array() 的不足。因为参数个数的不同,会导致 Array() 的行为有差异。

6、includes

判断数组中是否存在该元素,参数:查找的值、起始位置,可以替换 ES5 时代的 indexOf 判断方式。indexOf 判断元素是否为 NaN,会判断错误。

参考链接:

https://blog.csdn.net/weixin_43260760/article/details/84023670

http://codingdict.com/article/23035

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

推荐阅读更多精彩内容