js数组常用方法总结

最近工作中经常用到数组操作,每次都傻傻不知道怎么用,今天有时间整理了一下,希望对大家有帮助!这些基础的知识,要熟记于心。

1、 join()

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

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

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

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

2、 reverse()

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

输入:无

输出:逆序的数组

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

3、sort() 

功能:将数组中的元素  输入:比较函数或null。null时表示按照字母表顺序排序;传入带两个参数的比较函数时;第一个参数在前,则返回小于0的数值;第一个参数在后,则返回大于0的数组  输出:排序后数组  注意:改变了原数组 

 1 // sort()  数组排序 默认按第一个字符排序
 2    var  arr = [1111,333,22,666,5555];
 3    arr = arr.sort();
 4    console.log(arr); //  [1111, 22, 333, 5555, 666]
 5    // 按数值大小排序 从小到大
 6    arr = arr.sort(function(a,b){
 7       return a-b;
 8    });
 9    console.log(arr);  //  [22, 333, 666, 1111, 5555]
10 
11 //   // 按数值大小排序 从大到小
12    arr = arr.sort(function(a,b){
13       return b-a;
14    });
15    console.log(arr);  //  [5555, 1111, 666, 333, 22]

4、concat() 

功能:数组拼接的功能  输入:待拼接的元素;如果参数中有数组,则连接的是数组元素,而非数组本身;但是不支持递归,不修改调用的数组。  输出:拼接后的新数组  注意:新建的数组,原数组不改变。 

1 //   concat() 数组拼接 如果参数中有数组,则连接的是数组元素,而非数组本身;但是不支持递归,不修改调用的数组
2      var arr = [1,3,5,8,9];
3      console.log(arr.concat(4,7)); // [1, 3, 5, 8, 9, 4, 7]
4      console.log(arr.concat([2,0])); // [1, 3, 5, 8, 9, 2, 0]
5      console.log(arr.concat(2,[7,[0,4]])); // [1, 3, 5, 8, 9, 2, 7, [0,4]]

5、slice() 

功能:获取原数组的片段或子数组  输入:片段的开始和结束  输出:返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数,表示相对于数组中最后一个元素的位置。  注意:新建的数组,原数组不改变。

1 //   slice() 截取数组 返回的数组包含第一个参数指定的位置和所有到但不含第二个参数指定位置之间的所有元素。如果为负数,表示相对于数组中最后一个元素的位置。如果只有一个参数,表示到数组末尾
2    var arr = [1,8,5,6,3];
3    console.log(arr.slice(1,3)); // [8, 5]
4    console.log(arr.slice(1,-1)); // [8, 5, 6]
5    console.log(arr.slice(1)); // [8, 5, 6, 3]
6    console.log(arr.slice(-1)); // [3]

6、splice() 

功能:从数组中删除元素、插入元素到数组中或者同时完成这两种操作。  输入:第一个参数为指定插入或删除的起始位置,第二个参数为要删除的个数。之后的参数表示需要插入到数组中的元素  输出:返回一个由删除元素组成的数组。  注意:新建了一个数组,并修改了原数组 

1 //   splice() 删除或插入数组元素 第一个参数为指定插入或删除的起始位置,第二个参数为要删除的个数。如果只有一个参数默认删除后面所有的。返回删除后的数组。
2    var arr = [3,2,6,5,9];
3    console.log(arr.splice(1,3)); // [2,6,5]
4    console.log(arr); // [3,9]
5    console.log(arr.splice(1)); // [2,6,5,9]
6    console.log(arr); // [3]
7 
8    console.log(arr.splice(2,0,'a','b')); // 3个参数表示添加元素, [] 返回删除元素的数组
9    console.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个), 并返回 被删除的元素
3    var arr = [2,4,9];
4    console.log(arr.push(5,3)); // 5
5    console.log(arr); // [2, 4, 9, 5, 3]
6    console.log(arr.pop()); // 3
7    console.log(arr); // [2, 4, 9, 5]

