数组方法大全

简介: 数组的方法1. join (原数组不受影响) 该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。返回值:返回一个新的字符串

数组的方法

1. join (原数组不受影响)

 该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。

返回值:返回一个新的字符串

//将数组用 - 符号连接起来
let arr = [1,2,3,4,5];
let str = arr.join('-');
console.log(str)//str = 1-2-3-4-5;

2. split (原数组不受影响)

 该方法是用过指定的分隔符,将字符串分割成数组。

返回值:返回一个新的数组

let str = wqz-ttj;
let arr = str.split('-');
console.log(arr);// arr=['wqz','ttj'];

数组的增删操作(直接改变原数组)

3. push

该方法可以在数组的最后面,添加一个或者多个元素

结构: arr.push(值)

返回值:返回的是添加元素后数组的长度.


4. pop

该方法可以在数组的最后面,删除一个元素

结构: arr.pop()

返回值:返回的是刚才删除的元素.


5. unshift

该方法可以在数组的最前面,添加一个或者几个元素

结构: arr.unshift(值)

返回值: 返回的是添加元素后数组的长度


6. shift

该方法可以在数组的最前面,删除一个元素

结构: arr.shift()

返回值: 返回的是刚才删除的元素.


数组的翻转和排序(改变数组)

7. reverse 翻转数组

结构:arr.reserse()


8. sort

该方法可以对数组进行排序.

let arr = [1,3,5,2,4,23,122,34];
//没有参数:时按照首字符的先后排序
arr.sort()//arr=[1,122,2,23,3,34,4,5];
//有参数
arr.sort(function(a,b){
  return a-b;//从小到大排序
  return b-a;//从大到小排序
})

数组的拼接与截取(原数组不受影响)

9. concat

该方法可以把两个数组里的元素拼接成一个新的数组

返回值: 返回拼接后的新数组

let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr = arr1.concat(arr2);//arr = [1,2,3,4,5,6];
arr1.push(arr2);//arr1 = [1,2,3,[4,5,6]];

该方法和push的区别: push是直接把后一个元素原封不动的添加到第一个数组的后面;

10. slice 截取 出来

该方法可以从数组中截取指定的字段,返回出来

返回值:返回截取出来的字段,放到新的数组中,不改变原数组

结构1:arr.slice(start,end) ;从start下标开始截取,一直到end结束,不包括end

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(0,3)//newArr = [0,1,2];

结构2:arr.slice(start) ;从start下标开始截取,一直到最后

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [2,3,4,5,6,7];

结构3:arr.slice( ) ;全部截取

let arr = [0,1,2,3,4,5,6,7];
let newArr = arr.slice(2)//newArr = [0,1,2,3,4,5,6,7];

删除或增加元素(任意在任何位置,直接改变原数组,没有返回值)

11. splice

结构1: arr.splice(start,deletedCount) 纯删除

从start下标开始,删除几个


结构2: arr.splice(start,deletedCount,item) 替换

从start下标开始,删除几个,并在该位置添加item


结构3: arr.splice(start,0,item) 纯添加

从start下标开始,删除0个,并在该位置添加item,start开始全部往后移动

let arr = [1,2,6,7,8];
arr.splice(2,0,3,4,5);//arr = [1,2,3,4,5,6,7,8];

查找元素在数组中出现的位置

12. indexOf

该方法用来查找元素在数组中第一次出现的位置

结构: arr.indexOf(元素)

特殊用法:

(1) arr.indexOf (ele,fromIndex),从fromIndex这个下标开始,元素第一次出现的位置

用来判断元素是否存在于数组中!

if (arr.indexOf(ele) === -1){//说明元素不存在!!
  console.log('元素不存在!)
} else {
  console.log(' 元素存在! ')
}

13. lastIndexOf

该方法用来查找元素最后一次在数组中出现的位置

ES5新增的遍历数组方法

1. forEach( )

该方法等同于for循环,没有返回值

用法:

arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})

2.map( )

映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

//里面的function是一个回调函数,

//item: 数组中的每一项;

//index:item 对应的下标索引值

//arr: 就是调用该方法的数组本身

用法:

let arr = [1,32,54,6,543];
let res = arr.map(function(item,index,arr){
  return item*2;
})

3. filter( )

filter方法: 有返回值, 过滤出符合条件的元素

