JavaScript中数组常用的方法汇总

JavaScript中Array()是一个非常常用的类型,array自带了很多方法。下面列举一些常用的方法,还有一些方法不太常用,全面的方法参考MDN web docs,点击打开链接。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

  • sort() 对数组中的元素进行排序,返回排序后的数组

参数:可选,规定排序方式的比较函数 

默认情况下sort()方法没有传比较函数作为参数的话,默认按字母升序,如果不是元素不是字母形式的字符 串的话,会调用toString()方法将元素转化为字符串的Unicode(编码)位点,然后再比较字符。

比较函数会包含两个参数,这两个参数就是数组中要进行比较的两个元素a和b

array.sort(function (a, b) {
    return a - b;  // 或者return b - a;
});
根据比较函数的返回值来确定数组的排序方式: 
        1、 如果比较函数返回值 < 0,那么a在前,b在后;  
        2、 如果比较函数返回值 = 0,那么a和b的相对位置不变;  
        3、 如果比较函数返回值 > 0,那么b在前,a在后。
var array = [1, 10, 5, 43, 1, 4];
array.sort(function(a, b) {
    return a - b;
});  //  [1, 1, 4, 5, 10, 43]
array.sort(function(a, b) {
    return b - a;
});  //  [43, 10, 5, 4, 1, 1]

  • pop() 删除数组中的最后一个元素,返回删除的这个元素
var a = [1, 2, 3, 4];
var res = a.pop();  // res为4
console.log(a);  // [1, 2, 3]
  • shift() 删除数组中的第一个元素,返回删除的这个元素
var a = [1, 2, 3, 4];
var res = a.shift();  // res为1
console.log(res);  // [2, 3, 4]
  • push() 向数组的末尾添加一个或多个元素,并返回新的长度
var a = [1, 230, 304];
var res = a.push(20);  // 4
console.log(a);  // [1, 230, 304, 20]
  • unshift() 向数组的开头添加一个或多个元素,并返回新的长度
var a = [1, 230, 304];
var res = a.unshift('20');  // 4
console.log(res);  // ["20", 1, 230, 304]

  • slice(begin, end)返回一个从index为begin开始到index为end结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象,且原数组不会被修改
var a = [1, 32, 34, 42, 2, 4, 42];
var res = a.slice(2, 4);
res  // [34, 42]
a  // [1, 32, 34, 42, 2, 4, 42]

  • splice(数组)splice方法从array中移除一个或多个数组,并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');    //a=['a','e','f','c'],b=['b']
  • reverse将数组中的元素倒序输出。在原数组的基础上进行反序输出,不会创建新数组。
  • join() 用于把数组中的所有元素通过指定的分隔符(默认使用逗号)进行分隔放入一个字符串,返回生成的字符串
var a = ['hello', 'world'];
var res = a.join();
res  // "hello,world"
a  // ["hello", "world"]
var res = a.join('*');
res  // "hello*world"
a  // ["hello", "world"]
  • indexOf() 找到给定元素在数组中的索引,返回下标index,查找不到就返回-1
var a = ['hello', 'world', 'hello', 'hhh']
var res = a.indexOf('hello');
res  // 0
a  // ["hello", "world", "hello", "hhh"]
var res = a.indexOf('hello', 1);
res  // 2

  • includes() 查找数组是否包含某个元素,返回布尔
var a = ['hello', 'world'];
a.includes('hello');  // true
a.includes('hello2');  // false

  • 数组和字符串的相互转换join() split()

数组转字符串用arr.join(",")    var  arr = [a,b,c]  ,arr.join(",")   //a,b,c   想要用字符连接,可以用.join(' -') ,比如,arr.join('-') ;// "a-b-c"

字符串转数组用arr.split(",")   括号里可以写字符,也可以不写,比如“abc”.split('') ; //[a,b,c]  ; "a,b,c".split(',') // [a,b,c] ;

  • 数组迭代方法。一共有5个,every,some,filter,forEach,map。

ES5定义了五个迭代方法,每个方法都接收两个参数:要在每一项上运行的函数和运行该函数的作用域对象(可选的),作用域对象将影响this的值。传入这些方法中的函数会接收三个参数:数组的项的值、该项在数组中的位置和数组对象本身。

  • every() 和 some()

every()是对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。

some()是对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

every()和some()很相似,他们都用于查询数组中的项是否满足某个条件,对every()来说,传入的函数必须对每一项都返回true,这个方法才返回true;否则,则返回false。而some()方法则只要传入的函数对数组中的某一项返回true,就会返回true。例如:

var numbers=[1,2,3,4,5,4,3,2,1];

  var everyResult=numbers.every(function(item,index,array){

return (item>2);

});

alert(everyResult);//false

var someResult=numbers.some(function(item,index,array){

return (item>2);

});

alert(someResult);//true

以上代码调用了every()和some(),传入的函数只要给定项大于2就会返回true。对于every(),它返回的是false,因为只有部分数组符合条件 ; 而对于some(),结果就是true,因为至少有一项是大于2的。


  • filter()

filter()是对数组中的每一项运行给定函数,返回该函数会返回true的项所组成的数组。它利用指定的函数确定是否在返回的数组中包含某一项。例如:

var numbers=[1,2,3,4,5,4,3,2,1];

var filterResult=numbers.filter(function(item,index,array){

return (item>2);

});

alter(filterResult); //[3,4,5,4,3];

此例子中,传入的函数要返回一个所有数值都大于2的数组,通过调用filter()方法创建并返回了包含3/4/5/4/3的数组,因为传入的函数对它们的每一项都返回true。这个方法对查询符合某些条件的所有数组项非常有用。

  • map()

map()是对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。这个数组的每一项都是在原始数据中的对应项上运行传入函数的结果,例如:

var numbers=[1,2,3,4,5,4,3,2,1];

  var mapResult=numbers.map(function(item,index,array){

return item*2;

});

alert(mapResult); //[2,4,6,8,10,8,6,4,2]

以上代码返回的数组中包含每个数乘以2之后的结果,这个方法适合创建包含的项与另一个数组一一对应的数组。

  • forEach()

forEach() 是多数组中的每一项运行给定函数,这个方法没有返回值。它只是对数组中的每一项运行传入的函数,没有返回值。本质上与使用for循环迭代数组一样。

var numbers=[1,2,3,4,5,4,3,2,1];

numbers.forEach(function(iterm,index,array){

//执行某些操作

});


猜你喜欢

转载自blog.csdn.net/weixin_42333548/article/details/80536952
今日推荐