8、unshift()和shift 

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

1 //   shift() 在数组开始添加一个或多个元素,并返回新数组长度
2 //   unshift() 在数组开始删除一个元素(删且只删除1个),并返回 被删除的元素
3    var arr = [8,3,5,6];
4    console.log(arr.unshift(9,2)); // 6
5    console.log(arr); //[9, 2, 8, 3, 5, 6]
6    console.log(arr.shift()); //9
7    console.log(arr); // [2, 8, 3, 5, 6]

9、toString()和toLocaleString() 

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

1 //   toString()和toLocaleString() 将数组的每个元素转化为字符串
2    var arr = ['a','b','c','d','e'];
3    console.log(arr.toString()); // a,b,c,d,e
4    console.log(arr.toLocaleString()); // a,b,c,d,e

10、forEach()

 功能:从头至尾遍历数组,为每个元素调用指定函数  输入:输入为一个待遍历函数,函数的参数依次为:数组元素、元素的索引、数组本身  输出:只是执行了遍历函数,无特定返回 

1 //   forEach() 函数的参数依次为:数组元素、元素的索引、数组本身, 无返回
2    var arr = [1,2,3,4,5];
3    arr.forEach(function(v , i , arr){
4       arr[i] = v+1;
5    });
6    console.log(arr); //  [2, 3, 4, 5, 6]

11、map() 

功能:调用的数组的每一个元素传递给指定的函数,并返回一个新数组  输入:和forEach一样  输出:执行完函数的新数组  注意:返回新数组,不修改原数组 

1 //   map() 调用的数组的每一个元素传递给指定的函数,并返回一个新数组 ,不修改原数组
2    var arr = [2,3,4,5,6];
3    var result = arr.map(function(x){
4       return x*x;
5    });
6    console.log(result); // [4, 9, 16, 25, 36]

12、filter()

 功能:将数组元素执行特定函数,而返回一个子集。  输入:执行逻辑判断的函数,该函数返回true或false,参数类似forEach和map()  输出:如果执行输入函数返回值为true,则传递给判定函数的元素是这个子集的成员 

1  //   filter() 过滤功能,数组中的每一项运行给定函数,返回满足过滤条件组成的数组
2    var arr = [1,3,5,6,8];
3    var result = arr.filter(function(x){
4       return x%2 || x>6;
5    });
6    console.log(result); // [1,3,5,8]

13、every()和some() 

功能:对数组元素进行指定函数的逻辑判断。  输入:特定函数  输出:true 或者false 

 1  //   every() 判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。
 2    var arr = [3,7,9,1,5];
 3    var result = arr.every(function(x){
 4       return x > 3 ;
 5    });
 6    console.log(result); // false
 7 
 8    //   some() 判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。
 9    var arr = [5,2,3,8,9];
10    var result = arr.some(function(x){
11       return x < 5;
12    });
13    console.log(result); // true

14、reduce()和reduceRight() 

功能:使用指定的函数将数组元素进行组合,生成单个值。  输入:两个参数,第一个是执行化简操作的函数。第二个(可选)的参数是一个传递给函数的初始值。  注意:执行化简的函数的第一个参数为目前为止化简操作累积的结果。 

1 //   reduce() 两个参数:函数和递归的初始值。从数组的第一项开始,逐个遍历到最后
2    // reduceRight() 从数组的最后一项开始,向前遍历到第一项
3 
4    var arr = [1,3,4,6,8,9];
5    var result = arr.reduce(function(prev,cur,index,arr){ //前一个值、当前值、项的索引和数组对象
6       return prev + cur;
7    },10);
8    console.log(result); // 41

15、indexOf()和lastIndexOf() 

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

1 //   indexOf() 两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中, 从数组的开头(位置 0)开始向后查找。没找到返回-1. 返回查找项的索引值
2    // lastIndexOf() 从数组的末尾开始向前查找。返回查找项的索引值(索引值永远是正序的索引值),没找到返回-1
3    var arr = [3,4,6,9,8];
4    console.log(arr.indexOf(6,1)); //2
5    console.log(arr.indexOf(5)); // -1
6    console.log(arr.lastIndexOf(4)); // 1