let arr = [1, 3, 5, 2, 4, 6];
let res3 = arr.filter(function(item, index) {
  return item % 2 === 0;
});
console.log(res3);

过滤出布尔类型为true的项

let arr2 = [0, "", false, 1, 3, 4];
let res4 = arr2.filter(function(item, index) {
  return item;
});
console.log(res4);

4. some

判断数组中有没有符合条件的项(只要有,就返回true),如果一个都没有,才返回false

let arr3 = [
  { name: "zs", age: 18, done: "notYet" },
  { name: "ls", age: 20, done: true },
  { name: "ww", age: 22, done: true }
];
let res5 = arr3.some(function(item) {
  return item.done;
});
console.log(res5);

5. every

判断数组中所有的项是否满足要求,如果全都满足,才返回true,否则返回false

let res6 = arr3.every(function(item) {
  return item.done;
});
console.log(res6);

6. find

找到符合条件的项,并且返回第一项

let arr4 = [
  { id: 3, name: "ls", done: false },
  { id: 1, name: "zs", done: true },
  { id: 2, name: "ww", done: true }
];
// var res7 = arr4.find(function(item) {
//   return item.done;
// });
// console.log(res7);

7. findIndex

找到符合条件的项的下标,并且返回第一个

var res8 = arr4.findIndex(function(item) {
  return item.done;
});
console.log(res8);

8.reduce

1.求和计算


*第一次:pre–>1 next–>2 index–>1

pre+next=1+2=3

*第二次:pre–>3 next–>3 index–>2

pre+next=3+3=6

*第三次:pre–>6 next–>4 index–>3

pre+next=6+4=10

第四次:pre–>10 next–>5 index–>4

 

var arr1 = [1,2,3,4,5] ;
  var new1 = arr1.reduce(function(pre,next,index){
      return pre+next ;
       //pre+next=10+5=15
  })
  console.log(new1);

2.扁平化数组(拼接数组)

  var arr2 = [[1,2,3],[4,5],[6,7]] ;
  var new2 = arr2.reduce(function(pre,next,index){
      return pre.concat(next);  //前数组拼接后数组 .concat()
  })
  console.log(new2);

3.对象数组叠加计算

  var arr3 = [
  {price:10,count:1},
  {price:15,count:2},
  {price:10,count:3}
  ];
  var new3 = arr3.reduce(function(pre,next,index){
      return pre+next.price*next.count;
  },0)  //在原数组第一项添加为0,不改变原数组,则可不操作第一项
  console.log(new3);

应用 : 计算数组中每个元素出现的次数

投票板

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) {
    // console.log(allNames, '| ' + name);
    if (name in allNames) {
      allNames[name]++;
    } else {
      allNames[name] = 1;
    }
    return allNames;
}, {});
console.log(countedNames);
相关文章
Map遍历的几种方法
Map遍历的几种方法
|
9月前
|
存储 索引
事件委托,数组去重
事件委托,数组去重
194 0
|
10月前
|
前端开发
前端数组方法slice
前端数组方法slice
67 0
|
1月前
|
索引
javaScripe如何进行数组去重。
javaScripe如何进行数组去重。
16 0
|
10月前
|
前端开发
前端数组方法splice
前端数组方法splice
68 0
|
C++
c++的一些常用数组函数
前两天再刷蓝桥杯题库的时候做到一道有思路但是因为用循环太复杂导致没写出来,后来看别人的题解的时候才知道原来要使用“全排列函数”,而我当时对这个函数没有一点影响了,所以我觉得我应该复习一些c++函数了,今天总结的是一些较为常见的数组函数。
244 0
c++的一些常用数组函数
|
11月前
|
JSON 算法 数据格式
彻底搞定各种数组去重需求
前言 数组去重是面试时候常考的,我们日常工作中,也经常会遇到, 接下来就归纳总结几种数组去重的方案, 在我们开发和面试的时候可以得心应手, 分类 在实现数组去重之前我们我们简单进行一下分类, 数组去重,我们一般 分为单个数组去重 和多个数组交叉去重, 接下来我们就从单个数组开始
171 0
|
12月前
|
索引
Lodash _.数组方法
Lodash _.数组方法
63 0
sort() 方法是最强大的数组方法之一。
sort() 方法是最强大的数组方法之一。
59 0
|
JavaScript