16、Array.from() 

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

1 let arrayLike = {
2        '0':'a',
3        '1':'b',
4        '2':'c',
5        length:3
6 };
7 let arr2 = Array.from(arrayLike);// =>['a','b','c']

17、Array.of() 

功能:将一组值,转换为数组。  输入:数组元素  输出:数组 

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

18、copyWithin() 

功能:在当前数组内部,将指定位置的成员复制到其他位置,返回当前数组。  输入:第一个参数(从该位置开始替换数据);第二个参数可选(从该位置开始读取数据,默认为0,负值表示倒数);第三个参数(到该位置前停止读取,默认为数组长度)  输出:返回当前替换后的数组。  注意:改变了当前数组 

1 [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){
2     return value > 9;
3 })// =>10

20、fill() 

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

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

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

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

 1 for (let index of ['a', 'b'].keys()) {
 2   console.log(index);
 3 }
 4 // =>0
 5 // =>1
 6 
 7 for (let elem of ['a', 'b'].values()) {
 8   console.log(elem);
 9 }
10 // =>'a'
11 // =>'b'
12 
13 for (let [index, elem] of ['a', 'b'].entries()) {
14   console.log(index, elem);
15 }
16 // =>0 "a"
17 // =>1 "b"

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

22、includes() 

功能:表示某个数组是否包含给定的值  输入:第一个参数必选(待检查的给定值),第二个参数可选,表示搜索的起始位置,默认为0,负数表示倒数的位置。  输出:一个布尔值。  注意:和indexOf的区别,indexOf进行了运算符的强比对,会导致对NaN误判。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏步履前行

Java基础系列---static关键字

  今天在和同事讨论的时候谈到了关于static的问题,正巧自己有一些忘记了,就特来学习一番。

14140
来自专栏编程

Python基础2字符串

String 字符串是Python中最常用的数据类型,可以用单引号和双引号创建字 符串,字符串是不可变的。 字符串的基本操作:Python内建序列包括(列表、元...

20490
来自专栏HTML5学堂

JavaScript | 获取数组中的单词并统计出现次数

HTML5学堂(码匠):如何通过JavaScrip实现数组元素的查找?在一个数组当中,找到所有的单词,并统计每个单词出现的次数。 功能需求 在一个自定义数组...

57370
来自专栏Python攻城狮

面向对象编程-继承1.继承介绍以及单继承 2.继承示例3.多继承4.重写父类方法与调用父类方法5.类属性和实例属性6.静态方法和类方法

继承的概念:在现实生活中,继承一般指的是子女继承父辈的财产,在程序中,继承描述的是事物之间的所属关系,例如猫和狗都属于动物,程序中便可以描述为猫和狗继承自动物;...

8220
来自专栏北京马哥教育

Python Re 模块最全解读: 11703 字帮你彻底掌握

re模块下的函数 compile(pattern):创建模式对象 import re pat=re.compile('A') m=pat.search('CBA...

345100
来自专栏加米谷大数据

技术分享 | Python之列表(list)解析

Python内置的一种数据类型是列表(list),list是一种有序的集合,可以随时添加和删除其中的元素,列表中的每个元素都分配一个数字,是它的位置(或者叫索引...

44570
来自专栏用户2442861的专栏

互联网几道常考易错笔试题总结

转载于http://blog.csdn.net/chhuach2005/article/details/40322895

12120
来自专栏学海无涯

19.Swift学习之构造函数与析构函数

11130
来自专栏数据结构笔记

python基础类型(三):可调用类型——函数和方法

在 python中所有的类型都是对象,即使是 int,float这些其他语言中的基础类型在 python中也是以对象的形式存在,函数和方法也不例外。

11330
来自专栏小二的折腾日记

day5(面向对象2)

6020

扫码关注云+社区

领取腾讯云代金券